upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
This commit is contained in:
JT Smith
parent
a041e93da8
commit
20f8df1291
2106 changed files with 993560 additions and 237 deletions
355
www/extras/yui/examples/menu/applicationmenubar.html
Normal file
355
www/extras/yui/examples/menu/applicationmenubar.html
Normal file
File diff suppressed because one or more lines are too long
276
www/extras/yui/examples/menu/applicationmenubar_source.html
Normal file
276
www/extras/yui/examples/menu/applicationmenubar_source.html
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
<!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 for each submenu.
|
||||
|
||||
function onSubmenuShow() {
|
||||
|
||||
var oIFrame,
|
||||
oElement,
|
||||
nOffsetWidth;
|
||||
|
||||
|
||||
// Keep the left-most submenu against the left edge of the browser viewport
|
||||
|
||||
if (this.id == "yahoo") {
|
||||
|
||||
YAHOO.util.Dom.setX(this.element, 0);
|
||||
|
||||
oIFrame = this.iframe;
|
||||
|
||||
|
||||
if (oIFrame) {
|
||||
|
||||
YAHOO.util.Dom.setX(oIFrame, 0);
|
||||
|
||||
}
|
||||
|
||||
this.cfg.setProperty("x", 0, true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Need to set the width for submenus of submenus in IE to prevent the mouseout
|
||||
event from firing prematurely when the user mouses off of a MenuItem's
|
||||
text node.
|
||||
*/
|
||||
|
||||
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
BIN
www/extras/yui/examples/menu/assets/dolly.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
www/extras/yui/examples/menu/assets/grass.png
Normal file
BIN
www/extras/yui/examples/menu/assets/grass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
1
www/extras/yui/examples/menu/assets/menuariaplugin-min.js
vendored
Normal file
1
www/extras/yui/examples/menu/assets/menuariaplugin-min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
(function(){var g=YAHOO.util.Event,C=YAHOO.util.Dom,F=YAHOO.lang,O=YAHOO.env.ua,Q=YAHOO.widget.ContextMenu,T=YAHOO.widget.Menu.prototype,W=T.initDefaultConfig,J,L="aria-",I="haspopup",d="role",U="presentation",G="menuitem",V="href",M="submenu",h="menu",e="menubar",E="labelledby",Y="focus",S="blur",B="itemAdded",R="usearia",P="trigger";var c=function(i,j){i.setAttribute(d,j);};var a=function(i,k,j){i.setAttribute((L+k),j);};var Z=function(i){if(i.nodeType===1){a(i,I,true);}};var K=function(i){if(i.nodeType===1){i.removeAttribute(L+I);}};var D=function(j){var i=g.getTarget(j);if(C.isAncestor(this.element,i)){if(J){J.tabIndex=-1;}J=i;J.tabIndex=0;}else{if(J&&this.getItems().length>0){J.tabIndex=-1;J=C.getFirstChild(this.getItem(0).element);J.tabIndex=0;}}};var N=function(m,k){var j=k[0],n=k[1],i=g.getTarget(j),l=g.getCharCode(j);if(n&&l===13){if(O.ie){i.fireEvent("onclick");}else{j=document.createEvent("HTMLEvents");j.initEvent("click",true,true);i.dispatchEvent(j);}}};var b=function(k,j){var i=j[0];if(i){Z(C.getFirstChild(this.element));}};var f=function(k){var i=k.element;c(i.parentNode,U);c(i,U);var j=C.getFirstChild(i);c(j,G);j.tabIndex=-1;j.removeAttribute(V);if(k.cfg.getProperty(M)){Z(j);}else{k.cfg.subscribeToConfigEvent(M,b);}};var H=function(j,i){f(i[0]);};T.configUseARIA=function(r,q){var s=q[0],j=this.parent,l=this.element,u=(this instanceof YAHOO.widget.MenuBar)?e:h,k,p,t,n,m,o;if(s){c(l,u);if(j){m=C.generateId(C.getFirstChild(j.element));a(l,E,m);}k=this.getItems();p=k.length;if(p>0){o=p-1;do{t=k[o];f(t);o=o-1;}while((o>-1));if(this.getRoot()===this){J=C.getFirstChild(this.getItem(0).element);J.tabIndex=0;}}if(this===this.getRoot()){g.onFocus(document,D,null,this);}this.subscribe(B,H);this.subscribe("keypress",N);}};var X={};var A=function(){var j=this.element.id,i=this.cfg.getProperty(P),l=X[j],k;if(l){if(F.isString(l)){k=C.get(l);if(k){K(k);}}else{if(l.nodeType===1){K(l);}else{if(l.length){C.batch(l,K);}}}}if(i){if(F.isString(i)){k=C.get(i);if(k){Z(k);}}else{if(i.nodeType===1){Z(i);}else{if(i.length){C.batch(i,Z);}}}X[j]=i;}};Q.prototype.configUseARIA=function(j,i){Q.superclass.configUseARIA.apply(this,arguments);A.call(this);this.cfg.subscribeToConfigEvent(P,A);};}());
|
||||
352
www/extras/yui/examples/menu/assets/menuariaplugin.js
vendored
Normal file
352
www/extras/yui/examples/menu/assets/menuariaplugin.js
vendored
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
(function () {
|
||||
|
||||
var Event = YAHOO.util.Event,
|
||||
Dom = YAHOO.util.Dom,
|
||||
Lang = YAHOO.lang,
|
||||
UA = YAHOO.env.ua,
|
||||
ContextMenu = YAHOO.widget.ContextMenu,
|
||||
|
||||
MenuPrototype = YAHOO.widget.Menu.prototype,
|
||||
fnMenuInitDefaultConfig = MenuPrototype.initDefaultConfig,
|
||||
|
||||
// The currently focused MenuItem label, or the MenuItem label that can be focused
|
||||
// by the user.
|
||||
|
||||
m_oCurrentItemLabel,
|
||||
|
||||
|
||||
// Private constants for strings
|
||||
|
||||
_ARIA_PREFIX = "aria-",
|
||||
_HAS_POPUP = "haspopup",
|
||||
_ROLE = "role",
|
||||
_PRESENTATION = "presentation",
|
||||
_MENUITEM = "menuitem",
|
||||
_HREF = "href",
|
||||
_SUBMENU = "submenu",
|
||||
_MENU = "menu",
|
||||
_MENUBAR = "menubar",
|
||||
_LABELLED_BY = "labelledby",
|
||||
_FOCUS = "focus",
|
||||
_BLUR = "blur",
|
||||
_ITEM_ADDED = "itemAdded",
|
||||
_USE_ARIA = "usearia",
|
||||
_TRIGGER = "trigger";
|
||||
|
||||
|
||||
// Menu ARIA plugin
|
||||
|
||||
var setARIARole = function (element, role) {
|
||||
|
||||
element.setAttribute(_ROLE, role);
|
||||
|
||||
};
|
||||
|
||||
|
||||
var setARIAProperty = function (element, property, value) {
|
||||
|
||||
element.setAttribute((_ARIA_PREFIX + property), value);
|
||||
|
||||
};
|
||||
|
||||
|
||||
var addHasPopupRole = function (element) {
|
||||
|
||||
if (element.nodeType === 1) {
|
||||
setARIAProperty(element, _HAS_POPUP, true);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var removeHasPopupRole = function (element) {
|
||||
|
||||
if (element.nodeType === 1) {
|
||||
element.removeAttribute(_ARIA_PREFIX + _HAS_POPUP);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var onDocumentFocus = function (event) {
|
||||
|
||||
// The currently focused element
|
||||
|
||||
var oTarget = Event.getTarget(event);
|
||||
|
||||
|
||||
if (Dom.isAncestor(this.element, oTarget)) {
|
||||
|
||||
/*
|
||||
Modify value of the tabIndex attribute so that the currently
|
||||
focused MenuItem label is in the browser's default tab order.
|
||||
*/
|
||||
|
||||
if (m_oCurrentItemLabel) {
|
||||
m_oCurrentItemLabel.tabIndex = -1;
|
||||
}
|
||||
|
||||
m_oCurrentItemLabel = oTarget;
|
||||
m_oCurrentItemLabel.tabIndex = 0;
|
||||
|
||||
}
|
||||
else if (m_oCurrentItemLabel && this.getItems().length > 0) {
|
||||
|
||||
/*
|
||||
If the focus has moved to an element on the page that is not a
|
||||
part of the MenuBar, restore the MenuBar to its original state
|
||||
so that the first item is in the browser's default tab index.
|
||||
*/
|
||||
|
||||
m_oCurrentItemLabel.tabIndex = -1;
|
||||
|
||||
m_oCurrentItemLabel = Dom.getFirstChild(this.getItem(0).element);
|
||||
m_oCurrentItemLabel.tabIndex = 0;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var onKeyPress = function (type, args) {
|
||||
|
||||
var oEvent = args[0],
|
||||
oMenuItem = args[1],
|
||||
oTarget = Event.getTarget(oEvent),
|
||||
nCharCode = Event.getCharCode(oEvent);
|
||||
|
||||
|
||||
if (oMenuItem && nCharCode === 13) {
|
||||
|
||||
if (UA.ie) {
|
||||
oTarget.fireEvent("onclick");
|
||||
}
|
||||
else {
|
||||
|
||||
oEvent = document.createEvent("HTMLEvents");
|
||||
oEvent.initEvent("click", true, true);
|
||||
|
||||
oTarget.dispatchEvent(oEvent);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var onConfigSubmenu = function (type, args) {
|
||||
|
||||
var oSubmenu = args[0];
|
||||
|
||||
if (oSubmenu) {
|
||||
addHasPopupRole(Dom.getFirstChild(this.element));
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var addMenuItemRole = function (menuitem) {
|
||||
|
||||
var oMenuItemEl = menuitem.element;
|
||||
|
||||
// For NVDA: add the role of "presentation" to reach LI and UL
|
||||
// element to prevent NVDA from announcing the "list" role
|
||||
// as well as the menu-related roles.
|
||||
|
||||
setARIARole(oMenuItemEl.parentNode, _PRESENTATION);
|
||||
setARIARole(oMenuItemEl, _PRESENTATION);
|
||||
|
||||
|
||||
// Retrieve a reference to the anchor element that serves as the
|
||||
// label for each MenuItem.
|
||||
|
||||
var oMenuItemLabel = Dom.getFirstChild(oMenuItemEl);
|
||||
|
||||
|
||||
// Set the "role" attribute of the label to "menuitem"
|
||||
|
||||
setARIARole(oMenuItemLabel, _MENUITEM);
|
||||
|
||||
|
||||
// Remove the label from the browser's default tab order
|
||||
|
||||
oMenuItemLabel.tabIndex = -1;
|
||||
|
||||
|
||||
// JAWS & NVDA announce the value of each anchor
|
||||
// element's "href" attribute when it recieves focus, so remove
|
||||
// the attribute so that its value isn't announced.
|
||||
|
||||
oMenuItemLabel.removeAttribute(_HREF);
|
||||
|
||||
|
||||
// If the MenuItem has a submenu, set the "aria-haspopup"
|
||||
// attribute to true so that the screen reader can announce
|
||||
|
||||
if (menuitem.cfg.getProperty(_SUBMENU)) {
|
||||
addHasPopupRole(oMenuItemLabel);
|
||||
}
|
||||
else {
|
||||
menuitem.cfg.subscribeToConfigEvent(_SUBMENU, onConfigSubmenu);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
var onItemAdded = function (type, args) {
|
||||
|
||||
addMenuItemRole(args[0]);
|
||||
|
||||
};
|
||||
|
||||
|
||||
MenuPrototype.configUseARIA = function (type, args) {
|
||||
|
||||
var bUseARIA = args[0],
|
||||
oParent = this.parent,
|
||||
oElement = this.element,
|
||||
sMenuRole = (this instanceof YAHOO.widget.MenuBar) ? _MENUBAR : _MENU,
|
||||
aMenuItems,
|
||||
nMenuItems,
|
||||
oMenuItem,
|
||||
oMenuItemLabel,
|
||||
sId,
|
||||
i;
|
||||
|
||||
|
||||
if (bUseARIA) {
|
||||
|
||||
// Apply the "role" attribute of "menu" or "menubar" depending on the
|
||||
// type of the Menu control being rendered.
|
||||
|
||||
setARIARole(oElement, sMenuRole);
|
||||
|
||||
|
||||
|
||||
// Use the "aria-labelledby" attribute to label each submenu. This
|
||||
// will provide the user with the name of the submenu the first time
|
||||
// one of its items receives focus.
|
||||
|
||||
if (oParent) {
|
||||
|
||||
sId = Dom.generateId(Dom.getFirstChild(oParent.element));
|
||||
|
||||
setARIAProperty(oElement, _LABELLED_BY, sId);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Apply the appropriate "role" and "aria-[state]" attributes to the
|
||||
// label of each MenuItem instance.
|
||||
|
||||
aMenuItems = this.getItems();
|
||||
nMenuItems = aMenuItems.length;
|
||||
|
||||
if (nMenuItems > 0) {
|
||||
|
||||
i = nMenuItems - 1;
|
||||
|
||||
|
||||
do {
|
||||
oMenuItem = aMenuItems[i];
|
||||
addMenuItemRole(oMenuItem);
|
||||
i = i - 1;
|
||||
}
|
||||
while ((i > -1));
|
||||
|
||||
|
||||
// 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) {
|
||||
m_oCurrentItemLabel = Dom.getFirstChild(this.getItem(0).element);
|
||||
m_oCurrentItemLabel.tabIndex = 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (this === this.getRoot()) {
|
||||
Event.onFocus(document, onDocumentFocus, null, this);
|
||||
}
|
||||
|
||||
|
||||
this.subscribe(_ITEM_ADDED, onItemAdded);
|
||||
this.subscribe("keypress", onKeyPress);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
// ContextMenu ARIA plugin
|
||||
|
||||
var m_oTriggers = {};
|
||||
|
||||
var toggleARIAForTrigger = function () {
|
||||
|
||||
var sMenuId = this.element.id,
|
||||
oTrigger = this.cfg.getProperty(_TRIGGER),
|
||||
oCurrentTrigger = m_oTriggers[sMenuId],
|
||||
oElement;
|
||||
|
||||
|
||||
if (oCurrentTrigger) {
|
||||
|
||||
if (Lang.isString(oCurrentTrigger)) { // String id
|
||||
|
||||
oElement = Dom.get(oCurrentTrigger);
|
||||
|
||||
if (oElement) {
|
||||
removeHasPopupRole(oElement);
|
||||
}
|
||||
|
||||
}
|
||||
else if (oCurrentTrigger.nodeType === 1) { // Element reference
|
||||
removeHasPopupRole(oCurrentTrigger);
|
||||
}
|
||||
else if (oCurrentTrigger.length) { // NodeList or Array
|
||||
Dom.batch(oCurrentTrigger, removeHasPopupRole);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (oTrigger) {
|
||||
|
||||
if (Lang.isString(oTrigger)) { // String id
|
||||
|
||||
oElement = Dom.get(oTrigger);
|
||||
|
||||
if (oElement) {
|
||||
addHasPopupRole(oElement);
|
||||
}
|
||||
|
||||
}
|
||||
else if (oTrigger.nodeType === 1) { // Element reference
|
||||
addHasPopupRole(oTrigger);
|
||||
}
|
||||
else if (oTrigger.length) { // NodeList or Array
|
||||
Dom.batch(oTrigger, addHasPopupRole);
|
||||
}
|
||||
|
||||
m_oTriggers[sMenuId] = oTrigger;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
ContextMenu.prototype.configUseARIA = function (type, args) {
|
||||
|
||||
ContextMenu.superclass.configUseARIA.apply(this, arguments);
|
||||
|
||||
toggleARIAForTrigger.call(this);
|
||||
|
||||
this.cfg.subscribeToConfigEvent(_TRIGGER, toggleARIAForTrigger);
|
||||
|
||||
};
|
||||
|
||||
}());
|
||||
490
www/extras/yui/examples/menu/contextmenu.html
Normal file
490
www/extras/yui/examples/menu/contextmenu.html
Normal file
File diff suppressed because one or more lines are too long
413
www/extras/yui/examples/menu/contextmenu_source.html
Normal file
413
www/extras/yui/examples/menu/contextmenu_source.html
Normal file
|
|
@ -0,0 +1,413 @@
|
|||
<!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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "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
|
||||
oTarget = this.contextEventTarget,
|
||||
oLI;
|
||||
|
||||
|
||||
if (oItem) {
|
||||
|
||||
oLI = oTarget.nodeName.toUpperCase() == "LI" ?
|
||||
oTarget : YAHOO.util.Dom.getAncestorByTagName(oTarget, "LI");
|
||||
|
||||
|
||||
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>
|
||||
291
www/extras/yui/examples/menu/example01.html
Normal file
291
www/extras/yui/examples/menu/example01.html
Normal file
File diff suppressed because one or more lines are too long
127
www/extras/yui/examples/menu/example01_clean.html
Normal file
127
www/extras/yui/examples/menu/example01_clean.html
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<!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();
|
||||
|
||||
|
||||
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>
|
||||
270
www/extras/yui/examples/menu/example02.html
Normal file
270
www/extras/yui/examples/menu/example02.html
Normal file
File diff suppressed because one or more lines are too long
122
www/extras/yui/examples/menu/example02_clean.html
Normal file
122
www/extras/yui/examples/menu/example02_clean.html
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<!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");
|
||||
|
||||
|
||||
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>
|
||||
345
www/extras/yui/examples/menu/example03.html
Normal file
345
www/extras/yui/examples/menu/example03.html
Normal file
File diff suppressed because one or more lines are too long
133
www/extras/yui/examples/menu/example03_clean.html
Normal file
133
www/extras/yui/examples/menu/example03_clean.html
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<!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();
|
||||
|
||||
|
||||
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>
|
||||
309
www/extras/yui/examples/menu/example04.html
Normal file
309
www/extras/yui/examples/menu/example04.html
Normal file
File diff suppressed because one or more lines are too long
137
www/extras/yui/examples/menu/example04_clean.html
Normal file
137
www/extras/yui/examples/menu/example04_clean.html
Normal 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 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");
|
||||
|
||||
|
||||
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>
|
||||
356
www/extras/yui/examples/menu/example05.html
Normal file
356
www/extras/yui/examples/menu/example05.html
Normal file
File diff suppressed because one or more lines are too long
136
www/extras/yui/examples/menu/example05_clean.html
Normal file
136
www/extras/yui/examples/menu/example05_clean.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
<!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();
|
||||
|
||||
|
||||
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>
|
||||
326
www/extras/yui/examples/menu/example06.html
Normal file
326
www/extras/yui/examples/menu/example06.html
Normal file
File diff suppressed because one or more lines are too long
145
www/extras/yui/examples/menu/example06_clean.html
Normal file
145
www/extras/yui/examples/menu/example06_clean.html
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!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");
|
||||
|
||||
|
||||
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>
|
||||
443
www/extras/yui/examples/menu/example07.html
Normal file
443
www/extras/yui/examples/menu/example07.html
Normal file
File diff suppressed because one or more lines are too long
216
www/extras/yui/examples/menu/example07_clean.html
Normal file
216
www/extras/yui/examples/menu/example07_clean.html
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<!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();
|
||||
|
||||
|
||||
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°</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 & 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 & 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>
|
||||
484
www/extras/yui/examples/menu/example08.html
Normal file
484
www/extras/yui/examples/menu/example08.html
Normal file
File diff suppressed because one or more lines are too long
225
www/extras/yui/examples/menu/example08_clean.html
Normal file
225
www/extras/yui/examples/menu/example08_clean.html
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
<!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");
|
||||
|
||||
|
||||
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/example09.html
Normal file
355
www/extras/yui/examples/menu/example09.html
Normal file
File diff suppressed because one or more lines are too long
164
www/extras/yui/examples/menu/example09_clean.html
Normal file
164
www/extras/yui/examples/menu/example09_clean.html
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!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");
|
||||
|
||||
|
||||
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>
|
||||
446
www/extras/yui/examples/menu/example10.html
Normal file
446
www/extras/yui/examples/menu/example10.html
Normal file
File diff suppressed because one or more lines are too long
213
www/extras/yui/examples/menu/example10_clean.html
Normal file
213
www/extras/yui/examples/menu/example10_clean.html
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<!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");
|
||||
|
||||
|
||||
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>
|
||||
284
www/extras/yui/examples/menu/example11.html
Normal file
284
www/extras/yui/examples/menu/example11.html
Normal file
File diff suppressed because one or more lines are too long
139
www/extras/yui/examples/menu/example11_clean.html
Normal file
139
www/extras/yui/examples/menu/example11_clean.html
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
<!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");
|
||||
|
||||
|
||||
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>
|
||||
386
www/extras/yui/examples/menu/example12.html
Normal file
386
www/extras/yui/examples/menu/example12.html
Normal file
File diff suppressed because one or more lines are too long
183
www/extras/yui/examples/menu/example12_clean.html
Normal file
183
www/extras/yui/examples/menu/example12_clean.html
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
<!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);
|
||||
|
||||
|
||||
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>
|
||||
95
www/extras/yui/examples/menu/index.html
Normal file
95
www/extras/yui/examples/menu/index.html
Normal file
File diff suppressed because one or more lines are too long
326
www/extras/yui/examples/menu/leftnavfromjs.html
Normal file
326
www/extras/yui/examples/menu/leftnavfromjs.html
Normal file
File diff suppressed because one or more lines are too long
283
www/extras/yui/examples/menu/leftnavfromjs_source.html
Normal file
283
www/extras/yui/examples/menu/leftnavfromjs_source.html
Normal 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>
|
||||
341
www/extras/yui/examples/menu/leftnavfromjswithanim.html
Normal file
341
www/extras/yui/examples/menu/leftnavfromjswithanim.html
Normal file
File diff suppressed because one or more lines are too long
283
www/extras/yui/examples/menu/leftnavfromjswithanim_source.html
Normal file
283
www/extras/yui/examples/menu/leftnavfromjswithanim_source.html
Normal 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>
|
||||
200
www/extras/yui/examples/menu/leftnavfrommarkup.html
Normal file
200
www/extras/yui/examples/menu/leftnavfrommarkup.html
Normal file
File diff suppressed because one or more lines are too long
262
www/extras/yui/examples/menu/leftnavfrommarkup_source.html
Normal file
262
www/extras/yui/examples/menu/leftnavfrommarkup_source.html
Normal 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°</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 & 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 & 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>
|
||||
211
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html
Normal file
211
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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°</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 & 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 & 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>
|
||||
218
www/extras/yui/examples/menu/menuwaiaria.html
Normal file
218
www/extras/yui/examples/menu/menuwaiaria.html
Normal file
File diff suppressed because one or more lines are too long
226
www/extras/yui/examples/menu/menuwaiaria_source.html
Normal file
226
www/extras/yui/examples/menu/menuwaiaria_source.html
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Menu: Using The Menu ARIA Plugin</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">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
/*
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
The Menu ARIA Plugin removes the "href" attribute from the <A> element of each
|
||||
MenuItem if the value of the "href" is set to "#", resulting in the focus outline
|
||||
no longer be rendered in Gecko-based browsers when the <A> element is focused.
|
||||
For this reason, it is necessary to restore the focus outline for the <A>.
|
||||
*/
|
||||
a[role=menuitem]:focus {
|
||||
|
||||
outline: dotted 1px #000;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
<script type="text/javascript" src="../container/assets/containerariaplugin.js"></script>
|
||||
<script type="text/javascript" src="../menu/assets/menuariaplugin.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var Event = YAHOO.util.Event,
|
||||
Dom = YAHOO.util.Dom,
|
||||
UA = YAHOO.env.ua,
|
||||
|
||||
|
||||
/*
|
||||
Define an array of object literals, each containing
|
||||
the data necessary to create the items for a MenuBar.
|
||||
*/
|
||||
|
||||
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" }
|
||||
]
|
||||
|
||||
] }
|
||||
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
|
||||
/*
|
||||
Initialize and render the MenuBar when the page's DOM is ready
|
||||
to be scripted.
|
||||
*/
|
||||
|
||||
Event.onDOMReady(function () {
|
||||
|
||||
/*
|
||||
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() {
|
||||
|
||||
var oIFrame;
|
||||
|
||||
|
||||
if (this.id == "filemenu") {
|
||||
|
||||
Dom.setX(this.element, 0);
|
||||
|
||||
oIFrame = this.iframe;
|
||||
|
||||
|
||||
if (oIFrame) {
|
||||
|
||||
Dom.setX(oIFrame, 0);
|
||||
|
||||
}
|
||||
|
||||
this.cfg.setProperty("x", 0, true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Need to set the width for submenus of submenus in IE to prevent the mouseout
|
||||
event from firing prematurely when the user mouses off of a MenuItem's
|
||||
text node.
|
||||
*/
|
||||
|
||||
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);
|
||||
|
||||
|
||||
/*
|
||||
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>
|
||||
430
www/extras/yui/examples/menu/programsmenu.html
Normal file
430
www/extras/yui/examples/menu/programsmenu.html
Normal file
File diff suppressed because one or more lines are too long
384
www/extras/yui/examples/menu/programsmenu_source.html
Normal file
384
www/extras/yui/examples/menu/programsmenu_source.html
Normal 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>
|
||||
369
www/extras/yui/examples/menu/tablecontextmenu.html
Normal file
369
www/extras/yui/examples/menu/tablecontextmenu.html
Normal file
File diff suppressed because one or more lines are too long
421
www/extras/yui/examples/menu/tablecontextmenu_source.html
Normal file
421
www/extras/yui/examples/menu/tablecontextmenu_source.html
Normal file
|
|
@ -0,0 +1,421 @@
|
|||
<!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">
|
||||
|
||||
/*
|
||||
Initialize the ContextMenu instance when the the elements
|
||||
that trigger their display are ready to be scripted.
|
||||
*/
|
||||
|
||||
YAHOO.util.Event.onContentReady("dataset", function () {
|
||||
|
||||
var Dom = YAHOO.util.Dom;
|
||||
|
||||
/*
|
||||
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"
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
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 oTarget = this.contextEventTarget,
|
||||
aMenuItems,
|
||||
aClasses;
|
||||
|
||||
|
||||
if (this.getRoot() == this) {
|
||||
|
||||
/*
|
||||
Get the <tr> that was the target of the
|
||||
"contextmenu" event.
|
||||
*/
|
||||
|
||||
oSelectedTR = oTarget.nodeName.toUpperCase() == "TR" ?
|
||||
oTarget : Dom.getAncestorByTagName(oTarget, "TR");
|
||||
|
||||
|
||||
/*
|
||||
Get the array of MenuItems for the CSS class name from
|
||||
the "oContextMenuItems" map.
|
||||
*/
|
||||
|
||||
if (Dom.hasClass(oSelectedTR, "odd")) {
|
||||
|
||||
aClasses = oSelectedTR.className.split(" ");
|
||||
|
||||
aMenuItems = oContextMenuItems[aClasses[0]];
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
aMenuItems = oContextMenuItems[YAHOO.lang.trim(oSelectedTR.className)];
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 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.
|
||||
*/
|
||||
|
||||
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) {
|
||||
|
||||
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><table></code> or large list (<code><ol></code>
|
||||
or <code><ul></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><tr></code>s or <code><li></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 (⌘) 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>
|
||||
324
www/extras/yui/examples/menu/topnavfromjs.html
Normal file
324
www/extras/yui/examples/menu/topnavfromjs.html
Normal file
File diff suppressed because one or more lines are too long
277
www/extras/yui/examples/menu/topnavfromjs_source.html
Normal file
277
www/extras/yui/examples/menu/topnavfromjs_source.html
Normal 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>
|
||||
615
www/extras/yui/examples/menu/topnavfromjswithanim.html
Normal file
615
www/extras/yui/examples/menu/topnavfromjswithanim.html
Normal file
File diff suppressed because one or more lines are too long
545
www/extras/yui/examples/menu/topnavfromjswithanim_source.html
Normal file
545
www/extras/yui/examples/menu/topnavfromjswithanim_source.html
Normal 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 and Opera 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 || ua.opera) {
|
||||
|
||||
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 || ua.opera) {
|
||||
|
||||
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>
|
||||
200
www/extras/yui/examples/menu/topnavfrommarkup.html
Normal file
200
www/extras/yui/examples/menu/topnavfrommarkup.html
Normal file
File diff suppressed because one or more lines are too long
254
www/extras/yui/examples/menu/topnavfrommarkup_source.html
Normal file
254
www/extras/yui/examples/menu/topnavfrommarkup_source.html
Normal 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°</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 & 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">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 & 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>
|
||||
473
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html
Normal file
473
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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 and Opera 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 || ua.opera) {
|
||||
|
||||
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 || ua.opera) {
|
||||
|
||||
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°</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 & 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 & 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>
|
||||
371
www/extras/yui/examples/menu/treeviewcontextmenu.html
Normal file
371
www/extras/yui/examples/menu/treeviewcontextmenu.html
Normal file
File diff suppressed because one or more lines are too long
277
www/extras/yui/examples/menu/treeviewcontextmenu_source.html
Normal file
277
www/extras/yui/examples/menu/treeviewcontextmenu_source.html
Normal 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: 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) {
|
||||
|
||||
var oTarget = this.contextEventTarget,
|
||||
Dom = YAHOO.util.Dom;
|
||||
|
||||
/*
|
||||
Get the TextNode instance that that triggered the
|
||||
display of the ContextMenu instance.
|
||||
*/
|
||||
|
||||
var oTextNode = Dom.hasClass(oTarget, "ygtvlabel") ?
|
||||
oTarget : Dom.getAncestorByClassName(oTarget, "ygtvlabel");
|
||||
|
||||
if (oTextNode) {
|
||||
|
||||
oCurrentTextNode = oTextNodeMap[oTarget.id];
|
||||
|
||||
}
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue