4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
416 lines
No EOL
14 KiB
HTML
416 lines
No EOL
14 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>OS-Style Programs Menu Example</title>
|
|
|
|
<!-- Standard reset and fonts -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/reset/reset.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
|
|
<link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css">
|
|
|
|
<!-- CSS for Menu -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
|
|
|
<!-- Page-specific styles -->
|
|
<style type="text/css">
|
|
|
|
html {
|
|
|
|
overflow:hidden;
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
background-color:#dfb8df;
|
|
overflow:hidden;
|
|
|
|
}
|
|
|
|
/* Define a style for the H1 "toolbar" */
|
|
|
|
.ytoolbar {
|
|
|
|
border-top-width:2px;
|
|
border-top-color:#ddd;
|
|
border-top-style:solid;
|
|
background-color:#ccc;
|
|
position:absolute;
|
|
width:100%;
|
|
|
|
}
|
|
|
|
|
|
/* Style the "Yahoo!" anchor to look like a button */
|
|
|
|
.ytoolbar #yahoo {
|
|
|
|
border-width:2px;
|
|
border-color:#ddd #666 #666 #ddd;
|
|
border-style:solid;
|
|
float:left;
|
|
*float:none;
|
|
*display:inline-block;
|
|
padding:4px 12px 4px 28px;
|
|
margin:4px;
|
|
background-color:#ccc;
|
|
color:#000;
|
|
text-decoration:none;
|
|
background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat;
|
|
|
|
}
|
|
|
|
.ytoolbar #yahoo:active {
|
|
|
|
border-color:#666 #ddd #ddd #666;
|
|
|
|
}
|
|
|
|
|
|
/* Define a new style for each menu */
|
|
|
|
div.yuimenu {
|
|
|
|
border-width:2px;
|
|
border-color:#ddd #666 #666 #ddd;
|
|
border-style:solid;
|
|
background-color:#ccc;
|
|
|
|
}
|
|
|
|
|
|
/* Define a new style for each menu item */
|
|
|
|
div.yuimenu li.yuimenuitem {
|
|
|
|
padding-top:4px;
|
|
padding-bottom:4px;
|
|
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif);
|
|
background-position:4px;
|
|
background-repeat:no-repeat;
|
|
|
|
}
|
|
|
|
div.yuimenu li.yuimenuitem img {
|
|
|
|
*border-color:#ccc;
|
|
|
|
}
|
|
|
|
|
|
/* Add icons to menu items */
|
|
|
|
div.yuimenu li.hassubmenu {
|
|
|
|
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/fldr16_1.gif);
|
|
|
|
}
|
|
|
|
div.yuimenu li#help {
|
|
|
|
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
|
|
|
|
}
|
|
|
|
div.yuimenu li#search {
|
|
|
|
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
|
|
|
|
}
|
|
|
|
div.yuimenu li#goto {
|
|
|
|
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);
|
|
|
|
}
|
|
|
|
div.yuimenu li#examples {
|
|
|
|
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/lnk16_1.gif);
|
|
|
|
}
|
|
|
|
|
|
/* Define a new style for an item's "selected" state */
|
|
|
|
div.yuimenu li.selected {
|
|
|
|
background-color:#039;
|
|
|
|
}
|
|
|
|
div.yuimenu li.selected a.selected {
|
|
|
|
text-decoration:none;
|
|
|
|
}
|
|
|
|
div.yuimenu li.yuimenuitem.selected img.selected {
|
|
|
|
*border-color:#039;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Namespace source file -->
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
|
|
|
|
<!-- Dependency source files -->
|
|
<script type="text/javascript" src="../../build/event/event.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
|
|
|
|
|
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
|
|
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
|
|
|
<!-- Container source file -->
|
|
<script type="text/javascript" src="../../build/container/container.js"></script>
|
|
|
|
<!-- Menu source file -->
|
|
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
|
|
|
<!-- Page-specific script -->
|
|
<script type="text/javascript">
|
|
|
|
// "load" handler for the window
|
|
|
|
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
|
|
|
// "click" handler for the "Go to..." menu item
|
|
|
|
function onGotoClick() {
|
|
|
|
var sURL = window.prompt("Enter a URL:","");
|
|
|
|
if(sURL && sURL.length > 0) {
|
|
|
|
document.location = sURL;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
var oH1 = document.getElementsByTagName("h1")[0];
|
|
|
|
/*
|
|
Apply the "ytoolbar" class to the H1 so that it is styled
|
|
like an application toolbar
|
|
*/
|
|
|
|
YAHOO.util.Dom.addClass(oH1, "ytoolbar");
|
|
|
|
|
|
function PositionToolbar() {
|
|
|
|
// Position the H1 "toolbar" to the bottom of the viewport
|
|
|
|
var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
|
|
nToolbarHeight = oH1.offsetHeight;
|
|
|
|
oH1.style.top = (nViewportHeight - nToolbarHeight) + "px";
|
|
|
|
}
|
|
|
|
PositionToolbar();
|
|
|
|
|
|
// Instantiate the root menu and submenus
|
|
|
|
var oMenu = new YAHOO.widget.Menu(
|
|
"yproducts",
|
|
{ constraintoviewport:true, zIndex:2 }
|
|
);
|
|
|
|
|
|
// Add a link back to the examples index page
|
|
|
|
var oExamples = oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Examples",
|
|
{ url: "index.html" }
|
|
)
|
|
);
|
|
|
|
oExamples.element.id = "examples";
|
|
|
|
|
|
// Add a "Go to..." item to the root menu
|
|
|
|
var oGoTo = oMenu.addItem("Go to...");
|
|
|
|
oGoTo.element.id = "goto";
|
|
|
|
|
|
// Add a "click" event handler to the "Go to..." item
|
|
|
|
oGoTo.clickEvent.subscribe(onGotoClick);
|
|
|
|
|
|
// Render the root menu and submenus
|
|
|
|
oMenu.render();
|
|
|
|
|
|
/*
|
|
Position the bottom-left corner of the root menu to the
|
|
top-left corner of the "Yahoo!" anchor
|
|
*/
|
|
|
|
oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
|
|
|
|
|
|
// "click" event handler for "Yahoo!" button
|
|
|
|
function onYahooClick(p_oEvent) {
|
|
|
|
// Position and display the menu
|
|
|
|
oMenu.align("bl", "tl");
|
|
|
|
oMenu.show();
|
|
|
|
|
|
// Stop propagation and prevent the default "click" behavior
|
|
|
|
YAHOO.util.Event.stopEvent(p_oEvent);
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
Assign a "click" event handler to the "Yahoo!" anchor that
|
|
will display the menu
|
|
*/
|
|
|
|
YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);
|
|
|
|
|
|
// "click" event handler for the document
|
|
|
|
function onDocumentClick(p_oEvent) {
|
|
|
|
// Hide the menu
|
|
|
|
oMenu.hide();
|
|
|
|
}
|
|
|
|
/*
|
|
Assign a "click" event handler to the document that will
|
|
hide the menu
|
|
*/
|
|
|
|
YAHOO.util.Event.addListener(
|
|
document,
|
|
"click",
|
|
onDocumentClick
|
|
);
|
|
|
|
|
|
// "resize" handler for the window
|
|
|
|
function onWindowResize() {
|
|
|
|
PositionToolbar();
|
|
|
|
oMenu.align("bl", "tl");
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
Add a "resize" event handler for the window that will
|
|
reposition the H1 "toolbar" to the bottom of the viewport
|
|
*/
|
|
|
|
YAHOO.util.Event.addListener(window, "resize", onWindowResize);
|
|
|
|
|
|
var oPanel = new YAHOO.widget.SimpleDialog(
|
|
"exampleinfo",
|
|
{
|
|
constraintoviewport: true,
|
|
fixedcenter:true,
|
|
width:"400px",
|
|
zIndex:1
|
|
}
|
|
);
|
|
|
|
|
|
oPanel.setHeader("OS-Style Programs Menu Example");
|
|
oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu.");
|
|
|
|
oPanel.render(document.body);
|
|
|
|
oPanel.show();
|
|
|
|
}
|
|
|
|
|
|
// Add a "load" event handler for the window
|
|
|
|
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1><a id="yahoo" href="http://www.yahoo.com">Yahoo!</a></h1>
|
|
|
|
<div id="yproducts">
|
|
<div class="bd">
|
|
<ul>
|
|
<li>Products
|
|
<div id="products">
|
|
<div class="bd">
|
|
<ul>
|
|
<li><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
|
<li><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
|
<li><a href="http://calendar.yahoo.com">Yahoo! Calender</a></li>
|
|
<li><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
|
<li><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
|
<li><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
|
<li><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
|
<li><a href="http://finance.yahoo.com/">Finance</a></li>
|
|
<li><a href="http://entertainment.yahoo.com/">Entertainment</a>
|
|
<div id="entertainmentproducts">
|
|
<div class="bd">
|
|
<ul>
|
|
<li><a href="http://music.yahoo.com/">Yahoo! Music</a></li>
|
|
<li><a href="http://movies.yahoo.com/">Yahoo! Movies</a></li>
|
|
<li><a href="http://tv.yahoo.com/">Yahoo! TV</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li id="search"><a href="http://search.yahoo.com/">Search</a>
|
|
<div id="searchproducts">
|
|
<div class="bd">
|
|
<ul>
|
|
<li><a href="http://images.search.yahoo.com/images">Yahoo! Image Search</a></li>
|
|
<li><a href="http://dir.yahoo.com/">Yahoo! Directory</a></li>
|
|
<li><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
|
<li><a href="http://news.search.yahoo.com/news">Yahoo! News Search</a></li>
|
|
<li><a href="http://search.yahoo.com/people">Yahoo! People Search</a></li>
|
|
<li><a href="http://search.yahoo.com/products">Yahoo! Product Search</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li id="help"><a href="http://help.yahoo.com/">Help</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |