oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgrade to yui 2.5.1

Browse source
This commit is contained in:
JT Smith 2008-03-25 16:13:25 +00:00
parent e00050ad1c
commit ff7d72becc
1632 changed files with 812103 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

314
www/extras/yui/examples/menu/applicationmenubar.html Normal file
View file

File diff suppressed because one or more lines are too long

260
www/extras/yui/examples/menu/applicationmenubar_source.html Normal file
View file

@ -0,0 +1,260 @@
<!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: Application Menubar (YUI Library)</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/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance's
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
<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">
/*
Initialize and render the MenuBar when the page's DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "<em id=\"yahoolabel\">Yahoo!</em>",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
Instantiate a MenuBar: The first argument passed to the
constructor is the id of the element to be created; the
second is an object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
/*
Add a "show" event listener that keeps the left-most
submenu against the left edge of the browser viewport.
*/
function onSubmenuShow() {
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
}
var oElement,
nOffsetWidth;
if ((this.id == "filemenu" || this.id == "editmenu") &&
YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>

BIN
www/extras/yui/examples/menu/assets/dolly.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
www/extras/yui/examples/menu/assets/grass.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

518
www/extras/yui/examples/menu/contextmenu.html Normal file
View file

File diff suppressed because one or more lines are too long

447
www/extras/yui/examples/menu/contextmenu_source.html Normal file
View file

@ -0,0 +1,447 @@
<!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: Context Menu (YUI Library)</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/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
h1 {
font-weight: bold;
margin: 0 0 1em 0;
}
body {
padding: 1em;
}
p, ul {
margin: 1em 0;
}
p em,
#operainstructions li em {
font-weight: bold;
}
#operainstructions {
list-style-type: square;
margin-left: 2em;
}
#clones {
background: #99cc66 url(assets/grass.png);
/* Hide the alpha PNG from IE 6 */
_background-image: none;
width: 450px;
height: 400px;
overflow: auto;
}
#clones li {
float: left;
display: inline;
border: solid 1px #000;
background-color: #fff;
margin: 10px;
text-align: center;
zoom: 1;
}
#clones li img {
border: solid 1px #000;
margin: 5px;
}
#clones li cite {
display: block;
text-align: center;
margin: 0 0 5px 0;
padding: 0 5px;
}
</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/animation/animation.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">
/*
Initialize the ContextMenu instances when the the elements
that trigger their display are ready to be scripted.
*/
YAHOO.util.Event.onContentReady("clones", function () {
// Maintain a reference to the "clones" <ul>
var oClones = this;
// Clone the first ewe so that we can create more later
var oLI = oClones.getElementsByTagName("li")[0];
var oEweTemplate = oLI.cloneNode(true);
// Renames an "ewe"
function editEweName(p_oLI) {
var oCite = p_oLI.lastChild;
if (oCite.nodeType != 1) {
oCite = oCite.previousSibling;
}
var oTextNode = oCite.firstChild;
var sName = window.prompt("Enter a new name for ",
oTextNode.nodeValue);
if (sName && sName.length > 0) {
oTextNode.nodeValue = sName;
}
}
// Clones an "ewe"
function cloneEwe(p_oLI, p_oMenu) {
var oClone = p_oLI.cloneNode(true);
p_oLI.parentNode.appendChild(oClone);
p_oMenu.cfg.setProperty("trigger", oClones.childNodes);
}
// Deletes an "ewe"
function deleteEwe(p_oLI) {
var oUL = p_oLI.parentNode;
oUL.removeChild(p_oLI);
}
/*
Returns the <li> instance that is the parent node of the
target of a "contextmenu" event.
*/
function getListItemFromEventTarget(p_oNode) {
if (p_oNode.tagName.toUpperCase() == "LI") {
return p_oNode;
}
else {
/*
If the target of the event was a child of an <li>,
get the parent <li> element.
*/
do {
if (p_oNode.tagName.toUpperCase() == "LI") {
return p_oNode;
}
}
while ((p_oNode = p_oNode.parentNode));
}
}
// "click" event handler for each item in the ewe context menu
function onEweContextMenuClick(p_sType, p_aArgs) {
/*
The second item in the arguments array (p_aArgs)
passed back to the "click" event handler is the
MenuItem instance that was the target of the
"click" event.
*/
var oItem = p_aArgs[1], // The MenuItem that was clicked
oLI;
if (oItem) {
oLI = getListItemFromEventTarget(this.contextEventTarget);
switch (oItem.index) {
case 0: // Edit name
editEweName(oLI);
break;
case 1: // Clone
cloneEwe(oLI, this);
break;
case 2: // Delete
deleteEwe(oLI);
break;
}
}
}
/*
Array of text labels for the MenuItem instances to be
added to the ContextMenu instanc.
*/
var aMenuItems = ["Edit Name", "Clone", "Delete" ];
/*
Instantiate a ContextMenu: The first argument passed to
the constructor is the id of the element to be created; the
second is an object literal of configuration properties.
*/
var oEweContextMenu = new YAHOO.widget.ContextMenu(
"ewecontextmenu",
{
trigger: oClones.childNodes,
itemdata: aMenuItems,
lazyload: true
}
);
// "render" event handler for the ewe context menu
function onContextMenuRender(p_sType, p_aArgs) {
// Add a "click" event handler to the ewe context menu
this.subscribe("click", onEweContextMenuClick);
}
// Add a "render" event handler to the ewe context menu
oEweContextMenu.subscribe("render", onContextMenuRender);
// Deletes an ewe from the field
function deleteEwes() {
oEweContextMenu.cfg.setProperty("target", null);
oClones.innerHTML = "";
function onHide(p_sType, p_aArgs, p_oItem) {
p_oItem.cfg.setProperty("disabled", true);
p_oItem.parent.unsubscribe("hide", onHide, p_oItem);
}
this.parent.subscribe("hide", onHide, this);
}
// Creates a new ewe and appends it to the field
function createNewEwe() {
var oLI = oEweTemplate.cloneNode(true);
oClones.appendChild(oLI);
this.parent.getItem(1).cfg.setProperty("disabled", false);
oEweContextMenu.cfg.setProperty("trigger", oClones.childNodes);
}
// Sets the color of the grass in the field
function setFieldColor(p_sType, p_aArgs, p_sColor) {
var oCheckedItem = this.parent.checkedItem;
if (oCheckedItem != this) {
YAHOO.util.Dom.setStyle("clones", "backgroundColor", p_sColor);
this.cfg.setProperty("checked", true);
oCheckedItem.cfg.setProperty("checked", false);
this.parent.checkedItem = this;
}
}
// "render" event handler for the field context menu
function onFieldMenuRender(p_sType, p_aArgs) {
if (this.parent) { // submenu
this.checkedItem = this.getItem(0);
}
}
/*
Array of object literals - each containing configuration
properties for the items for the context menu.
*/
var oFieldContextMenuItemData = [
{
text: "Field color",
submenu: {
id: "fieldcolors",
itemdata: [
{ text: "Light Green", onclick: { fn: setFieldColor, obj: "#99cc66" }, checked: true },
{ text: "Medium Green", onclick: { fn: setFieldColor, obj: "#669933" } },
{ text: "Dark Green", onclick: { fn: setFieldColor, obj: "#336600" } }
]
}
},
{ text: "Delete all", onclick: { fn: deleteEwes } },
{ text: "New Ewe", onclick: { fn: createNewEwe } }
];
/*
Instantiate a ContextMenu: The first argument passed to
the constructor is the id of the element to be created; the
second is an object literal of configuration properties.
*/
var oFieldContextMenu = new YAHOO.widget.ContextMenu(
"fieldcontextmenu",
{
trigger: "clones",
itemdata: oFieldContextMenuItemData,
lazyload: true
}
);
// Add a "render" event handler to the field context menu
oFieldContextMenu.subscribe("render", onFieldMenuRender);
});
</script>
</head>
<body class="yui-skin-sam">
<ul id="clones">
<li><a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29"><img src="assets/dolly.jpg" width="100" height="100" alt="Dolly, a ewe, the first mammal to have been successfully cloned from an adult cell."></a><cite>Dolly</cite></li>
</ul>
</body>
</html>

290
www/extras/yui/examples/menu/example01.html Normal file
View file

File diff suppressed because one or more lines are too long

131
www/extras/yui/examples/menu/example01_clean.html Normal file
View file

