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
164 lines
No EOL
5.7 KiB
HTML
164 lines
No EOL
5.7 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>Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript</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">
|
|
|
|
<!-- CSS for Menu -->
|
|
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
|
|
|
<!-- Page-specific styles -->
|
|
<style type="text/css">
|
|
|
|
body { margin:.5em; }
|
|
|
|
</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>
|
|
|
|
<!-- Container source file -->
|
|
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
|
|
|
<!-- Menu source file -->
|
|
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
|
|
|
<!-- Page-specific script -->
|
|
<script type="text/javascript">
|
|
|
|
YAHOO.example.onWindowLoad = function(p_oEvent) {
|
|
|
|
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
|
|
|
// Add MenuItem instances to the first group
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Mail",
|
|
{ url:"http://mail.yahoo.com"}
|
|
)
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Address Book",
|
|
{ url:"http://addressbook.yahoo.com"}
|
|
)
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Calendar",
|
|
{ url:"http://calendar.yahoo.com"}
|
|
)
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Notepad",
|
|
{ url:"http://notepad.yahoo.com"}
|
|
)
|
|
);
|
|
|
|
|
|
// Add MenuItem instances to the second group
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Local",
|
|
{ url:"http://local.yahoo.com"}
|
|
),
|
|
1
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Maps",
|
|
{ url:"http://maps.yahoo.com"}
|
|
),
|
|
1
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Travel",
|
|
{ url:"http://travel.yahoo.com"}
|
|
),
|
|
1
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Shopping",
|
|
{ url:"http://shopping.yahoo.com"}
|
|
),
|
|
1
|
|
);
|
|
|
|
|
|
// Add MenuItem instances to the third group
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Messenger",
|
|
{ url:"http://messenger.yahoo.com"}
|
|
),
|
|
2
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! 360",
|
|
{ url:"http://360.yahoo.com"}
|
|
),
|
|
2
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Groups",
|
|
{ url:"http://groups.yahoo.com"}
|
|
),
|
|
2
|
|
);
|
|
|
|
oMenu.addItem(
|
|
new YAHOO.widget.MenuItem(
|
|
"Yahoo! Photos",
|
|
{ url:"http://photos.yahoo.com"}
|
|
),
|
|
2
|
|
);
|
|
|
|
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
|
|
oMenu.setItemGroupTitle("Yahoo! Search", 1);
|
|
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
|
|
|
|
oMenu.render(document.body);
|
|
|
|
oMenu.show();
|
|
|
|
}
|
|
|
|
|
|
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
|
<p>This example demonstrates how to title groups of MenuItem instances. The Menu API also supports building a menu like this <a href="example05.html">using existing markup</a>.</p>
|
|
|
|
</body>
|
|
</html> |