@ -0,0 +1,131 @@
<!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>Basic Menu From Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Menu From Markup</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu instance using existing markup
on the page.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("basicmenu", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="basicmenu" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

269
www/extras/yui/examples/menu/example02.html Normal file
View file

File diff suppressed because one or more lines are too long

126
www/extras/yui/examples/menu/example02_clean.html Normal file
View file

@ -0,0 +1,126 @@
<!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>Basic Menu From JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Menu From JavaScript</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu instance using nothing
but JavaScript.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

344
www/extras/yui/examples/menu/example03.html Normal file
View file

File diff suppressed because one or more lines are too long

137
www/extras/yui/examples/menu/example03_clean.html Normal file
View file

@ -0,0 +1,137 @@
<!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>Grouped Menu Items Using Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items Using Markup</h1>
<div class="exampleIntro">
<p>This example demonstrates how to group MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("menuwithgroups", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="menuwithgroups" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Yahoo! Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Yahoo! Maps</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Yahoo! Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Yahoo! Shopping</a></li>
</ul>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">Yahoo! 360</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Yahoo! Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

308
www/extras/yui/examples/menu/example04.html Normal file
View file

File diff suppressed because one or more lines are too long

141
www/extras/yui/examples/menu/example04_clean.html Normal file
View file

@ -0,0 +1,141 @@
<!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>Grouped Menu Items Using JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items Using JavaScript</h1>
<div class="exampleIntro">
<p>This example demonstrates how to group MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
[
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
],
[
{ text: "Yahoo! Local", url: "http://local.yahoo.com" },
{ text: "Yahoo! Maps", url: "http://maps.yahoo.com" },
{ text: "Yahoo! Travel", url: "http://travel.yahoo.com" },
{ text: "Yahoo! Shopping", url: "http://shopping.yahoo.com" }
],
[
{ text: "Yahoo! Messenger", url: "http://messenger.yahoo.com" },
{ text: "Yahoo! 360", url: "http://360.yahoo.com" },
{ text: "Yahoo! Groups", url: "http://groups.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" }
]
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

355
www/extras/yui/examples/menu/example05.html Normal file
View file

File diff suppressed because one or more lines are too long

140
www/extras/yui/examples/menu/example05_clean.html Normal file
View file

@ -0,0 +1,140 @@
<!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>Grouped Menu Items With Titles From Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items With Titles From Markup</h1>
<div class="exampleIntro">
<p>This example demonstrates how to title groups of MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("menuwithgroups", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="menuwithgroups" class="yuimenu">
<div class="bd">
<h6 class="first-of-type">Yahoo! PIM</h6>
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
<h6>Yahoo! Search</h6>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Yahoo! Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Yahoo! Maps</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Yahoo! Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Yahoo! Shopping</a></li>
</ul>
<h6>Yahoo! Communications</h6>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">Yahoo! 360</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Yahoo! Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

325
www/extras/yui/examples/menu/example06.html Normal file
View file

File diff suppressed because one or more lines are too long

149
www/extras/yui/examples/menu/example06_clean.html Normal file
View file

@ -0,0 +1,149 @@
<!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>Grouped Menu Items With Titles From JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items With Titles From JavaScript</h1>
<div class="exampleIntro">
<p>This example demonstrates how to title groups of MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
[
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
],
[
{ text: "Yahoo! Local", url: "http://local.yahoo.com" },
{ text: "Yahoo! Maps", url: "http://maps.yahoo.com" },
{ text: "Yahoo! Travel", url: "http://travel.yahoo.com" },
{ text: "Yahoo! Shopping", url: "http://shopping.yahoo.com" }
],
[
{ text: "Yahoo! Messenger", url: "http://messenger.yahoo.com" },
{ text: "Yahoo! 360", url: "http://360.yahoo.com" },
{ text: "Yahoo! Groups", url: "http://groups.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" }
]
]);
// Add the title for each group of menu items
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
oMenu.setItemGroupTitle("Yahoo! Search", 1);
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

442
www/extras/yui/examples/menu/example07.html Normal file
View file

File diff suppressed because one or more lines are too long

220
www/extras/yui/examples/menu/example07_clean.html Normal file
View file

@ -0,0 +1,220 @@
<!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>Multi-tiered Menu From Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Multi-tiered Menu From Markup</h1>
<div class="exampleIntro">
<p>This example demonstrates how to create a multi-tiered menu using existing markup on the page.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate the menu and corresponding submenus. The first argument passed
to the constructor is the id of the element in the DOM that represents
the menu; the second is an object literal representing a set of
configuration properties for the menu.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#communication">Communication</a>
<div id="communication" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360&#176;</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.com">Alerts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.com">Avatars</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#pim">PIM</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.com">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a>
<div id="shopping" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.com">Auctions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.com">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.com">Classifieds</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers &#38; Gifts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.com">Real Estate</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.com">Wallet</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.com">Yellow Pages</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
<div id="entertainment" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.com">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.com">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com">Music</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.com">Movies</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com/launchcast">Radio</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.com">TV</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#information">Information</a>
<div id="information" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.com">Downloads</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.com">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.com">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Maps &#38; Directions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.com">My Yahoo!</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.com">News</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.com">Search</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.com">Small Business</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.com">Weather</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

483
www/extras/yui/examples/menu/example08.html Normal file
View file

File diff suppressed because one or more lines are too long

229
www/extras/yui/examples/menu/example08_clean.html Normal file
View file

@ -0,0 +1,229 @@
<!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>Multi-tiered Menu From JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Multi-tiered Menu From JavaScript</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a multi-tiered menu using nothing
but JavaScript.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Define an array of object literals, each containing
the configuration properties necessary to create a MenuItem and
its corresponding submenu.
*/
var aItems = [
{
text: "Communication",
url: "#communication",
submenu: {
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{
text: "PIM",
url: "#pim",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" }
]
}
},
{
text: "Shopping",
url: "http://shopping.yahoo.com",
submenu: {
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
]
}
},
{
text: "Entertainment",
url: "http://entertainment.yahoo.com",
submenu: {
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
]
}
},
{
text: "Information",
url: "#information",
submenu: {
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
}
}
];
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems(aItems);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

354
www/extras/yui/examples/menu/example09.html Normal file
View file

File diff suppressed because one or more lines are too long

168
www/extras/yui/examples/menu/example09_clean.html Normal file
View file

@ -0,0 +1,168 @@
<!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>Handling Menu Click Events</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Handling Menu Click Events</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to register a "click" event handler for a
MenuItem instance.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
"click" event handler for the Menu instance - used to keep the Menu
instance visible when clicked, since by default a Menu instance
will hide when clicked.
*/
function onMenuClick(p_sType, p_aArgs, p_oValue) {
this.show();
}
/*
"click" event handler for each MenuItem instance - used to log
info about the MenuItem that was clicked.
*/
function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
YAHOO.log(("index: " + this.index +
", text: " + this.cfg.getProperty("text") +
", value: " + p_oValue), "info", "example9");
}
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("mymenu", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
// Register a "click" event handler for the first item.
{ text: "Item One", onclick: { fn: onMenuItemClick } },
/*
Register a "click" event handler for the second item,
passing a string arguemnt ("foo") to the event handler.
*/
{ text: "Item Two", onclick: { fn: onMenuItemClick, obj: "foo" } },
/*
Register a "click" event handler for the third item and
passing and array as an argument to the event handler.
*/
{ text: "Item Three", onclick: { fn: onMenuItemClick, obj: ["foo", "bar"] } }
]);
oMenu.subscribe("click", onMenuClick);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

445
www/extras/yui/examples/menu/example10.html Normal file
View file

File diff suppressed because one or more lines are too long

217
www/extras/yui/examples/menu/example10_clean.html Normal file
View file

@ -0,0 +1,217 @@
<!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>Listening For Menu Events</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Listening For Menu Events</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to listen for DOM-related events. Interaction
with the Menu will result in event information being output to the console.
<em>Please note</em>: Disabled MenuItem instances do not fire DOM events. This
is demonstrated with the MenuItem named "MenuItem 2."
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Generic event handler used to log info about the DOM events for
the Menu instance.
*/
function onMenuEvent(p_sType, p_aArgs) {
var oDOMEvent = p_aArgs[0];
YAHOO.log(("Id: " + this.id + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type),
"info", "example10");
}
/*
Generic event handler used to log info about the DOM events for
each MenuItem instance.
*/
function onMenuItemEvent(p_sType, p_aArgs) {
var oDOMEvent = p_aArgs[0];
YAHOO.log(("Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type
), "info", "example10");
}
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
// Subscribe to the Menu instance's "itemAdded" event
oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
var oMenuItem = p_aArgs[0];
/*
Subscribe to each MenuItem instance's DOM events as they
are added to the Menu instance.
*/
oMenuItem.subscribe("mouseover", onMenuItemEvent);
oMenuItem.subscribe("mouseout", onMenuItemEvent);
oMenuItem.subscribe("mousedown", onMenuItemEvent);
oMenuItem.subscribe("mouseup", onMenuItemEvent);
oMenuItem.subscribe("click", onMenuItemEvent);
oMenuItem.subscribe("keydown", onMenuItemEvent);
oMenuItem.subscribe("keyup", onMenuItemEvent);
oMenuItem.subscribe("keypress", onMenuItemEvent);
});
// Subscribe to every DOM event for the Menu instance.
oMenu.subscribe("mouseover", onMenuEvent);
oMenu.subscribe("mouseout", onMenuEvent);
oMenu.subscribe("mousedown", onMenuEvent);
oMenu.subscribe("mouseup", onMenuEvent);
oMenu.subscribe("click", onMenuEvent);
oMenu.subscribe("keydown", onMenuEvent);
oMenu.subscribe("keyup", onMenuEvent);
oMenu.subscribe("keypress", onMenuEvent);
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
"MenuItem 0",
"MenuItem 1",
/*
Add a disabled menu item to demonstrate that disabled
items do not respond to DOM events.
*/
{ text: "MenuItem 2", disabled: true },
"MenuItem 3",
"MenuItem 4"
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

283
www/extras/yui/examples/menu/example11.html Normal file
View file

File diff suppressed because one or more lines are too long

143
www/extras/yui/examples/menu/example11_clean.html Normal file
View file

@ -0,0 +1,143 @@
<!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>MenuItem Configuration Properties</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.yui-skin-sam .yuimenuitemlabel .helptext {
margin-left: 20em;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>MenuItem Configuration Properties</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to set MenuItem configuration properties when
adding items to a Menu instance.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true } );
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
{ text: "Selected MenuItem", selected: true },
{ text: "Disabled MenuItem", disabled: true },
{ text: "MenuItem With A URL", url: "http://www.yahoo.com" },
{ text: "Checked MenuItem", checked: true }
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

385
www/extras/yui/examples/menu/example12.html Normal file
View file

File diff suppressed because one or more lines are too long

187
www/extras/yui/examples/menu/example12_clean.html Normal file
View file

@ -0,0 +1,187 @@
<!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>Setting Menu Configuration Properties At Runtime</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Setting Menu Configuration Properties At Runtime</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to set MenuItem configuration properties at
runtime and listen for the changes through the "configChanged" event.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a menu will hide it.
Additionally, menu items without a submenu or a URL to navigate to will hide their
parent menu when clicked. Click the "Show Menu" button below to make the menu
visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
"configChange" event handler for each MenuItem instance - used
to log info about the configuration property that was changed.
*/
function onMenuItemConfigChange(p_sType, p_aArgs) {
var sPropertyName = p_aArgs[0][0],
sPropertyValue = p_aArgs[0][1];
YAHOO.log(("Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"\"" + sPropertyName + "\" Property Set To: \""
+ sPropertyValue + "\""), "info", "example12");
}
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
/*
Subscribe to the Menu instance's "itemAdded" event in order to
subscribe to the "configChange" event handler of each MenuItem
instance's configuration object.
*/
oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
var oMenuItem = p_aArgs[0];
/*
Subscribe to the "configChange" event handler of each MenuItem
instance's configuration object.
*/
oMenuItem.cfg.subscribe("configChanged", onMenuItemConfigChange);
});
/*
Add items to the Menu instance by passing an array of strings
(each of which represents the "text" configuration property of a
YAHOO.widget.MenuItem instance) to the "addItems" method.
*/
oMenu.addItems([
"Selected MenuItem",
"Disabled MenuItem",
"MenuItem With A URL",
"Checked MenuItem"
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
/*
Set a configuration property of each MenuItem to trigger the firing
of its configuration object's "configChanged" event.
*/
oMenu.getItem(0).cfg.setProperty("selected", true);
oMenu.getItem(1).cfg.setProperty("disabled", true);
oMenu.getItem(2).cfg.setProperty("url", "http://www.yahoo.com");
oMenu.getItem(3).cfg.setProperty("checked", true);
// Set focus to the Menu when it is made visible
oMenu.subscribe("show", oMenu.focus);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

87
www/extras/yui/examples/menu/index.html Normal file
View file

File diff suppressed because one or more lines are too long

320
www/extras/yui/examples/menu/leftnavfromjs.html Normal file
View file

File diff suppressed because one or more lines are too long

283
www/extras/yui/examples/menu/leftnavfromjs_source.html Normal file
View file

@ -0,0 +1,283 @@
<!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: Website Left Nav With Submenus From JavaScript (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
position: static;
}
/*
For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
setting the "zoom" property to 1. This ensures that the selected state of
MenuItems doesn't get dropped when the user mouses off of the text node of
the anchor element that represents a MenuItem's text label.
*/
#productsandservices .yuimenuitemlabel {
_zoom: 1;
}
#productsandservices .yuimenu .yuimenuitemlabel {
_zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<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">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", {
position: "static",
hidedelay: 750,
lazyload: true });
/*
Define an array of object literals, each containing
the data necessary to create a submenu.
*/
var aSubmenuData = [
{
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{
text: "PIM",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
]
},
{
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
]
},
{
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
]
},
{
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
}
];
// Subscribe to the Menu instance's "beforeRender" event
oMenu.subscribe("beforeRender", function () {
if (this.getRoot() == this) {
this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
}
});
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Left Nav With Submenus From JavaScript (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#communication">Communication</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#">Information</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

335
www/extras/yui/examples/menu/leftnavfromjswithanim.html Normal file
View file

File diff suppressed because one or more lines are too long

283
www/extras/yui/examples/menu/leftnavfromjswithanim_source.html Normal file
View file

@ -0,0 +1,283 @@
<!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: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
position: static;
}
/*
For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
setting the "zoom" property to 1. This ensures that the selected state of
MenuItems doesn't get dropped when the user mouses off of the text node of
the anchor element that represents a MenuItem's text label.
*/
#productsandservices .yuimenuitemlabel {
_zoom: 1;
}
#productsandservices .yuimenu .yuimenuitemlabel {
_zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<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">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu(
"productsandservices",
{
position: "static",
hidedelay: 750,
lazyload: true,
effect: {
effect: YAHOO.widget.ContainerEffect.FADE,
duration: 0.25
}
}
);
/*
Define an array of object literals, each containing
the data necessary to create a submenu.
*/
var aSubmenuData = [
{
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{
text: "PIM",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
]
},
{
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
]
},
{
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
]
},
{
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
}
];
// Subscribe to the Menu instance's "beforeRender" event
oMenu.subscribe("beforeRender", function () {
if (this.getRoot() == this) {
this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
}
});
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<p><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu with submenus built using JavaScript.</em></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#communication">Communication</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Information</a></li>
</ul>
</div>
</div>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

194
www/extras/yui/examples/menu/leftnavfrommarkup.html Normal file
View file

File diff suppressed because one or more lines are too long

262
www/extras/yui/examples/menu/leftnavfrommarkup_source.html Normal file
View file

@ -0,0 +1,262 @@
<!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: Website Left Nav With Submenus Built From Markup (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
position: static;
}
/*
For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
setting the "zoom" property to 1. This ensures that the selected state of
MenuItems doesn't get dropped when the user mouses off of the text node of
the anchor element that represents a MenuItem's text label.
*/
#productsandservices .yuimenuitemlabel {
_zoom: 1;
}
#productsandservices .yuimenu .yuimenuitemlabel {
_zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<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">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", {
position: "static",
hidedelay: 750,
lazyload: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Left Nav With Submenus Built From Markup (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<p><strong>NOTE:</strong> <em>This example demonstrates how to add submenus to a menu using existing markup.</em></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem first-of-type"><a class="yuimenuitemlabel" href="#communication">Communication</a>
<div id="communication" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360&#176;</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.com">Alerts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.com">Avatars</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">PIM</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.com">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a>
<div id="shopping" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.com">Auctions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.com">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.com">Classifieds</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers &#38; Gifts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.com">Real Estate</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.com">Wallet</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.com">Yellow Pages</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
<div id="entertainment" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.com">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.com">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com">Music</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.com">Movies</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com/launchcast">Radio</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.com">TV</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Information</a>
<div id="information" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.com">Downloads</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.com">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.com">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Maps &#38; Directions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.com">My Yahoo!</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.com">News</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.com">Search</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.com">Small Business</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.com">Weather</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

205
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html Normal file
View file

File diff suppressed because one or more lines are too long

271
www/extras/yui/examples/menu/leftnavfrommarkupwithanim_source.html Normal file
View file

@ -0,0 +1,271 @@
<!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: Website Left Nav Using Animation With Submenus Built From Markup (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
position: static;
}
/*
For IE 6: trigger "haslayout" for the anchor elements in the root Menu by
setting the "zoom" property to 1. This ensures that the selected state of
MenuItems doesn't get dropped when the user mouses off of the text node of
the anchor element that represents a MenuItem's text label.
*/
#productsandservices .yuimenuitemlabel {
_zoom: 1;
}
#productsandservices .yuimenu .yuimenuitemlabel {
_zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<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">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu(
"productsandservices",
{
position: "static",
hidedelay: 750,
lazyload: true,
effect: {
effect: YAHOO.widget.ContainerEffect.FADE,
duration: 0.25
}
}
);
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Left Nav Using Animation With Submenus Built From Markup (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<p><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu with submenus built using existing markup.</em></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem first-of-type"><a class="yuimenuitemlabel" href="#communication">Communication</a>
<div id="communication" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360&#176;</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.com">Alerts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.com">Avatars</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">PIM</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.com">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com">Shopping</a>
<div id="shopping" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.com">Auctions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.com">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.com">Classifieds</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers &#38; Gifts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.com">Real Estate</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.com">Wallet</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.com">Yellow Pages</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
<div id="entertainment" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.com">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.com">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com">Music</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.com">Movies</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com/launchcast">Radio</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.com">TV</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Information</a>
<div id="information" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.com">Downloads</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.com">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.com">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Maps &#38; Directions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.com">My Yahoo!</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.com">News</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.com">Search</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.com">Small Business</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.com">Weather</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

344
www/extras/yui/examples/menu/menuwaiaria.html Normal file
View file

File diff suppressed because one or more lines are too long

231
www/extras/yui/examples/menu/menuwaiaria_source.html Normal file
View file

@ -0,0 +1,231 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Using ARIA Roles and States with YUI Menu</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/skins/sam/menu.css">
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="../../build/menu/menu.js"></script>
<script type="text/javascript">
/*
Initialize and render the MenuBar when the page's DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{ text: "File", submenu: { id: "filemenu", itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{ text: "Open With...", submenu: { id: "applications", itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
] }
},
{ text: "Print", helptext: "Ctrl + P" }
] }
},
{ text: "Edit", submenu: { id: "editmenu", itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y" }
],
[
{ text: "Cut", helptext: "Ctrl + X" },
{ text: "Copy", helptext: "Ctrl + C" },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del" }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
}
];
/*
Instantiate a MenuBar: The first argument passed to the constructor is the id
of the HTML to be created that will represent the MenuBar; the second is an
object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Add a "show" event listener that keeps the left-most
submenu against the left edge of the browser viewport.
*/
function onSubmenuShow() {
if (this.id == "yahoo") {
this.cfg.setProperty("x", 0);
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
/*
Add the WAI-ARIA Roles and States to the MenuBar's DOM elements once it
is rendered.
*/
oMenuBar.subscribe("render", function () {
/*
Apply the "role" attribute of "menu" or "menubar" depending on the type of
the Menu control being rendered.
*/
this.element.setAttribute("role",
(this instanceof YAHOO.widget.MenuBar ? "menubar" : "menu"));
/*
Apply the appropriate "role" and "aria-[state]" attributes to the label of
each MenuItem instance.
*/
var aMenuItems = this.getItems(),
i = aMenuItems.length - 1,
oMenuItem,
oMenuItemLabel;
do {
oMenuItem = aMenuItems[i];
/*
Retrieve a reference to the anchor element that serves as the label for
each MenuItem.
*/
oMenuItemLabel = oMenuItem.element.firstChild;
// Set the "role" attribute of the label to "menuitem"
oMenuItemLabel.setAttribute("role", "menuitem");
// Remove the label from the browser's default tab order
oMenuItemLabel.setAttribute("tabindex", -1);
/*
Optional: JAWS announces the value of each anchor element's "href"
attribute when it recieves focus. If the MenuItem instance's "url"
attribute is set to the default, remove the attribute so that JAWS
does announce its value.
*/
if (oMenuItem.cfg.getProperty("url") == "#") {
oMenuItemLabel.removeAttribute("href");
}
/*
If the MenuItem has a submenu, set the "aria-haspopup" attribute to
true so that the screen reader can announce
*/
if (oMenuItem.cfg.getProperty("submenu")) {
oMenuItemLabel.setAttribute("aria-haspopup", true);
}
}
while (i--);
/*
Set the "tabindex" of the first MenuItem's label to 0 so the user can
easily tab into and out of the control.
*/
if (this.getRoot() == this) {
this.getItem(0).element.firstChild.setAttribute("tabindex", 0);
}
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html>

424
www/extras/yui/examples/menu/programsmenu.html Normal file
View file

File diff suppressed because one or more lines are too long

384
www/extras/yui/examples/menu/programsmenu_source.html Normal file
View file

@ -0,0 +1,384 @@
<!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: OS-Style Programs Menu (YUI Library)</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/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
overflow: hidden;
background-color: #dfb8df;
}
h1 {
font-weight: bold;
}
body {
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;
bottom: 0;
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; /* For IE */
*display: inline-block; /* For IE */
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 */
.yui-skin-sam .yuimenu {
line-height: 2; /* ~24px */
*line-height: 1.9; /* For IE */
}
.yui-skin-sam .yuimenu .bd {
border-width: 2px;
border-color: #ddd #666 #666 #ddd;
border-style: solid;
background-color: #ccc;
}
/* Define a new style for each MenuItem instance. */
.yui-skin-sam #yproducts li.yuimenuitem .yuimenuitemlabel {
background: url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) no-repeat 4px;
padding: 0 20px 0 24px;
}
.yui-skin-sam #yproducts li.yuimenuitem {
/*
For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode:
Used to collapse superfluous white space between <li>
elements that is triggered by the "display" property of the
<a> elements being set to "block."
*/
_border-bottom: solid 1px #ccc;
}
/* Define a new style for a MenuItem instance's "selected" state. */
.yui-skin-sam #yproducts .yuimenuitem-selected {
background-color: #039;
}
.yui-skin-sam #yproducts .yuimenuitemlabel-selected {
color: #fff;
}
/* Add unique icons to some of the MenuItem instances. */
.yui-skin-sam #yproducts li#help .yuimenuitemlabel {
background-image: url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
}
.yui-skin-sam #yproducts li#search .yuimenuitemlabel {
background-image: url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
}
.yui-skin-sam #yproducts li#goto .yuimenuitemlabel {
background-image: url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/utilities/utilities.js"></script>
<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">
/*
Initialize and render the MenuBar when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("yproducts", function () {
var oPanel = new YAHOO.widget.Panel(
"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);
/*
Apply the "ytoolbar" class to the <H1> so that it is styled
like an application toolbar.
*/
var oH1 = document.getElementsByTagName("h1")[0];
YAHOO.util.Dom.addClass(oH1, "ytoolbar");
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("yproducts", { zindex: 2 });
/*
Aligns the bottom-left corner of Menu instance to the
top-left corner of the Yahoo! anchor element that is
its context element.
*/
function positionMenu() {
oMenu.align("bl", "tl");
}
// "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;
}
}
/*
Add an additional item to the Menu instance. Unlike the
other items in the Menu instance, this item is added via
script since its functionality requires JavaScript.
*/
oMenu.addItem({ text: "Go to...", id: "goto", onclick: { fn: onGotoClick } });
/*
"beforeShow" event listener - used to position the
root Menu instance when it is displayed.
*/
oMenu.subscribe("beforeShow", function () {
if (this.getRoot() == this) {
positionMenu();
}
});
/*
Call the "render" method with no arguments since the
markup for this menu already exists in the pages.
*/
oMenu.render();
/*
Position the bottom-left corner of the root menu to the
top-left corner of the "Yahoo!" anchor element.
*/
oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
// "click" event handler for "Yahoo!" button
function onYahooClick(p_oEvent) {
// Position and display the menu
positionMenu();
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);
/*
Add a "resize" event handler for the window that will
reposition the H1 "toolbar" to the bottom of the viewport
*/
YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionMenu);
});
</script>
</head>
<body class="yui-skin-sam">
<h1><a id="yahoo" href="http://www.yahoo.com">Yahoo!</a></h1>
<div id="yproducts">
<div class="bd">
<ul>
<li><a href="#">Products</a>
<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://www.flickr.com">Flickr Photo Sharing</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>

400
www/extras/yui/examples/menu/tablecontextmenu.html Normal file
View file

File diff suppressed because one or more lines are too long

468
www/extras/yui/examples/menu/tablecontextmenu_source.html Normal file
View file

@ -0,0 +1,468 @@
<!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: Adding A Context Menu To A Table (YUI Library)</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/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
h1 {
font-weight: bold;
margin: 0 0 1em 0;
}
body {
padding: 1em;
}
p, ul {
margin: 1em 0;
}
p em,
#operainstructions li em {
font-weight: bold;
}
#operainstructions {
list-style-type: square;
margin-left: 2em;
}
#dataset {
border: solid 1px #000;
}
#dataset tr.odd {
background-color: #ccc;
}
#dataset tr.selected {
background-color: #039;
}
#dataset td {
border: solid 1px #000;
padding: .25em .5em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<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">
/*
Utility function for triming the extra white space from the
begining and end of a string.
*/
String.prototype.trim = function () {
var s = this.replace(/^\s+/, "");
return s.replace(/\s+$/, "");
};
/*
Initialize the ContextMenu instance when the the elements
that trigger their display are ready to be scripted.
*/
YAHOO.util.Event.onContentReady("dataset", function () {
/*
Map of CSS class names to arrays of MenuItem
configuration properties.
*/
var oContextMenuItems = {
"type1": [
"Context Menu 1, Item 1",
{
text: "Context Menu 1, Item 2",
submenu: {
id: "submenu1",
lazyload: true,
itemdata: [
"Context Menu 1 Submenu, Item 1",
"Context Menu 1 Submenu, Item 2",
"Context Menu 1 Submenu, Item 3",
"Context Menu 1 Submenu, Item 4"
]
}
},
"Context Menu 1, Item 3",
"Context Menu 1, Item 4"
],
"type2": [
"Context Menu 2, Item 1",
"Context Menu 2, Item 2",
"Context Menu 2, Item 3",
"Context Menu 2, Item 4",
"Context Menu 2, Item 5",
"Context Menu 2, Item 6",
"Context Menu 2, Item 7",
"Context Menu 2, Item 8",
"Context Menu 2, Item 9",
"Context Menu 2, Item 10"
],
"type3": [
"Context Menu 3, Item 1",
"Context Menu 3, Item 2",
"Context Menu 3, Item 3",
"Context Menu 3, Item 4"
],
"type4": [
"Context Menu 4, Item 1",
"Context Menu 4, Item 2"
],
"type5": [
"Context Menu 5, Item 1",
"Context Menu 5, Item 2",
"Context Menu 5, Item 3",
"Context Menu 5, Item 4",
"Context Menu 5, Item 5",
"Context Menu 5, Item 6"
]
};
/*
Utility function used to return the parent <tr> element of
the actual node in the "dataset" table that fired the
"contextmenu" event.
*/
function getTableRowFromEventTarget(p_oNode) {
if (p_oNode.tagName.toUpperCase() == "TR") {
return p_oNode;
}
else {
/*
If the target of the event was a child of a TR,
get the parent TR element
*/
do {
if (p_oNode.tagName.toUpperCase() == "TR") {
return p_oNode;
break;
}
}
while ((p_oNode = p_oNode.parentNode));
}
}
var oSelectedTR; // The currently selected TR
/*
"beforeshow" event handler for the ContextMenu instance -
replaces the content of the ContextMenu instance based
on the CSS class name of the <tr> element that triggered
its display.
*/
function onContextMenuBeforeShow(p_sType, p_aArgs) {
var aMenuItems,
aClasses;
if (this.getRoot() == this) {
/*
Get the <tr> that was the target of the
"contextmenu" event.
*/
oSelectedTR = getTableRowFromEventTarget(this.contextEventTarget);
/*
Get the array of MenuItems for the CSS class name from
the "oContextMenuItems" map.
*/
if (YAHOO.util.Dom.hasClass(oSelectedTR, "odd")) {
aClasses = oSelectedTR.className.split(" ");
aMenuItems = oContextMenuItems[aClasses[0]];
}
else {
aMenuItems = oContextMenuItems[oSelectedTR.className.trim()];
}
// Remove the existing content from the ContentMenu instance
this.clearContent();
// Add the new set of items to the ContentMenu instance
this.addItems(aMenuItems);
// Render the ContextMenu instance with the new content
this.render();
/*
Highlight the <tr> element in the table that was
the target of the "contextmenu" event.
*/
YAHOO.util.Dom.addClass(oSelectedTR, "selected");
}
}
/*
"hide" event handler for the ContextMenu - used to
clear the selected <tr> element in the table.
*/
function onContextMenuHide(p_sType, p_aArgs) {
if (this.getRoot() == this && oSelectedTR) {
YAHOO.util.Dom.removeClass(oSelectedTR, "selected");
}
}
/*
Instantiate a ContextMenu: The first argument passed to
the constructor is the id of the element to be created; the
second is an object literal of configuration properties.
*/
var oContextMenu = new YAHOO.widget.ContextMenu("contextmenu", {
trigger: "dataset",
lazyload: true
});
/*
Subscribe to the ContextMenu instance's "beforeshow" and
"hide" events.
*/
oContextMenu.subscribe("beforeShow", onContextMenuBeforeShow);
oContextMenu.subscribe("hide", onContextMenuHide);
});
</script>
</head>
<body class="yui-skin-sam">
<h1>Example: Adding A Context Menu To A Table (YUI Library)</h1>
<p>
When adding context menus to large data structures like a
<code>&#60;table&#62;</code> or large list (<code>&#60;ol&#62;</code>
or <code>&#60;ul&#62;</code>), it is recommended to bind a single
YAHOO.widget.ContextMenu instance to the structure's root element, than to a set
of its child nodes (<code>&#60;tr&#62;</code>s or <code>&#60;li&#62;</code>s).
Doing so significantly improves the performance of a web page or
application by reducing the number of "contextmenu" event handlers
as well as the number of YAHOO.widget.ContextMenu instances in memory.
</p>
<p>
This example demonstrates this technique, as well as how to create
a context-sensitive context menu; a context menu whose content
changes based on the element that triggered its display.
</p>
<p><em>Please Note:</em> Opera users will need to do the following to use this example:</p>
<ul id="operainstructions">
<li><em>Opera for Windows:</em> Hold down the control key and click with the left mouse button.</li>
<li><em>Opera for OS X:</em> Hold down the command key (&#8984;) and click with the left mouse button.</li>
</ul>
<table id="dataset">
<tr class="type5 odd"><td>Row 0, Column 1</td><td>Row 0, Column 2</td><td>Row 0, Column 3</td><td>Row 0, Column 4</td></tr>
<tr class="type3"><td>Row 1, Column 1</td><td>Row 1, Column 2</td><td>Row 1, Column 3</td><td>Row 1, Column 4</td></tr>
<tr class="type2 odd"><td>Row 2, Column 1</td><td>Row 2, Column 2</td><td>Row 2, Column 3</td><td>Row 2, Column 4</td></tr>
<tr class="type5"><td>Row 3, Column 1</td><td>Row 3, Column 2</td><td>Row 3, Column 3</td><td>Row 3, Column 4</td></tr>
<tr class="type3 odd"><td>Row 4, Column 1</td><td>Row 4, Column 2</td><td>Row 4, Column 3</td><td>Row 4, Column 4</td></tr>
<tr class="type1"><td>Row 5, Column 1</td><td>Row 5, Column 2</td><td>Row 5, Column 3</td><td>Row 5, Column 4</td></tr>
<tr class="type5 odd"><td>Row 6, Column 1</td><td>Row 6, Column 2</td><td>Row 6, Column 3</td><td>Row 6, Column 4</td></tr>
<tr class="type1"><td>Row 7, Column 1</td><td>Row 7, Column 2</td><td>Row 7, Column 3</td><td>Row 7, Column 4</td></tr>
<tr class="type5 odd"><td>Row 8, Column 1</td><td>Row 8, Column 2</td><td>Row 8, Column 3</td><td>Row 8, Column 4</td></tr>
<tr class="type4"><td>Row 9, Column 1</td><td>Row 9, Column 2</td><td>Row 9, Column 3</td><td>Row 9, Column 4</td></tr>
<tr class="type2 odd"><td>Row 10, Column 1</td><td>Row 10, Column 2</td><td>Row 10, Column 3</td><td>Row 10, Column 4</td></tr>
<tr class="type1"><td>Row 11, Column 1</td><td>Row 11, Column 2</td><td>Row 11, Column 3</td><td>Row 11, Column 4</td></tr>
<tr class="type2 odd"><td>Row 12, Column 1</td><td>Row 12, Column 2</td><td>Row 12, Column 3</td><td>Row 12, Column 4</td></tr>
<tr class="type2"><td>Row 13, Column 1</td><td>Row 13, Column 2</td><td>Row 13, Column 3</td><td>Row 13, Column 4</td></tr>
<tr class="type3 odd"><td>Row 14, Column 1</td><td>Row 14, Column 2</td><td>Row 14, Column 3</td><td>Row 14, Column 4</td></tr>
<tr class="type4"><td>Row 15, Column 1</td><td>Row 15, Column 2</td><td>Row 15, Column 3</td><td>Row 15, Column 4</td></tr>
<tr class="type4 odd"><td>Row 16, Column 1</td><td>Row 16, Column 2</td><td>Row 16, Column 3</td><td>Row 16, Column 4</td></tr>
<tr class="type5"><td>Row 17, Column 1</td><td>Row 17, Column 2</td><td>Row 17, Column 3</td><td>Row 17, Column 4</td></tr>
<tr class="type3 odd"><td>Row 18, Column 1</td><td>Row 18, Column 2</td><td>Row 18, Column 3</td><td>Row 18, Column 4</td></tr>
<tr class="type3"><td>Row 19, Column 1</td><td>Row 19, Column 2</td><td>Row 19, Column 3</td><td>Row 19, Column 4</td></tr>
<tr class="type3 odd"><td>Row 20, Column 1</td><td>Row 20, Column 2</td><td>Row 20, Column 3</td><td>Row 20, Column 4</td></tr>
<tr class="type1"><td>Row 21, Column 1</td><td>Row 21, Column 2</td><td>Row 21, Column 3</td><td>Row 21, Column 4</td></tr>
<tr class="type3 odd"><td>Row 22, Column 1</td><td>Row 22, Column 2</td><td>Row 22, Column 3</td><td>Row 22, Column 4</td></tr>
<tr class="type4"><td>Row 23, Column 1</td><td>Row 23, Column 2</td><td>Row 23, Column 3</td><td>Row 23, Column 4</td></tr>
<tr class="type3 odd"><td>Row 24, Column 1</td><td>Row 24, Column 2</td><td>Row 24, Column 3</td><td>Row 24, Column 4</td></tr>
<tr class="type4"><td>Row 25, Column 1</td><td>Row 25, Column 2</td><td>Row 25, Column 3</td><td>Row 25, Column 4</td></tr>
<tr class="type3 odd"><td>Row 26, Column 1</td><td>Row 26, Column 2</td><td>Row 26, Column 3</td><td>Row 26, Column 4</td></tr>
<tr class="type3"><td>Row 27, Column 1</td><td>Row 27, Column 2</td><td>Row 27, Column 3</td><td>Row 27, Column 4</td></tr>
<tr class="type1 odd"><td>Row 28, Column 1</td><td>Row 28, Column 2</td><td>Row 28, Column 3</td><td>Row 28, Column 4</td></tr>
<tr class="type2"><td>Row 29, Column 1</td><td>Row 29, Column 2</td><td>Row 29, Column 3</td><td>Row 29, Column 4</td></tr>
<tr class="type1 odd"><td>Row 30, Column 1</td><td>Row 30, Column 2</td><td>Row 30, Column 3</td><td>Row 30, Column 4</td></tr>
<tr class="type1"><td>Row 31, Column 1</td><td>Row 31, Column 2</td><td>Row 31, Column 3</td><td>Row 31, Column 4</td></tr>
<tr class="type5 odd"><td>Row 32, Column 1</td><td>Row 32, Column 2</td><td>Row 32, Column 3</td><td>Row 32, Column 4</td></tr>
<tr class="type2"><td>Row 33, Column 1</td><td>Row 33, Column 2</td><td>Row 33, Column 3</td><td>Row 33, Column 4</td></tr>
<tr class="type5 odd"><td>Row 34, Column 1</td><td>Row 34, Column 2</td><td>Row 34, Column 3</td><td>Row 34, Column 4</td></tr>
<tr class="type2"><td>Row 35, Column 1</td><td>Row 35, Column 2</td><td>Row 35, Column 3</td><td>Row 35, Column 4</td></tr>
<tr class="type2 odd"><td>Row 36, Column 1</td><td>Row 36, Column 2</td><td>Row 36, Column 3</td><td>Row 36, Column 4</td></tr>
<tr class="type4"><td>Row 37, Column 1</td><td>Row 37, Column 2</td><td>Row 37, Column 3</td><td>Row 37, Column 4</td></tr>
<tr class="type2 odd"><td>Row 38, Column 1</td><td>Row 38, Column 2</td><td>Row 38, Column 3</td><td>Row 38, Column 4</td></tr>
<tr class="type1"><td>Row 39, Column 1</td><td>Row 39, Column 2</td><td>Row 39, Column 3</td><td>Row 39, Column 4</td></tr>
<tr class="type3 odd"><td>Row 40, Column 1</td><td>Row 40, Column 2</td><td>Row 40, Column 3</td><td>Row 40, Column 4</td></tr>
<tr class="type3"><td>Row 41, Column 1</td><td>Row 41, Column 2</td><td>Row 41, Column 3</td><td>Row 41, Column 4</td></tr>
<tr class="type2 odd"><td>Row 42, Column 1</td><td>Row 42, Column 2</td><td>Row 42, Column 3</td><td>Row 42, Column 4</td></tr>
<tr class="type4"><td>Row 43, Column 1</td><td>Row 43, Column 2</td><td>Row 43, Column 3</td><td>Row 43, Column 4</td></tr>
<tr class="type5 odd"><td>Row 44, Column 1</td><td>Row 44, Column 2</td><td>Row 44, Column 3</td><td>Row 44, Column 4</td></tr>
<tr class="type4"><td>Row 45, Column 1</td><td>Row 45, Column 2</td><td>Row 45, Column 3</td><td>Row 45, Column 4</td></tr>
<tr class="type2 odd"><td>Row 46, Column 1</td><td>Row 46, Column 2</td><td>Row 46, Column 3</td><td>Row 46, Column 4</td></tr>
<tr class="type3"><td>Row 47, Column 1</td><td>Row 47, Column 2</td><td>Row 47, Column 3</td><td>Row 47, Column 4</td></tr>
<tr class="type4 odd"><td>Row 48, Column 1</td><td>Row 48, Column 2</td><td>Row 48, Column 3</td><td>Row 48, Column 4</td></tr>
<tr class="type4"><td>Row 49, Column 1</td><td>Row 49, Column 2</td><td>Row 49, Column 3</td><td>Row 49, Column 4</td></tr>
<tr class="type1 odd"><td>Row 50, Column 1</td><td>Row 50, Column 2</td><td>Row 50, Column 3</td><td>Row 50, Column 4</td></tr>
<tr class="type2"><td>Row 51, Column 1</td><td>Row 51, Column 2</td><td>Row 51, Column 3</td><td>Row 51, Column 4</td></tr>
<tr class="type5 odd"><td>Row 52, Column 1</td><td>Row 52, Column 2</td><td>Row 52, Column 3</td><td>Row 52, Column 4</td></tr>
<tr class="type4"><td>Row 53, Column 1</td><td>Row 53, Column 2</td><td>Row 53, Column 3</td><td>Row 53, Column 4</td></tr>
<tr class="type5 odd"><td>Row 54, Column 1</td><td>Row 54, Column 2</td><td>Row 54, Column 3</td><td>Row 54, Column 4</td></tr>
<tr class="type2"><td>Row 55, Column 1</td><td>Row 55, Column 2</td><td>Row 55, Column 3</td><td>Row 55, Column 4</td></tr>
<tr class="type2 odd"><td>Row 56, Column 1</td><td>Row 56, Column 2</td><td>Row 56, Column 3</td><td>Row 56, Column 4</td></tr>
<tr class="type2"><td>Row 57, Column 1</td><td>Row 57, Column 2</td><td>Row 57, Column 3</td><td>Row 57, Column 4</td></tr>
<tr class="type5 odd"><td>Row 58, Column 1</td><td>Row 58, Column 2</td><td>Row 58, Column 3</td><td>Row 58, Column 4</td></tr>
<tr class="type3"><td>Row 59, Column 1</td><td>Row 59, Column 2</td><td>Row 59, Column 3</td><td>Row 59, Column 4</td></tr>
<tr class="type4 odd"><td>Row 60, Column 1</td><td>Row 60, Column 2</td><td>Row 60, Column 3</td><td>Row 60, Column 4</td></tr>
<tr class="type5"><td>Row 61, Column 1</td><td>Row 61, Column 2</td><td>Row 61, Column 3</td><td>Row 61, Column 4</td></tr>
<tr class="type3 odd"><td>Row 62, Column 1</td><td>Row 62, Column 2</td><td>Row 62, Column 3</td><td>Row 62, Column 4</td></tr>
<tr class="type3"><td>Row 63, Column 1</td><td>Row 63, Column 2</td><td>Row 63, Column 3</td><td>Row 63, Column 4</td></tr>
<tr class="type1 odd"><td>Row 64, Column 1</td><td>Row 64, Column 2</td><td>Row 64, Column 3</td><td>Row 64, Column 4</td></tr>
<tr class="type2"><td>Row 65, Column 1</td><td>Row 65, Column 2</td><td>Row 65, Column 3</td><td>Row 65, Column 4</td></tr>
<tr class="type4 odd"><td>Row 66, Column 1</td><td>Row 66, Column 2</td><td>Row 66, Column 3</td><td>Row 66, Column 4</td></tr>
<tr class="type3"><td>Row 67, Column 1</td><td>Row 67, Column 2</td><td>Row 67, Column 3</td><td>Row 67, Column 4</td></tr>
<tr class="type1 odd"><td>Row 68, Column 1</td><td>Row 68, Column 2</td><td>Row 68, Column 3</td><td>Row 68, Column 4</td></tr>
<tr class="type1"><td>Row 69, Column 1</td><td>Row 69, Column 2</td><td>Row 69, Column 3</td><td>Row 69, Column 4</td></tr>
<tr class="type4 odd"><td>Row 70, Column 1</td><td>Row 70, Column 2</td><td>Row 70, Column 3</td><td>Row 70, Column 4</td></tr>
<tr class="type3"><td>Row 71, Column 1</td><td>Row 71, Column 2</td><td>Row 71, Column 3</td><td>Row 71, Column 4</td></tr>
<tr class="type3 odd"><td>Row 72, Column 1</td><td>Row 72, Column 2</td><td>Row 72, Column 3</td><td>Row 72, Column 4</td></tr>
<tr class="type5"><td>Row 73, Column 1</td><td>Row 73, Column 2</td><td>Row 73, Column 3</td><td>Row 73, Column 4</td></tr>
<tr class="type2 odd"><td>Row 74, Column 1</td><td>Row 74, Column 2</td><td>Row 74, Column 3</td><td>Row 74, Column 4</td></tr>
<tr class="type3"><td>Row 75, Column 1</td><td>Row 75, Column 2</td><td>Row 75, Column 3</td><td>Row 75, Column 4</td></tr>
<tr class="type4 odd"><td>Row 76, Column 1</td><td>Row 76, Column 2</td><td>Row 76, Column 3</td><td>Row 76, Column 4</td></tr>
<tr class="type4"><td>Row 77, Column 1</td><td>Row 77, Column 2</td><td>Row 77, Column 3</td><td>Row 77, Column 4</td></tr>
<tr class="type5 odd"><td>Row 78, Column 1</td><td>Row 78, Column 2</td><td>Row 78, Column 3</td><td>Row 78, Column 4</td></tr>
<tr class="type3"><td>Row 79, Column 1</td><td>Row 79, Column 2</td><td>Row 79, Column 3</td><td>Row 79, Column 4</td></tr>
<tr class="type3 odd"><td>Row 80, Column 1</td><td>Row 80, Column 2</td><td>Row 80, Column 3</td><td>Row 80, Column 4</td></tr>
<tr class="type1"><td>Row 81, Column 1</td><td>Row 81, Column 2</td><td>Row 81, Column 3</td><td>Row 81, Column 4</td></tr>
<tr class="type4 odd"><td>Row 82, Column 1</td><td>Row 82, Column 2</td><td>Row 82, Column 3</td><td>Row 82, Column 4</td></tr>
<tr class="type3"><td>Row 83, Column 1</td><td>Row 83, Column 2</td><td>Row 83, Column 3</td><td>Row 83, Column 4</td></tr>
<tr class="type4 odd"><td>Row 84, Column 1</td><td>Row 84, Column 2</td><td>Row 84, Column 3</td><td>Row 84, Column 4</td></tr>
<tr class="type3"><td>Row 85, Column 1</td><td>Row 85, Column 2</td><td>Row 85, Column 3</td><td>Row 85, Column 4</td></tr>
<tr class="type4 odd"><td>Row 86, Column 1</td><td>Row 86, Column 2</td><td>Row 86, Column 3</td><td>Row 86, Column 4</td></tr>
<tr class="type1"><td>Row 87, Column 1</td><td>Row 87, Column 2</td><td>Row 87, Column 3</td><td>Row 87, Column 4</td></tr>
<tr class="type5 odd"><td>Row 88, Column 1</td><td>Row 88, Column 2</td><td>Row 88, Column 3</td><td>Row 88, Column 4</td></tr>
<tr class="type4"><td>Row 89, Column 1</td><td>Row 89, Column 2</td><td>Row 89, Column 3</td><td>Row 89, Column 4</td></tr>
<tr class="type3 odd"><td>Row 90, Column 1</td><td>Row 90, Column 2</td><td>Row 90, Column 3</td><td>Row 90, Column 4</td></tr>
<tr class="type3"><td>Row 91, Column 1</td><td>Row 91, Column 2</td><td>Row 91, Column 3</td><td>Row 91, Column 4</td></tr>
<tr class="type3 odd"><td>Row 92, Column 1</td><td>Row 92, Column 2</td><td>Row 92, Column 3</td><td>Row 92, Column 4</td></tr>
<tr class="type5"><td>Row 93, Column 1</td><td>Row 93, Column 2</td><td>Row 93, Column 3</td><td>Row 93, Column 4</td></tr>
<tr class="type5 odd"><td>Row 94, Column 1</td><td>Row 94, Column 2</td><td>Row 94, Column 3</td><td>Row 94, Column 4</td></tr>
<tr class="type4"><td>Row 95, Column 1</td><td>Row 95, Column 2</td><td>Row 95, Column 3</td><td>Row 95, Column 4</td></tr>
<tr class="type2 odd"><td>Row 96, Column 1</td><td>Row 96, Column 2</td><td>Row 96, Column 3</td><td>Row 96, Column 4</td></tr>
<tr class="type4"><td>Row 97, Column 1</td><td>Row 97, Column 2</td><td>Row 97, Column 3</td><td>Row 97, Column 4</td></tr>
<tr class="type2 odd"><td>Row 98, Column 1</td><td>Row 98, Column 2</td><td>Row 98, Column 3</td><td>Row 98, Column 4</td></tr>
<tr class="type2"><td>Row 99, Column 1</td><td>Row 99, Column 2</td><td>Row 99, Column 3</td><td>Row 99, Column 4</td></tr>
</table>
</body>
</html>

318
www/extras/yui/examples/menu/topnavfromjs.html Normal file
View file

File diff suppressed because one or more lines are too long

277
www/extras/yui/examples/menu/topnavfromjs_source.html Normal file
View file

@ -0,0 +1,277 @@
<!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: Website Top Nav With Submenus From JavaScript (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
margin: 0 0 10px 0;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<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">
/*
Initialize and render the MenuBar when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a MenuBar: The first argument passed to the
constructor is the id of the element in the page
representing the MenuBar; the second is an object literal
of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
autosubmenudisplay: true,
hidedelay: 750,
lazyload: true });
/*
Define an array of object literals, each containing
the data necessary to create a submenu.
*/
var aSubmenuData = [
{
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{
text: "PIM",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
]
},
{
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
]
},
{
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
]
},
{
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
}
];
/*
Subscribe to the "beforerender" event, adding a submenu
to each of the items in the MenuBar instance.
*/
oMenuBar.subscribe("beforeRender", function () {
if (this.getRoot() == this) {
this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
}
});
/*
Call the "render" method with no arguments since the
markup for this MenuBar instance is already exists in
the page.
*/
oMenuBar.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Top Nav With Submenus From JavaScript (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<div id="productsandservices" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#communication">Communication</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">Information</a>
</li>
</ul>
</div>
</div>
<p><strong>NOTE:</strong> <em>This example demonstrates how to add submenus via JavaScript to a menu bar built from existing markup. The menu bar is constructed using markup and enables the user to navigate to different landing pages for each product category. If JavaScript is enabled, submenus are constructed and appended to the items in the menu bar. This allows the user to skip the product landing pages and proceed directly to a given property.</em></p>
<form name="example">
<select name="test">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

609
www/extras/yui/examples/menu/topnavfromjswithanim.html Normal file
View file

File diff suppressed because one or more lines are too long

545
www/extras/yui/examples/menu/topnavfromjswithanim_source.html Normal file
View file

@ -0,0 +1,545 @@
<!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: Website Top Nav Using Animation With Submenus From JavaScript (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
margin: 0 0 10px 0;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<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">
/*
Initialize and render the MenuBar when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a MenuBar: The first argument passed to the
constructor is the id of the element in the page
representing the MenuBar; the second is an object literal
of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
autosubmenudisplay: true,
hidedelay: 750,
lazyload: true });
/*
Define an array of object literals, each containing
the data necessary to create a submenu.
*/
var aSubmenuData = [
{
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.com" },
{ text: "Alerts", url: "http://alerts.yahoo.com" },
{ text: "Avatars", url: "http://avatars.yahoo.com" },
{ text: "Groups", url: "http://groups.yahoo.com " },
{ text: "Internet Access", url: "http://promo.yahoo.com/broadband" },
{
text: "PIM",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.com" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.com" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.com" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.com" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.com" },
{ text: "Messenger", url: "http://messenger.yahoo.com" },
{ text: "Mobile", url: "http://mobile.yahoo.com" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.com" },
]
},
{
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.com" },
{ text: "Autos", url: "http://autos.yahoo.com" },
{ text: "Classifieds", url: "http://classifieds.yahoo.com" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.com" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "Wallet", url: "http://wallet.yahoo.com" },
{ text: "Yellow Pages", url: "http://yp.yahoo.com" }
]
},
{
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.com" },
{ text: "Games", url: "http://games.yahoo.com" },
{ text: "Kids", url: "http://www.yahooligans.com" },
{ text: "Music", url: "http://music.yahoo.com" },
{ text: "Movies", url: "http://movies.yahoo.com" },
{ text: "Radio", url: "http://music.yahoo.com/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.com" },
{ text: "TV", url: "http://tv.yahoo.com" }
]
},
{
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.com" },
{ text: "Finance", url: "http://finance.yahoo.com" },
{ text: "Health", url: "http://health.yahoo.com" },
{ text: "Local", url: "http://local.yahoo.com" },
{ text: "Maps & Directions", url: "http://maps.yahoo.com" },
{ text: "My Yahoo!", url: "http://my.yahoo.com" },
{ text: "News", url: "http://news.yahoo.com" },
{ text: "Search", url: "http://search.yahoo.com" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.com" },
{ text: "Weather", url: "http://weather.yahoo.com" }
]
}
];
var ua = YAHOO.env.ua,
oAnim; // Animation instance
/*
"beforeshow" event handler for each submenu of the MenuBar
instance, used to setup certain style properties before
the menu is animated.
*/
function onSubmenuBeforeShow(p_sType, p_sArgs) {
var oBody,
oElement,
oShadow,
oUL;
if (this.parent) {
oElement = this.element;
/*
Get a reference to the Menu's shadow element and
set its "height" property to "0px" to syncronize
it with the height of the Menu instance.
*/
oShadow = oElement.lastChild;
oShadow.style.height = "0px";
/*
Stop the Animation instance if it is currently
animating a Menu.
*/
if (oAnim && oAnim.isAnimated()) {
oAnim.stop();
oAnim = null;
}
/*
Set the body element's "overflow" property to
"hidden" to clip the display of its negatively
positioned <ul> element.
*/
oBody = this.body;
// Check if the menu is a submenu of a submenu.
if (this.parent &&
!(this.parent instanceof YAHOO.widget.MenuBarItem)) {
/*
There is a bug in gecko-based browsers where
an element whose "position" property is set to
"absolute" and "overflow" property is set to
"hidden" will not render at the correct width when
its offsetParent's "position" property is also
set to "absolute." It is possible to work around
this bug by specifying a value for the width
property in addition to overflow.
*/
if (ua.gecko) {
oBody.style.width = oBody.clientWidth + "px";
}
/*
Set a width on the submenu to prevent its
width from growing when the animation
is complete.
*/
if (ua.ie == 7) {
oElement.style.width = oElement.clientWidth + "px";
}
}
oBody.style.overflow = "hidden";
/*
Set the <ul> element's "marginTop" property
to a negative value so that the Menu's height
collapses.
*/
oUL = oBody.getElementsByTagName("ul")[0];
oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
}
}
/*
"tween" event handler for the Anim instance, used to
syncronize the size and position of the Menu instance's
shadow and iframe shim (if it exists) with its
changing height.
*/
function onTween(p_sType, p_aArgs, p_oShadow) {
if (this.cfg.getProperty("iframe")) {
this.syncIframe();
}
if (p_oShadow) {
p_oShadow.style.height = this.element.offsetHeight + "px";
}
}
/*
"complete" event handler for the Anim instance, used to
remove style properties that were animated so that the
Menu instance can be displayed at its final height.
*/
function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {
var oBody = this.body,
oUL = oBody.getElementsByTagName("ul")[0];
if (p_oShadow) {
p_oShadow.style.height = this.element.offsetHeight + "px";
}
oUL.style.marginTop = "";
oBody.style.overflow = "";
// Check if the menu is a submenu of a submenu.
if (this.parent &&
!(this.parent instanceof YAHOO.widget.MenuBarItem)) {
// Clear widths set by the "beforeshow" event handler
if (ua.gecko) {
oBody.style.width = "";
}
if (ua.ie == 7) {
this.element.style.width = "";
}
}
}
/*
"show" event handler for each submenu of the MenuBar
instance - used to kick off the animation of the
<ul> element.
*/
function onSubmenuShow(p_sType, p_sArgs) {
var oElement,
oShadow,
oUL;
if (this.parent) {
oElement = this.element;
oShadow = oElement.lastChild;
oUL = this.body.getElementsByTagName("ul")[0];
/*
Animate the <ul> element's "marginTop" style
property to a value of 0.
*/
oAnim = new YAHOO.util.Anim(oUL,
{ marginTop: { to: 0 } },
.5, YAHOO.util.Easing.easeOut);
oAnim.onStart.subscribe(function () {
oShadow.style.height = "100%";
});
oAnim.animate();
/*
Subscribe to the Anim instance's "tween" event for
IE to syncronize the size and position of a
submenu's shadow and iframe shim (if it exists)
with its changing height.
*/
if (YAHOO.env.ua.ie) {
oShadow.style.height = oElement.offsetHeight + "px";
/*
Subscribe to the Anim instance's "tween"
event, passing a reference Menu's shadow
element and making the scope of the event
listener the Menu instance.
*/
oAnim.onTween.subscribe(onTween, oShadow, this);
}
/*
Subscribe to the Anim instance's "complete" event,
passing a reference Menu's shadow element and making
the scope of the event listener the Menu instance.
*/
oAnim.onComplete.subscribe(onAnimationComplete, oShadow, this);
}
}
/*
Subscribe to the "beforerender" event, adding a submenu
to each of the items in the MenuBar instance.
*/
oMenuBar.subscribe("beforeRender", function () {
if (this.getRoot() == this) {
this.getItem(0).cfg.setProperty("submenu", aSubmenuData[0]);
this.getItem(1).cfg.setProperty("submenu", aSubmenuData[1]);
this.getItem(2).cfg.setProperty("submenu", aSubmenuData[2]);
this.getItem(3).cfg.setProperty("submenu", aSubmenuData[3]);
}
});
/*
Subscribe to the "beforeShow" and "show" events for
each submenu of the MenuBar instance.
*/
oMenuBar.subscribe("beforeShow", onSubmenuBeforeShow);
oMenuBar.subscribe("show", onSubmenuShow);
/*
Call the "render" method with no arguments since the
markup for this MenuBar instance is already exists in
the page.
*/
oMenuBar.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Top Nav Using Animation With Submenus From JavaScript (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<div id="productsandservices" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type">
<a class="yuimenubaritemlabel" href="#communication">Communication</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
</li>
<li class="yuimenubaritem">
<a class="yuimenubaritemlabel" href="#">Information</a>
</li>
</ul>
</div>
</div>
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu bar with submenus built using JavaScript.</em></p>
<form name="example">
<select name="test">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

194
www/extras/yui/examples/menu/topnavfrommarkup.html Normal file
View file

File diff suppressed because one or more lines are too long

254
www/extras/yui/examples/menu/topnavfrommarkup_source.html Normal file
View file

@ -0,0 +1,254 @@
<!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: Website Top Nav With Submenus Built From Markup (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
margin: 0 0 10px 0;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<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">
/*
Initialize and render the MenuBar when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate a MenuBar: The first argument passed to the
constructor is the id of the element in the page
representing the MenuBar; the second is an object literal
of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
autosubmenudisplay: true,
hidedelay: 750,
lazyload: true });
/*
Call the "render" method with no arguments since the
markup for this MenuBar instance is already exists in
the page.
*/
oMenuBar.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Top Nav With Submenus Built From Markup (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<div id="productsandservices" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel" href="#communication">Communication</a>
<div id="communication" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360&#176;</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.com">Alerts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.com">Avatars</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">PIM</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.com">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
<div id="shopping" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.com">Auctions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.com">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.com">Classifieds</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers &#38; Gifts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.com">Real Estate</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.com">Wallet</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.com">Yellow Pages</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
<div id="entertainment" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.com">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.com">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com">Music</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.com">Movies</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com/launchcast">Radio</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.com">TV</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#">Information</a>
<div id="information" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.com">Downloads</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.com">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.com">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Maps &#38; Directions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.com">My Yahoo!</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.com">News</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.com">Search</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.com">Small Business</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.com">Weather</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to add submenus to a menu bar using existing markup.</em></p>
<form name="example">
<select name="test">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

467
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html Normal file
View file

File diff suppressed because one or more lines are too long

522
www/extras/yui/examples/menu/topnavfrommarkupwithanim_source.html Normal file
View file

@ -0,0 +1,522 @@
<!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: Website Top Nav Using Animation With Submenus Built From Markup (YUI Library)</title>
<!-- Standard reset, fonts and grids -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
div.yui-b p {
margin: 0 0 .5em 0;
color: #999;
}
div.yui-b p strong {
font-weight: bold;
color: #000;
}
div.yui-b p em {
color: #000;
}
h1 {
font-weight: bold;
margin: 0 0 1em 0;
padding: .25em .5em;
background-color: #ccc;
}
#productsandservices {
margin: 0 0 10px 0;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<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">
/*
Initialize and render the MenuBar when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("productsandservices", function () {
var ua = YAHOO.env.ua,
oAnim; // Animation instance
/*
"beforeshow" event handler for each submenu of the MenuBar
instance, used to setup certain style properties before
the menu is animated.
*/
function onSubmenuBeforeShow(p_sType, p_sArgs) {
var oBody,
oElement,
oShadow,
oUL;
if (this.parent) {
oElement = this.element;
/*
Get a reference to the Menu's shadow element and
set its "height" property to "0px" to syncronize
it with the height of the Menu instance.
*/
oShadow = oElement.lastChild;
oShadow.style.height = "0px";
/*
Stop the Animation instance if it is currently
animating a Menu.
*/
if (oAnim && oAnim.isAnimated()) {
oAnim.stop();
oAnim = null;
}
/*
Set the body element's "overflow" property to
"hidden" to clip the display of its negatively
positioned <ul> element.
*/
oBody = this.body;
// Check if the menu is a submenu of a submenu.
if (this.parent &&
!(this.parent instanceof YAHOO.widget.MenuBarItem)) {
/*
There is a bug in gecko-based browsers where
an element whose "position" property is set to
"absolute" and "overflow" property is set to
"hidden" will not render at the correct width when
its offsetParent's "position" property is also
set to "absolute." It is possible to work around
this bug by specifying a value for the width
property in addition to overflow.
*/
if (ua.gecko) {
oBody.style.width = oBody.clientWidth + "px";
}
/*
Set a width on the submenu to prevent its
width from growing when the animation
is complete.
*/
if (ua.ie == 7) {
oElement.style.width = oElement.clientWidth + "px";
}
}
oBody.style.overflow = "hidden";
/*
Set the <ul> element's "marginTop" property
to a negative value so that the Menu's height
collapses.
*/
oUL = oBody.getElementsByTagName("ul")[0];
oUL.style.marginTop = ("-" + oUL.offsetHeight + "px");
}
}
/*
"tween" event handler for the Anim instance, used to
syncronize the size and position of the Menu instance's
shadow and iframe shim (if it exists) with its
changing height.
*/
function onTween(p_sType, p_aArgs, p_oShadow) {
if (this.cfg.getProperty("iframe")) {
this.syncIframe();
}
if (p_oShadow) {
p_oShadow.style.height = this.element.offsetHeight + "px";
}
}
/*
"complete" event handler for the Anim instance, used to
remove style properties that were animated so that the
Menu instance can be displayed at its final height.
*/
function onAnimationComplete(p_sType, p_aArgs, p_oShadow) {
var oBody = this.body,
oUL = oBody.getElementsByTagName("ul")[0];
if (p_oShadow) {
p_oShadow.style.height = this.element.offsetHeight + "px";
}
oUL.style.marginTop = "";
oBody.style.overflow = "";
// Check if the menu is a submenu of a submenu.
if (this.parent &&
!(this.parent instanceof YAHOO.widget.MenuBarItem)) {
// Clear widths set by the "beforeshow" event handler
if (ua.gecko) {
oBody.style.width = "";
}
if (ua.ie == 7) {
this.element.style.width = "";
}
}
}
/*
"show" event handler for each submenu of the MenuBar
instance - used to kick off the animation of the
<ul> element.
*/
function onSubmenuShow(p_sType, p_sArgs) {
var oElement,
oShadow,
oUL;
if (this.parent) {
oElement = this.element;
oShadow = oElement.lastChild;
oUL = this.body.getElementsByTagName("ul")[0];
/*
Animate the <ul> element's "marginTop" style
property to a value of 0.
*/
oAnim = new YAHOO.util.Anim(oUL,
{ marginTop: { to: 0 } },
.5, YAHOO.util.Easing.easeOut);
oAnim.onStart.subscribe(function () {
oShadow.style.height = "100%";
});
oAnim.animate();
/*
Subscribe to the Anim instance's "tween" event for
IE to syncronize the size and position of a
submenu's shadow and iframe shim (if it exists)
with its changing height.
*/
if (YAHOO.env.ua.ie) {
oShadow.style.height = oElement.offsetHeight + "px";
/*
Subscribe to the Anim instance's "tween"
event, passing a reference Menu's shadow
element and making the scope of the event
listener the Menu instance.
*/
oAnim.onTween.subscribe(onTween, oShadow, this);
}
/*
Subscribe to the Anim instance's "complete" event,
passing a reference Menu's shadow element and making
the scope of the event listener the Menu instance.
*/
oAnim.onComplete.subscribe(onAnimationComplete, oShadow, this);
}
}
/*
Instantiate a MenuBar: The first argument passed to the
constructor is the id of the element in the page
representing the MenuBar; the second is an object literal
of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
autosubmenudisplay: true,
hidedelay: 750,
lazyload: true });
/*
Subscribe to the "beforeShow" and "show" events for
each submenu of the MenuBar instance.
*/
oMenuBar.subscribe("beforeShow", onSubmenuBeforeShow);
oMenuBar.subscribe("show", onSubmenuShow);
/*
Call the "render" method with no arguments since the
markup for this MenuBar already exists in the page.
*/
oMenuBar.render();
});
</script>
</head>
<body class="yui-skin-sam" id="yahoo-com">
<div id="doc" class="yui-t1">
<div id="hd">
<!-- start: your content here -->
<h1>Example: Website Top Nav Using Animation With Submenus Built From Markup (YUI Library)</h1>
<!-- end: your content here -->
</div>
<div id="bd">
<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->
<div id="productsandservices" class="yuimenubar yuimenubarnav">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-of-type"><a class="yuimenubaritemlabel" href="#communication">Communication</a>
<div id="communication" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.com">360&#176;</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.com">Alerts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.com">Avatars</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.com">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">PIM</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.com">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.com">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.com">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.com">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="http://shopping.yahoo.com">Shopping</a>
<div id="shopping" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.com">Auctions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.com">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.com">Classifieds</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers &#38; Gifts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.com">Real Estate</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.com">Wallet</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.com">Yellow Pages</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="http://entertainment.yahoo.com">Entertainment</a>
<div id="entertainment" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.com">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.com">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com">Music</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.com">Movies</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.com/launchcast">Radio</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.com">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.com">TV</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href="#">Information</a>
<div id="information" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.com">Downloads</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.com">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.com">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.com">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.com">Maps &#38; Directions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.com">My Yahoo!</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.com">News</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.com">Search</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.com">Small Business</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.com">Weather</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<p id="note"><strong>NOTE:</strong> <em>This example demonstrates how to add animation effects to a menu bar with submenus built using existing markup.</em></p>
<form name="example">
<select name="test">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
<!-- end: stack grids here -->
</div>
</div>
<!-- end: primary column from outer template -->
<!-- start: secondary column from outer template -->
<div class="yui-b">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
<!-- end: secondary column from outer template -->
</div>
<div id="ft">
<p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p>
</div>
</div>
</body>
</html>

391
www/extras/yui/examples/menu/treeviewcontextmenu.html Normal file
View file

File diff suppressed because one or more lines are too long

303
www/extras/yui/examples/menu/treeviewcontextmenu_source.html Normal file
View file

@ -0,0 +1,303 @@
<!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: Adding A Context Menu To A TreeView (YUI Library)</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 TreeView -->
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
h1 {
font-weight: bold;
margin: 0 0 1em 0;
}
body {
padding: 1em;
}
p, ul {
margin: 1em 0;
}
p em,
#operainstructions li em {
font-weight: bold;
}
#operainstructions {
list-style-type: square;
margin-left: 2em;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/container/container_core.js"></script>
<script type="text/javascript" src="../../build/treeview/treeview.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="../../build/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize the TreeView instance when the "mytreeview" <div>
is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("mytreeview", function () {
/*
Map of YAHOO.widget.TextNode instances in the
TreeView instance.
*/
var oTextNodeMap = {};
// Creates a TextNode instance and appends it to the TreeView
function buildRandomTextBranch(p_oNode) {
var oTextNode,
i;
if (p_oNode.depth < 6) {
for (i = 0; i < Math.floor(Math.random() * 4); i++) {
oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false);
oTextNodeMap[oTextNode.labelElId] = oTextNode;
buildRandomTextBranch(oTextNode);
}
}
}
// Create a TreeView instance
var oTreeView = new YAHOO.widget.TreeView("mytreeview");
var n, oTextNode;
for (n = 0; n < Math.floor((Math.random()*4) + 3); n++) {
oTextNode = new YAHOO.widget.TextNode("label-" + n, oTreeView.getRoot(), false);
/*
Add the TextNode instance to the map, using its
HTML id as the key.
*/
oTextNodeMap[oTextNode.labelElId] = oTextNode;
buildRandomTextBranch(oTextNode);
}
oTreeView.draw();
/*
The YAHOO.widget.TextNode instance whose "contextmenu"
DOM event triggered the display of the
ContextMenu instance.
*/
var oCurrentTextNode = null;
/*
Adds a new TextNode as a child of the TextNode instance
that was the target of the "contextmenu" event that
triggered the display of the ContextMenu instance.
*/
function addNode() {
var sLabel = window.prompt("Enter a label for the new node: ", ""),
oChildNode;
if (sLabel && sLabel.length > 0) {
oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false);
oCurrentTextNode.refresh();
oCurrentTextNode.expand();
oTextNodeMap[oChildNode.labelElId] = oChildNode;
}
}
/*
Edits the label of the TextNode that was the target of the
"contextmenu" event that triggered the display of the
ContextMenu instance.
*/
function editNodeLabel() {
var sLabel = window.prompt("Enter a new label for this node: ", oCurrentTextNode.getLabelEl().innerHTML);
if (sLabel && sLabel.length > 0) {
oCurrentTextNode.getLabelEl().innerHTML = sLabel;
}
}
/*
Deletes the TextNode that was the target of the "contextmenu"
event that triggered the display of the ContextMenu instance.
*/
function deleteNode() {
delete oTextNodeMap[oCurrentTextNode.labelElId];
oTreeView.removeNode(oCurrentTextNode);
oTreeView.draw();
}
/*
"contextmenu" event handler for the element(s) that
triggered the display of the ContextMenu instance - used
to set a reference to the TextNode instance that triggered
the display of the ContextMenu instance.
*/
function onTriggerContextMenu(p_oEvent) {
/*
Returns a TextNode instance that corresponds to the DOM
element whose "contextmenu" event triggered the display
of the ContextMenu instance.
*/
function getTextNodeFromEventTarget(p_oTarget) {
if (p_oTarget.tagName.toUpperCase() == "A" &&
p_oTarget.className == "ygtvlabel") {
return oTextNodeMap[p_oTarget.id];
}
else {
if (p_oTarget.parentNode &&
p_oTarget.parentNode.nodeType == 1) {
return getTextNodeFromEventTarget(p_oTarget.parentNode);
}
}
}
/*
Get the TextNode instance that that triggered the
display of the ContextMenu instance.
*/
var oTextNode = getTextNodeFromEventTarget(this.contextEventTarget);
if (oTextNode) {
oCurrentTextNode = oTextNode;
}
else {
// Cancel the display of the ContextMenu instance.
this.cancel();
}
}
/*
Instantiate a ContextMenu: The first argument passed to
the constructor is the id of the element to be created; the
second is an object literal of configuration properties.
*/
var oContextMenu = new YAHOO.widget.ContextMenu("mytreecontextmenu", {
trigger: "mytreeview",
lazyload: true,
itemdata: [
{ text: "Add Child Node", onclick: { fn: addNode } },
{ text: "Edit Node Label", onclick: { fn: editNodeLabel } },
{ text: "Delete Node", onclick: { fn: deleteNode } }
] });
/*
Subscribe to the "contextmenu" event for the element(s)
specified as the "trigger" for the ContextMenu instance.
*/
oContextMenu.subscribe("triggerContextMenu", onTriggerContextMenu);
});
</script>
</head>
<body class="yui-skin-sam">
<div id="mytreeview"></div>
</body>
</html>