upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
231
www/extras/yui/examples/menu/applicationmenubar.html
Normal file
231
www/extras/yui/examples/menu/applicationmenubar.html
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
<!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/container.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
|
||||
background-color:#dfb8df;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for each menu bar */
|
||||
|
||||
div#mymenubar.yuimenubar {
|
||||
|
||||
background:url(img/menubar_background.gif) left center;
|
||||
border:0px solid #ccc;
|
||||
border-bottom-width:1px;
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar.yuimenubar li.yuimenubaritem {
|
||||
|
||||
padding:4px 10px;
|
||||
border:none;
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar.yuimenubar li.yuimenubaritem.first-of-type a {
|
||||
|
||||
text-indent:-6em;
|
||||
background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
|
||||
width:2em;
|
||||
float:left;
|
||||
overflow:hidden;
|
||||
_margin-right:1em; /* IE 6 only */
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar.yuimenubar div#yahoo.yuimenu li.yuimenuitem a {
|
||||
|
||||
float:none;
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar.yuimenubar .yuimenu {
|
||||
|
||||
background:#edebeb;
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar.yuimenubar .yuimenu li.yuimenuitem a {
|
||||
|
||||
text-indent:0;
|
||||
background:none;
|
||||
width:auto;
|
||||
overflow:visible;
|
||||
_margin-right:auto; /* IE 6 only */
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar.yuimenubar li em.submenuindicator {
|
||||
|
||||
height:1px;
|
||||
width:1px;
|
||||
margin:0;
|
||||
|
||||
}
|
||||
|
||||
div#mymenubar div.yuimenu li em.submenuindicator {
|
||||
|
||||
height:8px;
|
||||
width:8px;
|
||||
margin:0 -16px 0 10px;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
var aItemData = [
|
||||
|
||||
{ text: "Yahoo!", 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",
|
||||
|
||||
{ text:"Examples Home", url:"index.html" }
|
||||
|
||||
];
|
||||
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", { lazyload: true, itemdata:aItemData });
|
||||
|
||||
|
||||
// Render the MenuBar instance and corresponding submenus
|
||||
|
||||
oMenuBar.render(document.body);
|
||||
|
||||
|
||||
var oPanel = new YAHOO.widget.SimpleDialog(
|
||||
"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);
|
||||
|
||||
oPanel.show();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Add a "load" handler for the window
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
518
www/extras/yui/examples/menu/contextmenu.html
Normal file
518
www/extras/yui/examples/menu/contextmenu.html
Normal file
|
|
@ -0,0 +1,518 @@
|
|||
<!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/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;
|
||||
|
||||
}
|
||||
|
||||
h1 em,
|
||||
p em,
|
||||
#operainstructions li em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
#operainstructions {
|
||||
|
||||
list-style-type:square;
|
||||
margin-left:2em;
|
||||
|
||||
}
|
||||
|
||||
#clones {
|
||||
|
||||
background:#99cc66 url(img/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">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
|
||||
var oClones = document.getElementById("clones");
|
||||
|
||||
// Clone the first ewe so that we can create more later
|
||||
|
||||
var oLI = oClones.getElementsByTagName("li")[0];
|
||||
var oClone = 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) {
|
||||
|
||||
p_oMenu.cfg.setProperty("trigger", null);
|
||||
|
||||
var oClone = p_oLI.cloneNode(true);
|
||||
|
||||
p_oLI.parentNode.appendChild(oClone);
|
||||
|
||||
p_oMenu.cfg.setProperty("trigger", oClones.childNodes);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Deletes an "Ewe"
|
||||
|
||||
function DeleteEwe(p_oLI) {
|
||||
|
||||
var oUL = p_oLI.parentNode;
|
||||
|
||||
oUL.removeChild(p_oLI);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Returns the LI instance that is the parent node of the target
|
||||
of a "contextmenu" event
|
||||
*/
|
||||
|
||||
function GetListItemFromEventTarget(p_oNode) {
|
||||
|
||||
if(p_oNode.tagName.toUpperCase() == "LI") {
|
||||
|
||||
return p_oNode;
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
/*
|
||||
If the target of the event was a child of an LI,
|
||||
get the parent LI element
|
||||
*/
|
||||
|
||||
do {
|
||||
|
||||
if(p_oNode.tagName.toUpperCase() == "LI") {
|
||||
|
||||
return p_oNode;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
while((p_oNode = p_oNode.parentNode));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for each item in the ewe context menu
|
||||
|
||||
function onEweContextMenuClick(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
var oItem = p_aArgs[1];
|
||||
|
||||
if(oItem) {
|
||||
|
||||
var oLI = GetListItemFromEventTarget(this.contextEventTarget);
|
||||
|
||||
switch(oItem.index) {
|
||||
|
||||
case 0: // Edit name
|
||||
|
||||
EditEweName(oLI);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case 1: // Clone
|
||||
|
||||
CloneEwe(oLI, this);
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case 2: // Delete
|
||||
|
||||
DeleteEwe(oLI);
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "keydown" event handler for the ewe context menu
|
||||
|
||||
function onEweContextMenuKeyDown(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
var oDOMEvent = p_aArgs[0];
|
||||
|
||||
if(oDOMEvent.shiftKey) {
|
||||
|
||||
var oLI = GetListItemFromEventTarget(this.contextEventTarget);
|
||||
|
||||
switch(oDOMEvent.keyCode) {
|
||||
|
||||
case 69: // Edit name
|
||||
|
||||
EditEweName(oLI);
|
||||
|
||||
this.hide();
|
||||
|
||||
break;
|
||||
|
||||
case 67: // Clone
|
||||
|
||||
CloneEwe(oLI, this);
|
||||
|
||||
this.hide();
|
||||
|
||||
break;
|
||||
|
||||
case 68: // Delete
|
||||
|
||||
DeleteEwe(oLI);
|
||||
|
||||
this.hide();
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the ewe context menu
|
||||
|
||||
function onContextMenuRender(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Add a "click" event handler to the ewe context menu
|
||||
|
||||
this.clickEvent.subscribe(onEweContextMenuClick, oEweContextMenu, true);
|
||||
|
||||
|
||||
// Add a "keydown" event handler to the ewe context menu
|
||||
|
||||
this.keyDownEvent.subscribe(onEweContextMenuKeyDown,oEweContextMenu,true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for the field context menu
|
||||
|
||||
function onFieldMenuClick(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Get a reference to the item in the menu that was clicked
|
||||
|
||||
var oItem = p_aArgs[1];
|
||||
|
||||
|
||||
if(oItem) {
|
||||
|
||||
switch(oItem.index) {
|
||||
|
||||
case 1:
|
||||
|
||||
oClones.innerHTML = "";
|
||||
|
||||
oEweContextMenu.cfg.setProperty("target", null);
|
||||
|
||||
oItem.cfg.setProperty("disabled", true);
|
||||
|
||||
break;
|
||||
|
||||
case 2:
|
||||
|
||||
var oLI = this.clone.cloneNode(true);
|
||||
|
||||
oClones.appendChild(oLI);
|
||||
|
||||
this.getItem(1).cfg.setProperty("disabled", false);
|
||||
|
||||
oEweContextMenu.cfg.setProperty("trigger", oClones.childNodes);
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for the field colors submenu
|
||||
|
||||
function onFieldColorsClick(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Get a reference to the item in the menu that was clicked
|
||||
|
||||
var oItem = p_aArgs[1];
|
||||
|
||||
|
||||
if(oItem && this.checkedItem != oItem) {
|
||||
|
||||
YAHOO.util.Dom.setStyle("clones", "backgroundColor", oItem.value);
|
||||
|
||||
oItem.cfg.setProperty("checked", true);
|
||||
|
||||
|
||||
this.checkedItem.cfg.setProperty("checked", false);
|
||||
|
||||
this.checkedItem = oItem;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the field colors submenu
|
||||
|
||||
function onFieldColorsRender(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
this.checkedItem = this.getItem(0);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the field context menu
|
||||
|
||||
function onFieldMenuRender(p_sType, p_aArgs, p_oMenu) {
|
||||
|
||||
// Get a reference to the field colors submenu
|
||||
|
||||
var oFieldColors = this.getItem(0).cfg.getProperty("submenu");
|
||||
|
||||
|
||||
// Add a "render" event handler to the field colors submenu
|
||||
|
||||
oFieldColors.renderEvent.subscribe(onFieldColorsRender, oFieldColors, true);
|
||||
|
||||
|
||||
// Add a "render" event handler to the field colors submenu
|
||||
|
||||
oFieldColors.clickEvent.subscribe(onFieldColorsClick, oFieldColors, true);
|
||||
|
||||
|
||||
// Add a "click" event handler to the field context menu
|
||||
|
||||
this.clickEvent.subscribe(onFieldMenuClick, this, true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Define the items for the ewe context menu
|
||||
|
||||
var aMenuItems = [
|
||||
{ text: "Edit Name", helptext: "Shift + E" },
|
||||
{ text: "Clone", helptext: "Shift + C" },
|
||||
{ text: "Delete", helptext: "Shift + D" }
|
||||
];
|
||||
|
||||
|
||||
// Create the ewe context menu
|
||||
|
||||
var oEweContextMenu = new YAHOO.widget.ContextMenu(
|
||||
"ewecontextmenu",
|
||||
{
|
||||
trigger: oClones.childNodes,
|
||||
itemdata: aMenuItems,
|
||||
lazyload: true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.25
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// Add a "render" event handler to the ewe context menu
|
||||
|
||||
oEweContextMenu.renderEvent.subscribe(onContextMenuRender, oEweContextMenu, true);
|
||||
|
||||
|
||||
// Define the items for the field context menu
|
||||
|
||||
var oFieldContextMenuItemData = [
|
||||
|
||||
{
|
||||
text:"Field color",
|
||||
submenu: { id:"fieldcolors", itemdata: [
|
||||
{ text:"Light Green", value:"#99cc66", checked: true },
|
||||
{ text:"Medium Green", value:"#669933" },
|
||||
{ text:"Dark Green", value:"#336600" }
|
||||
] }
|
||||
},
|
||||
"Delete all",
|
||||
"New Ewe"
|
||||
|
||||
];
|
||||
|
||||
|
||||
// Create a context menu for the field the ewes live in
|
||||
|
||||
var oFieldContextMenu = new YAHOO.widget.ContextMenu(
|
||||
"fieldcontextmenu",
|
||||
{
|
||||
trigger: "clones",
|
||||
itemdata: oFieldContextMenuItemData,
|
||||
lazyload: true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.1
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
oFieldContextMenu.clone = oClone;
|
||||
|
||||
|
||||
// Add a "render" event handler to the field context menu
|
||||
|
||||
oFieldContextMenu.renderEvent.subscribe(onFieldMenuRender, oFieldContextMenu, true);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Assign a "load" event handler to the window
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Context Menu (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
|
||||
<p>This example features two context menus. There is one for each ewe that is created and one for the green field that the ewes graze in. You can use the ewe context menu to rename, clone or delete Dolly. The field's context menu allows you to delete all the ewes from the field, add a new ewe and modify the color of the grass.</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>
|
||||
|
||||
<ul id="clones">
|
||||
<li><a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29"><img src="img/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>
|
||||
111
www/extras/yui/examples/menu/example01.html
Normal file
111
www/extras/yui/examples/menu/example01.html
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<!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: Basic Menu From Markup (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onContentReady("basicmenu", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Basic Menu From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to create a basic menu using existing markup on the page. The Menu API also supports building a menu like this <a href="example02.html">using nothing but JavaScript</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="basicmenu" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
102
www/extras/yui/examples/menu/example02.html
Normal file
102
www/extras/yui/examples/menu/example02.html
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!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: Basic Menu From JavaScript (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
|
||||
|
||||
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" }
|
||||
|
||||
]);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Basic Menu From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to create a basic menu using nothing but JavaScript. The Menu API also supports building a menu like this <a href="example01.html">using existing markup</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
www/extras/yui/examples/menu/example03.html
Normal file
123
www/extras/yui/examples/menu/example03.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!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: Grouped Menu Items Using Markup (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onContentReady("menuwithgroups", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items Using Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to group MenuItem instances. The Menu API also supports building a menu like this <a href="example04.html">using nothing but JavaScript</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="menuwithgroups" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Yahoo! Maps</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Yahoo! Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Yahoo! Shopping</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Yahoo! Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
121
www/extras/yui/examples/menu/example04.html
Normal file
121
www/extras/yui/examples/menu/example04.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!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: Grouped Menu Items Using JavaScript (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
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:"Yahoo! Photos", url:"http://photos.yahoo.com" }
|
||||
|
||||
]
|
||||
|
||||
]);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items Using JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to group MenuItem instances. The Menu API also supports building a menu like this <a href="example03.html">using existing markup</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
126
www/extras/yui/examples/menu/example05.html
Normal file
126
www/extras/yui/examples/menu/example05.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd"><html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Grouped Menu Items With Titles From Markup (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
oMenu.render();
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onContentReady("menuwithgroups", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items With Titles From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to title groups of MenuItem instances. The Menu API also supports building a menu like this <a href="example06.html">using nothing but JavaScript</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">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 href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
<h6>Yahoo! Search</h6>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Yahoo! Maps</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Yahoo! Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Yahoo! Shopping</a></li>
|
||||
</ul>
|
||||
<h6>Yahoo! Communications</h6>
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Yahoo! Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
126
www/extras/yui/examples/menu/example06.html
Normal file
126
www/extras/yui/examples/menu/example06.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd"><html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Grouped Menu Items With Titles From JavaScript (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
|
||||
|
||||
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:"Yahoo! Photos", url:"http://photos.yahoo.com" }
|
||||
|
||||
]
|
||||
|
||||
]);
|
||||
|
||||
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
|
||||
oMenu.setItemGroupTitle("Yahoo! Search", 1);
|
||||
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Grouped Menu Items With Titles From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to title groups of MenuItem instances. The Menu API also supports building a menu like this <a href="example05.html">using existing markup</a>.</p>
|
||||
<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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
197
www/extras/yui/examples/menu/example07.html
Normal file
197
www/extras/yui/examples/menu/example07.html
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
<!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: Multi-tiered Menu From Markup (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
position:absolute;
|
||||
visibility:hidden;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
// Instantiate and render the menu bar and corresponding submenus
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter:true, visible:true });
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.render();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Multi-tiered Menu From Markup (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to create a multi-tiered menu using existing markup on the page. The Menu API also supports building a menu like this <a href="example08.html">using nothing but JavaScript</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
<div id="productsandservices" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a href="http://weather.yahoo.com">Weather</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
163
www/extras/yui/examples/menu/example08.html
Normal file
163
www/extras/yui/examples/menu/example08.html
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!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: Multi-tiered Menu From JavaScript (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
var aItems = [
|
||||
|
||||
{ text: "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", 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: "Photos", url: "http://photos.yahoo.com" },
|
||||
|
||||
] } },
|
||||
|
||||
{ text: "Shopping", 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: "Points", url: "http://points.yahoo.com" },
|
||||
{ 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", 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", 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" }
|
||||
|
||||
] } }
|
||||
|
||||
];
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
|
||||
|
||||
oMenu.addItems(aItems);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Multi-tiered Menu From JavaScript (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to create a multi-tiered menu using nothing but JavaScript. The Menu API also supports building a menu like this <a href="example07.html">using existing markup</a>.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
190
www/extras/yui/examples/menu/example09.html
Normal file
190
www/extras/yui/examples/menu/example09.html
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<!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: Handling Menu Click Events (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">
|
||||
|
||||
|
||||
|
||||
<!-- Logger CSS -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
#logs {
|
||||
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
|
||||
}
|
||||
|
||||
.example9 {
|
||||
|
||||
background-color:#9c9;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
<!-- Logger source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
// "click" event handler for the menu
|
||||
|
||||
function onMenuClick(p_sType, p_aArgs, p_oValue) {
|
||||
|
||||
this.show();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "click" event handler for each menu item
|
||||
|
||||
function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
|
||||
|
||||
YAHOO.log(
|
||||
(
|
||||
"index: " + this.index +
|
||||
", text: " + this.cfg.getProperty("text") +
|
||||
", value:" + p_oValue
|
||||
),
|
||||
"info",
|
||||
"example9"
|
||||
);
|
||||
|
||||
this.parent.show();
|
||||
|
||||
}
|
||||
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("mymenu");
|
||||
|
||||
oMenu.addItems(
|
||||
[
|
||||
{ text: "Item One", onclick: { fn:onMenuItemClick } },
|
||||
|
||||
/*
|
||||
Register a "click" event handler for the first 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.clickEvent.subscribe(onMenuClick, oMenu, true);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
var oLogs = document.createElement("div");
|
||||
oLogs.id = "logs";
|
||||
|
||||
document.body.appendChild(oLogs);
|
||||
|
||||
var oLogReader = new YAHOO.widget.LogReader("logs");
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
|
||||
/*
|
||||
Add a "mousedown" event handler to prevent the menu from
|
||||
hiding when the user mouses down on the logger.
|
||||
*/
|
||||
|
||||
function onLogsMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Handling Menu Click Events (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to register a "click" event handler for a MenuItem instance. All of the events for YUI Menu are instances of <a href="http://developer.yahoo.com/yui/event/#customevent">YAHOO.util.CustomEvent</a>. To register a listener for an event, use the event's "subscribe" method passing a pointer to your handler as the first argument. You can pass an argument to your event handler(s) as an additional second argument to the "subscribe" method.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
236
www/extras/yui/examples/menu/example10.html
Normal file
236
www/extras/yui/examples/menu/example10.html
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
<!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: Listening For Menu Events (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">
|
||||
|
||||
|
||||
|
||||
<!-- Logger CSS -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
p em {
|
||||
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
|
||||
#logs {
|
||||
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
|
||||
}
|
||||
|
||||
.example10 {
|
||||
|
||||
background-color:#9c9;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
<!-- Logger source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
// Generic event handler for the menu events
|
||||
|
||||
function onMenuEvent(p_sType, p_aArguments) {
|
||||
|
||||
var oDOMEvent = p_aArguments[0];
|
||||
|
||||
YAHOO.log(
|
||||
(
|
||||
"Id: " + this.id + ", " +
|
||||
"Custom Event Type: " + p_sType + ", " +
|
||||
"DOM Event Type: " + oDOMEvent.type
|
||||
),
|
||||
"info",
|
||||
"example10"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Generic event handler for the menu item events
|
||||
|
||||
function onMenuItemEvent(p_sType, p_aArguments) {
|
||||
|
||||
var oDOMEvent = p_aArguments[0];
|
||||
|
||||
YAHOO.log(
|
||||
(
|
||||
"Index: " + this.index + ", " +
|
||||
"Group Index: " + this.groupIndex + ", " +
|
||||
"Custom Event Type: " + p_sType + ", " +
|
||||
"DOM Event Type: " + oDOMEvent.type
|
||||
),
|
||||
"info",
|
||||
"example10"
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create a menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu"),
|
||||
|
||||
// Create the MenuItem instances and add them to the menu
|
||||
|
||||
aMenuItemData = [
|
||||
|
||||
"MenuItem 0",
|
||||
"MenuItem 1",
|
||||
"MenuItem 2",
|
||||
"MenuItem 3",
|
||||
"MenuItem 4"
|
||||
|
||||
],
|
||||
|
||||
nMenuItems = aMenuItemData.length,
|
||||
|
||||
oMenuItem;
|
||||
|
||||
|
||||
|
||||
for(var i=0; i<nMenuItems; i++) {
|
||||
|
||||
oMenuItem = oMenu.addItem(aMenuItemData[i]);
|
||||
|
||||
oMenuItem.mouseOverEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.mouseOutEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.mouseDownEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.mouseUpEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.clickEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.keyDownEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.keyUpEvent.subscribe(onMenuItemEvent);
|
||||
oMenuItem.keyPressEvent.subscribe(onMenuItemEvent);
|
||||
|
||||
}
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
// Disable the third menu item instance
|
||||
|
||||
oMenu.getItem(2).cfg.setProperty("disabled", true);
|
||||
|
||||
|
||||
// Subscribe to the menu's events
|
||||
|
||||
oMenu.mouseOverEvent.subscribe(onMenuEvent);
|
||||
oMenu.mouseOutEvent.subscribe(onMenuEvent);
|
||||
oMenu.mouseDownEvent.subscribe(onMenuEvent);
|
||||
oMenu.mouseUpEvent.subscribe(onMenuEvent);
|
||||
oMenu.clickEvent.subscribe(onMenuEvent);
|
||||
oMenu.keyDownEvent.subscribe(onMenuEvent);
|
||||
oMenu.keyUpEvent.subscribe(onMenuEvent);
|
||||
oMenu.keyPressEvent.subscribe(onMenuEvent);
|
||||
|
||||
|
||||
var oLogs = document.createElement("div");
|
||||
oLogs.id = "logs";
|
||||
|
||||
document.body.appendChild(oLogs);
|
||||
|
||||
var oLogReader = new YAHOO.widget.LogReader("logs");
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
|
||||
/*
|
||||
Add a "mousedown" event handler to prevent the menu from
|
||||
hiding when the user mouses down on the logger.
|
||||
*/
|
||||
|
||||
function onLogsMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Listening For Menu Events (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<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 will hide it. Additionally, menu items without a submenu or a URL to navigate will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
118
www/extras/yui/examples/menu/example11.html
Normal file
118
www/extras/yui/examples/menu/example11.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!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: MenuItem Configuration Properties (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/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
li.yuimenuitem a em {
|
||||
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
li.yuimenuitem strong {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
// Create a menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true } );
|
||||
|
||||
oMenu.addItems([
|
||||
|
||||
{ text: "Selected MenuItem", selected: true },
|
||||
{ text: "Disabled MenuItem", disabled: true },
|
||||
{ text: "MenuItem With Help Text", helptext: "Help Me!" },
|
||||
{ text: "MenuItem With A URL", url: "http://www.yahoo.com!" },
|
||||
{ text: "MenuItem With Emphasis", emphasis: true },
|
||||
{ text: "MenuItem With Strong Emphasis", strongemphasis: true },
|
||||
{ text: "Checked MenuItem", checked: true }
|
||||
|
||||
]);
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: MenuItem Configuration Properties (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to set configuration properties when instantiating a MenuItem instance.</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
217
www/extras/yui/examples/menu/example12.html
Normal file
217
www/extras/yui/examples/menu/example12.html
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd"><html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Example: Setting Menu Configuration Properties At Runtime (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">
|
||||
|
||||
|
||||
|
||||
<!-- Logger CSS -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body { margin:.5em; }
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
li.yuimenuitem a em {
|
||||
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
li.yuimenuitem strong {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
p em {
|
||||
|
||||
text-decoration:underline;
|
||||
|
||||
}
|
||||
|
||||
#logs {
|
||||
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
|
||||
}
|
||||
|
||||
.example12 {
|
||||
|
||||
background-color:#9c9;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote {
|
||||
|
||||
margin-top:1em;
|
||||
|
||||
}
|
||||
|
||||
p#clicknote em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
<!-- Logger source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onDOMReady = function(p_sType) {
|
||||
|
||||
// "config change" event handler for each menu item
|
||||
|
||||
function onMenuItemConfigChange(p_sType, p_aArguments, p_oMenuItem) {
|
||||
|
||||
var sPropertyName = p_aArguments[0][0],
|
||||
sPropertyValue = p_aArguments[0][1];
|
||||
|
||||
YAHOO.log(
|
||||
(
|
||||
"Index: " + this.index + ", " +
|
||||
"Group Index: " + this.groupIndex + ", " +
|
||||
"Custom Event Type: " + p_sType + ", " +
|
||||
"\"" + sPropertyName + "\" Property Set To: \"" + sPropertyValue + "\""
|
||||
),
|
||||
"info",
|
||||
"example12"
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create a menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("basicmenu"),
|
||||
|
||||
// Define the items for the menu
|
||||
|
||||
aMenuItemData = [
|
||||
|
||||
"MenuItem 0",
|
||||
"MenuItem 1",
|
||||
"MenuItem 2",
|
||||
"MenuItem 3",
|
||||
"MenuItem 4",
|
||||
"MenuItem 5"
|
||||
|
||||
],
|
||||
|
||||
nMenuItems = aMenuItemData.length,
|
||||
|
||||
oMenuItem;
|
||||
|
||||
|
||||
for(var i=0; i<nMenuItems; i++) {
|
||||
|
||||
oMenuItem = oMenu.addItem(aMenuItemData[i]);
|
||||
|
||||
oMenuItem.cfg.configChangedEvent.subscribe(onMenuItemConfigChange, oMenuItem, true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
oMenu.render(document.body);
|
||||
|
||||
oMenu.showEvent.subscribe(function() {
|
||||
|
||||
this.focus();
|
||||
|
||||
});
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
// Set the MenuItem configuration properties
|
||||
|
||||
oMenu.getItem(0).cfg.setProperty("selected", true);
|
||||
oMenu.getItem(1).cfg.setProperty("disabled", true);
|
||||
oMenu.getItem(2).cfg.setProperty("helptext", "Help Me!");
|
||||
oMenu.getItem(3).cfg.setProperty("emphasis", true);
|
||||
oMenu.getItem(4).cfg.setProperty("strongemphasis", true);
|
||||
oMenu.getItem(5).cfg.setProperty("checked", true);
|
||||
|
||||
|
||||
var oLogs = document.createElement("div");
|
||||
oLogs.id = "logs";
|
||||
|
||||
document.body.appendChild(oLogs);
|
||||
|
||||
var oLogReader = new YAHOO.widget.LogReader("logs");
|
||||
|
||||
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
|
||||
|
||||
|
||||
/*
|
||||
Add a "mousedown" event handler to prevent the menu from
|
||||
hiding when the user mouses down on the logger.
|
||||
*/
|
||||
|
||||
function onLogsMouseDown(p_oEvent) {
|
||||
|
||||
YAHOO.util.Event.stopPropagation(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener("logs", "mousedown", onLogsMouseDown);
|
||||
|
||||
};
|
||||
|
||||
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.onDOMReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Example: Setting Menu Configuration Properties At Runtime (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></h1>
|
||||
<p>This example demonstrates how to set MenuItem configuration properties at runtime and listen for the changes through the "configChangedEvent."</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 will hide their parent menu when clicked. Click the "Show Menu" button below to make the menu visible if it is hidden.</p>
|
||||
<button id="menutoggle">Show Menu</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
276
www/extras/yui/examples/menu/example13.html
Normal file
276
www/extras/yui/examples/menu/example13.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: Customizing Menu Image Paths (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/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>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
/*
|
||||
Change the root path for all menu item images to point to the
|
||||
images in the "assets" directory.
|
||||
*/
|
||||
|
||||
YAHOO.widget.MenuItem.prototype.IMG_ROOT = "../../build/menu/assets/";
|
||||
|
||||
|
||||
// Change the path to the submenu indicator images for each menu item
|
||||
|
||||
YAHOO.widget.MenuItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH = "menuarorght8_nrm_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarorght8_hov_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarorght8_dim_1.gif";
|
||||
|
||||
|
||||
// Change the path to the checkmark images for each menu item
|
||||
|
||||
YAHOO.widget.MenuItem.prototype.CHECKED_IMAGE_PATH = "menuchk8_nrm_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.SELECTED_CHECKED_IMAGE_PATH = "menuchk8_hov_1.gif";
|
||||
YAHOO.widget.MenuItem.prototype.DISABLED_CHECKED_IMAGE_PATH = "menuchk8_dim_1.gif";
|
||||
|
||||
|
||||
// Change the path to the submenu images for each menu bar item
|
||||
|
||||
YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH = "menuarodwn8_nrm_1.gif";
|
||||
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarodwn8_hov_1.gif";
|
||||
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH = "menuarodwn8_dim_1.gif";
|
||||
|
||||
|
||||
YAHOO.example.onMenuBarReady = function(p_oEvent) {
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, showdelay:250, hidedelay:750, lazyload:true });
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuBarReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body id="yahoo-com">
|
||||
|
||||
<div id="doc" class="yui-t1">
|
||||
<div id="hd">
|
||||
<!-- start: your content here -->
|
||||
|
||||
<h1>Example: Customizing Menu Image Paths (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></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">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a 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 modify the paths for all images used by the YUI Menu components.</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>
|
||||
BIN
www/extras/yui/examples/menu/img/dolly.jpg
Normal file
BIN
www/extras/yui/examples/menu/img/dolly.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
www/extras/yui/examples/menu/img/grass.png
Normal file
BIN
www/extras/yui/examples/menu/img/grass.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
www/extras/yui/examples/menu/img/menubar_background.gif
Normal file
BIN
www/extras/yui/examples/menu/img/menubar_background.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 B |
41
www/extras/yui/examples/menu/index.html
Normal file
41
www/extras/yui/examples/menu/index.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!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>Examples: Menu (YUI Library)</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../../docs/assets/examples.css">
|
||||
<style type="text/css">
|
||||
|
||||
ul {
|
||||
margin:0 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom:1em;
|
||||
}
|
||||
|
||||
li a {
|
||||
font:85% verdana;
|
||||
}
|
||||
|
||||
li a:link {
|
||||
color:#666;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="doc">
|
||||
<div id="hd">
|
||||
<img src="../../docs/assets/logo.gif" alt="Yahoo!">
|
||||
<h1>Examples: Menu (YUI Library)</h1>
|
||||
</div>
|
||||
<div id="bd">
|
||||
|
||||
<ul>
|
||||
<li><a href="example01.html">Basic Menu From Markup</a></li>
<li><a href="example02.html">Basic Menu From JavaScript</a></li>
<li><a href="example03.html">Grouped Menu Items Using Markup</a></li>
<li><a href="example04.html">Grouped Menu Items Using JavaScript</a></li>
<li><a href="example05.html">Grouped Menu Items With Titles From Markup</a></li>
<li><a href="example06.html">Grouped Menu Items With Titles From JavaScript</a></li>
<li><a href="example07.html">Multi-tiered Menu From Markup</a></li>
<li><a href="example08.html">Multi-tiered Menu From JavaScript</a></li>
<li><a href="example09.html">Handling Menu Click Events</a></li>
<li><a href="example10.html">Listening For Menu Events</a></li>
<li><a href="example11.html">MenuItem Configuration Properties</a></li>
<li><a href="example12.html">Setting Menu Configuration Properties At Runtime</a></li>
<li><a href="leftnavfrommarkup.html">Website Left Nav With Submenus Built From Markup</a></li>
<li><a href="leftnavfromjs.html">Website Left Nav With Submenus From JavaScript</a></li>
<li><a href="topnavfrommarkup.html">Website Top Nav With Submenus Built From Markup</a></li>
<li><a href="topnavfromjs.html">Website Top Nav With Submenus From JavaScript</a></li>
<li><a href="leftnavfrommarkupwithanim.html">Website Left Nav Using Animation With Submenus Built From Markup</a></li>
<li><a href="leftnavfromjswithanim.html">Website Left Nav Using Animation With Submenus From JavaScript</a></li>
<li><a href="topnavfrommarkupwithanim.html">Website Top Nav Using Animation With Submenus Built From Markup</a></li>
<li><a href="topnavfromjswithanim.html">Website Top Nav Using Animation With Submenus From JavaScript</a></li>
<li><a href="contextmenu.html">Context Menu</a></li>
<li><a href="tablecontextmenu.html">Adding A Context Menu To A Table</a></li>
<li><a href="treeviewcontextmenu.html">Adding A Context Menu To A TreeView</a></li>
<li><a href="programsmenu.html">OS-Style Programs Menu</a></li>
<li><a href="applicationmenubar.html">Application Menubar</a></li>
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
231
www/extras/yui/examples/menu/leftnavfromjs.html
Normal file
231
www/extras/yui/examples/menu/leftnavfromjs.html
Normal file
|
|
@ -0,0 +1,231 @@
|
|||
<!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/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;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
// "beforerender" event handler for the menu
|
||||
|
||||
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ 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: "Photos", url: "http://photos.yahoo.com" },
|
||||
|
||||
],
|
||||
|
||||
"shopping": [
|
||||
|
||||
{ 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: "Points", url: "http://points.yahoo.com" },
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"entertainment": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"information": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu("productsandservices", { position:"static", hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenu.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenu, true);
|
||||
|
||||
oMenu.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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 via JavaScript to a menu built from existing markup. The root menu in the left nav 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 root menu. This allows the user to skip the product landing pages and proceed directly to a given property. Alternatively, you can <a href="leftnavfrommarkup.html">add submenus to a menu using markup</a>.</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 href="http://communication.yahoo.com">Communication</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a></li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
|
||||
<li class="yuimenuitem">Information</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>
|
||||
247
www/extras/yui/examples/menu/leftnavfromjswithanim.html
Normal file
247
www/extras/yui/examples/menu/leftnavfromjswithanim.html
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
<!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/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;
|
||||
|
||||
}
|
||||
|
||||
</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">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
// "beforerender" event handler for the menu
|
||||
|
||||
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ 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: "Photos", url: "http://photos.yahoo.com" },
|
||||
|
||||
],
|
||||
|
||||
"shopping": [
|
||||
|
||||
{ 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: "Points", url: "http://points.yahoo.com" },
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"entertainment": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"information": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"productsandservices",
|
||||
{
|
||||
position:"static",
|
||||
hidedelay:750,
|
||||
lazyload:true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.25
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenu.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenu, true);
|
||||
|
||||
|
||||
// Render the menu
|
||||
|
||||
oMenu.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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. You can also add animation to menus built <a href="leftnavfrommarkupwithanim.html">using existing markup</a>.</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 href="http://communication.yahoo.com">Communication</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a></li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
|
||||
<li class="yuimenuitem">Information</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>
|
||||
236
www/extras/yui/examples/menu/leftnavfrommarkup.html
Normal file
236
www/extras/yui/examples/menu/leftnavfrommarkup.html
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
<!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/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;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"productsandservices",
|
||||
{
|
||||
position:"static",
|
||||
hidedelay:750,
|
||||
lazyload:true
|
||||
}
|
||||
);
|
||||
|
||||
oMenu.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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. Alternatively, you can <a href="leftnavfromjs.html">add submenus to a menu using JavaScript</a>.</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 href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a 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>
|
||||
242
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html
Normal file
242
www/extras/yui/examples/menu/leftnavfrommarkupwithanim.html
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
<!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/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;
|
||||
|
||||
}
|
||||
|
||||
</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">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
// Instantiate and render the menu
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"productsandservices",
|
||||
{
|
||||
position:"static",
|
||||
hidedelay:750,
|
||||
lazyload:true,
|
||||
effect:{
|
||||
effect:YAHOO.widget.ContainerEffect.FADE,
|
||||
duration:0.25
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
oMenu.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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. You can also add animation to menus built <a href="leftnavfromjswithanim.html">using JavaScript</a>.</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 href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a 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>
|
||||
389
www/extras/yui/examples/menu/programsmenu.html
Normal file
389
www/extras/yui/examples/menu/programsmenu.html
Normal file
|
|
@ -0,0 +1,389 @@
|
|||
<!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/container.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/menu.css">
|
||||
|
||||
|
||||
<!-- Page-specific styles -->
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html {
|
||||
|
||||
overflow:hidden;
|
||||
|
||||
}
|
||||
|
||||
h1 { font-weight:bold; }
|
||||
|
||||
body {
|
||||
|
||||
background-color:#dfb8df;
|
||||
overflow:hidden;
|
||||
|
||||
}
|
||||
|
||||
/* Define a style for the H1 "toolbar" */
|
||||
|
||||
.ytoolbar {
|
||||
|
||||
border-top-width:2px;
|
||||
border-top-color:#ddd;
|
||||
border-top-style:solid;
|
||||
background-color:#ccc;
|
||||
position:absolute;
|
||||
width:100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Style the "Yahoo!" anchor to look like a button */
|
||||
|
||||
.ytoolbar #yahoo {
|
||||
|
||||
border-width:2px;
|
||||
border-color:#ddd #666 #666 #ddd;
|
||||
border-style:solid;
|
||||
float:left;
|
||||
*float:none;
|
||||
*display:inline-block;
|
||||
padding:4px 12px 4px 28px;
|
||||
margin:4px;
|
||||
background-color:#ccc;
|
||||
color:#000;
|
||||
text-decoration:none;
|
||||
background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat;
|
||||
|
||||
}
|
||||
|
||||
.ytoolbar #yahoo:active {
|
||||
|
||||
border-color:#666 #ddd #ddd #666;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for each menu */
|
||||
|
||||
div.yuimenu {
|
||||
|
||||
border-width:2px;
|
||||
border-color:#ddd #666 #666 #ddd;
|
||||
border-style:solid;
|
||||
background-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for each menu item */
|
||||
|
||||
div.yuimenu li.yuimenuitem {
|
||||
|
||||
padding-top:4px;
|
||||
padding-bottom:4px;
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif);
|
||||
background-position:4px;
|
||||
background-repeat:no-repeat;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li.yuimenuitem img {
|
||||
|
||||
*border-color:#ccc;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Add icons to menu items */
|
||||
|
||||
div.yuimenu li.hassubmenu {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/fldr16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#help {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#search {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#goto {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li#examples {
|
||||
|
||||
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/lnk16_1.gif);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Define a new style for an item's "selected" state */
|
||||
|
||||
div.yuimenu li.selected {
|
||||
|
||||
background-color:#039;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li.selected a.selected {
|
||||
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
|
||||
div.yuimenu li.yuimenuitem.selected img.selected {
|
||||
|
||||
*border-color:#039;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js"></script>
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuReady = function() {
|
||||
|
||||
// "click" handler for the "Go to..." menu item
|
||||
|
||||
function onGotoClick() {
|
||||
|
||||
var sURL = window.prompt("Enter a URL:","");
|
||||
|
||||
if(sURL && sURL.length > 0) {
|
||||
|
||||
document.location = sURL;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var oH1 = document.getElementsByTagName("h1")[0];
|
||||
|
||||
|
||||
/*
|
||||
Apply the "ytoolbar" class to the H1 so that it is styled
|
||||
like an application toolbar
|
||||
*/
|
||||
|
||||
YAHOO.util.Dom.addClass(oH1, "ytoolbar");
|
||||
|
||||
|
||||
function PositionToolbar() {
|
||||
|
||||
// Position the H1 "toolbar" to the bottom of the viewport
|
||||
|
||||
var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
|
||||
nToolbarHeight = oH1.offsetHeight;
|
||||
|
||||
oH1.style.top = (nViewportHeight - nToolbarHeight) + "px";
|
||||
|
||||
}
|
||||
|
||||
PositionToolbar();
|
||||
|
||||
|
||||
// Instantiate the root menu and submenus
|
||||
|
||||
var oMenu = new YAHOO.widget.Menu(
|
||||
"yproducts",
|
||||
{ constraintoviewport:true, zIndex:2 }
|
||||
);
|
||||
|
||||
|
||||
oMenu.addItems([
|
||||
|
||||
{ text: "Examples", url: "index.html", id: "examples" },
|
||||
{ text:"Go to...", id: "goto", onclick: { fn: onGotoClick } }
|
||||
|
||||
]);
|
||||
|
||||
|
||||
// Render the root menu and submenus
|
||||
|
||||
oMenu.render();
|
||||
|
||||
|
||||
/*
|
||||
Position the bottom-left corner of the root menu to the
|
||||
top-left corner of the "Yahoo!" anchor
|
||||
*/
|
||||
|
||||
oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
|
||||
|
||||
|
||||
// "click" event handler for "Yahoo!" button
|
||||
|
||||
function onYahooClick(p_oEvent) {
|
||||
|
||||
// Position and display the menu
|
||||
|
||||
oMenu.align("bl", "tl");
|
||||
|
||||
oMenu.show();
|
||||
|
||||
|
||||
// Stop propagation and prevent the default "click" behavior
|
||||
|
||||
YAHOO.util.Event.stopEvent(p_oEvent);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Assign a "click" event handler to the "Yahoo!" anchor that
|
||||
will display the menu
|
||||
*/
|
||||
|
||||
YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);
|
||||
|
||||
|
||||
// "resize" handler for the window
|
||||
|
||||
function onWindowResize() {
|
||||
|
||||
PositionToolbar();
|
||||
|
||||
oMenu.align("bl", "tl");
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Add a "resize" event handler for the window that will
|
||||
reposition the H1 "toolbar" to the bottom of the viewport
|
||||
*/
|
||||
|
||||
YAHOO.util.Event.addListener(window, "resize", onWindowResize);
|
||||
|
||||
|
||||
var oPanel = new YAHOO.widget.SimpleDialog(
|
||||
"exampleinfo",
|
||||
{
|
||||
constraintoviewport: true,
|
||||
fixedcenter:true,
|
||||
width:"400px",
|
||||
zIndex:1
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
oPanel.setHeader("OS-Style Programs Menu Example");
|
||||
oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu.");
|
||||
|
||||
oPanel.render(document.body);
|
||||
|
||||
oPanel.show();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("yproducts", YAHOO.example.onMenuReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1><a id="yahoo" href="http://www.yahoo.com">Yahoo!</a></h1>
|
||||
|
||||
<div id="yproducts">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li>Products
|
||||
<div id="products">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li><a href="http://calendar.yahoo.com">Yahoo! Calender</a></li>
|
||||
<li><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
<li><a href="http://messenger.yahoo.com">Yahoo! Messenger</a></li>
|
||||
<li><a href="http://360.yahoo.com">Yahoo! 360</a></li>
|
||||
<li><a href="http://photos.yahoo.com">Yahoo! Photos</a></li>
|
||||
<li><a href="http://finance.yahoo.com/">Finance</a></li>
|
||||
<li><a href="http://entertainment.yahoo.com/">Entertainment</a>
|
||||
<div id="entertainmentproducts">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><a href="http://music.yahoo.com/">Yahoo! Music</a></li>
|
||||
<li><a href="http://movies.yahoo.com/">Yahoo! Movies</a></li>
|
||||
<li><a href="http://tv.yahoo.com/">Yahoo! TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="search"><a href="http://search.yahoo.com/">Search</a>
|
||||
<div id="searchproducts">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li><a href="http://images.search.yahoo.com/images">Yahoo! Image Search</a></li>
|
||||
<li><a href="http://dir.yahoo.com/">Yahoo! Directory</a></li>
|
||||
<li><a href="http://local.yahoo.com">Yahoo! Local</a></li>
|
||||
<li><a href="http://news.search.yahoo.com/news">Yahoo! News Search</a></li>
|
||||
<li><a href="http://search.yahoo.com/people">Yahoo! People Search</a></li>
|
||||
<li><a href="http://search.yahoo.com/products">Yahoo! Product Search</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="help"><a href="http://help.yahoo.com/">Help</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
288
www/extras/yui/examples/menu/tablecontextmenu.html
Normal file
288
www/extras/yui/examples/menu/tablecontextmenu.html
Normal file
File diff suppressed because one or more lines are too long
251
www/extras/yui/examples/menu/topnavfromjs.html
Normal file
251
www/extras/yui/examples/menu/topnavfromjs.html
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
<!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/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>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuBarReady = function() {
|
||||
|
||||
// "beforerender" event handler for the menu bar
|
||||
|
||||
function onMenuBarBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ 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: "Photos", url: "http://photos.yahoo.com" },
|
||||
|
||||
],
|
||||
|
||||
"shopping": [
|
||||
|
||||
{ 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: "Points", url: "http://points.yahoo.com" },
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"entertainment": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"information": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, showdelay:250, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenuBar.beforeRenderEvent.subscribe(onMenuBarBeforeRender, oMenuBar, true);
|
||||
|
||||
|
||||
// Render the menu bar
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuBarReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
|
||||
<li class="yuimenubaritem">Information</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. Alternatively, you can <a href="topnavfrommarkup.html">add submenus to a menu bar using markup</a>.</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>
|
||||
362
www/extras/yui/examples/menu/topnavfromjswithanim.html
Normal file
362
www/extras/yui/examples/menu/topnavfromjswithanim.html
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
<!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/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>
|
||||
|
||||
<!-- 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">
|
||||
|
||||
YAHOO.example.onMenuBarReady = function() {
|
||||
|
||||
// Animation object
|
||||
|
||||
var oAnim;
|
||||
|
||||
|
||||
// Utility function used to setup animation for submenus
|
||||
|
||||
function setupMenuAnimation(p_oMenu) {
|
||||
|
||||
if(!p_oMenu.animationSetup) {
|
||||
|
||||
var aItems = p_oMenu.getItemGroups();
|
||||
|
||||
if(aItems && aItems[0]) {
|
||||
|
||||
var i = aItems[0].length - 1;
|
||||
var oSubmenu;
|
||||
|
||||
do {
|
||||
|
||||
oSubmenu = p_oMenu.getItem(i).cfg.getProperty("submenu");
|
||||
|
||||
if(oSubmenu) {
|
||||
|
||||
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
|
||||
oSubmenu.showEvent.subscribe(onMenuShow, oSubmenu, true);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
while(i--);
|
||||
|
||||
}
|
||||
|
||||
p_oMenu.animationSetup = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "beforeshow" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
if(oAnim && oAnim.isAnimated()) {
|
||||
|
||||
oAnim.stop();
|
||||
oAnim = null;
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Dom.setStyle(this.element, "overflow", "hidden");
|
||||
YAHOO.util.Dom.setStyle(this.body, "marginTop", ("-" + this.body.offsetHeight + "px"));
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "show" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
oAnim = new YAHOO.util.Anim(
|
||||
this.body,
|
||||
{ marginTop: { to: 0 } },
|
||||
.5,
|
||||
YAHOO.util.Easing.easeOut
|
||||
);
|
||||
|
||||
oAnim.animate();
|
||||
|
||||
var me = this;
|
||||
|
||||
function onTween() {
|
||||
|
||||
me.cfg.refireEvent("iframe");
|
||||
|
||||
}
|
||||
|
||||
function onAnimationComplete() {
|
||||
|
||||
YAHOO.util.Dom.setStyle(me.body, "marginTop", ("0px"));
|
||||
YAHOO.util.Dom.setStyle(me.element, "overflow", "visible");
|
||||
|
||||
setupMenuAnimation(me);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Refire the event handler for the "iframe"
|
||||
configuration property with each tween so that the
|
||||
size and position of the iframe shim remain in sync
|
||||
with the menu.
|
||||
*/
|
||||
|
||||
if(this.cfg.getProperty("iframe") == true) {
|
||||
|
||||
oAnim.onTween.subscribe(onTween);
|
||||
|
||||
}
|
||||
|
||||
oAnim.onComplete.subscribe(onAnimationComplete);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "beforerender" event handler for the menu bar
|
||||
|
||||
function onMenuBeforeRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
var oSubmenuData = {
|
||||
|
||||
"communication": [
|
||||
|
||||
{ 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: "Photos", url: "http://photos.yahoo.com" },
|
||||
|
||||
],
|
||||
|
||||
"shopping": [
|
||||
|
||||
{ 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: "Points", url: "http://points.yahoo.com" },
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"entertainment": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
],
|
||||
|
||||
"information": [
|
||||
|
||||
{ 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" }
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
|
||||
this.getItem(0).cfg.setProperty("submenu", { id:"communication", itemdata: oSubmenuData["communication"] });
|
||||
this.getItem(1).cfg.setProperty("submenu", { id:"shopping", itemdata: oSubmenuData["shopping"] });
|
||||
this.getItem(2).cfg.setProperty("submenu", { id:"entertainment", itemdata: oSubmenuData["entertainment"] });
|
||||
this.getItem(3).cfg.setProperty("submenu", { id:"information", itemdata: oSubmenuData["information"] });
|
||||
|
||||
setupMenuAnimation(this);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Initialize the root menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "beforerender" event
|
||||
|
||||
oMenuBar.beforeRenderEvent.subscribe(onMenuBeforeRender, oMenuBar, true);
|
||||
|
||||
|
||||
// Render the menu bar
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuBarReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a></li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a></li>
|
||||
<li class="yuimenubaritem">Information</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. You can also add animation to submenus built <a href="topnavfrommarkupwithanim.html">using existing markup</a>.</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>
|
||||
246
www/extras/yui/examples/menu/topnavfrommarkup.html
Normal file
246
www/extras/yui/examples/menu/topnavfrommarkup.html
Normal file
|
|
@ -0,0 +1,246 @@
|
|||
<!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/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>
|
||||
|
||||
<!-- Namespace source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
|
||||
<!-- Dependency source files -->
|
||||
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
||||
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onMenuBarReady = function() {
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuBarReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a 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. Alternatively, you can <a href="topnavfromjs.html">add submenus to a menu bar using JavaScript</a>.</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>
|
||||
369
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html
Normal file
369
www/extras/yui/examples/menu/topnavfrommarkupwithanim.html
Normal file
|
|
@ -0,0 +1,369 @@
|
|||
<!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/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>
|
||||
|
||||
<!-- 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">
|
||||
|
||||
YAHOO.example.onMenuBarReady = function() {
|
||||
|
||||
// Animation object
|
||||
|
||||
var oAnim;
|
||||
|
||||
|
||||
// Utility function used to setup animation for submenus
|
||||
|
||||
function setupMenuAnimation(p_oMenu) {
|
||||
|
||||
if(!p_oMenu.animationSetup) {
|
||||
|
||||
var aItems = p_oMenu.getItemGroups();
|
||||
|
||||
if(aItems && aItems[0]) {
|
||||
|
||||
var i = aItems[0].length - 1;
|
||||
var oSubmenu;
|
||||
|
||||
do {
|
||||
|
||||
oSubmenu = p_oMenu.getItem(i).cfg.getProperty("submenu");
|
||||
|
||||
if(oSubmenu) {
|
||||
|
||||
oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
|
||||
oSubmenu.showEvent.subscribe(onMenuShow, oSubmenu, true);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
while(i--);
|
||||
|
||||
}
|
||||
|
||||
p_oMenu.animationSetup = true;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "beforeshow" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
if(oAnim && oAnim.isAnimated()) {
|
||||
|
||||
oAnim.stop();
|
||||
oAnim = null;
|
||||
|
||||
}
|
||||
|
||||
YAHOO.util.Dom.setStyle(this.element, "overflow", "hidden");
|
||||
YAHOO.util.Dom.setStyle(this.body, "marginTop", ("-" + this.body.offsetHeight + "px"));
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "show" event handler for each submenu of the menu bar
|
||||
|
||||
function onMenuShow(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
oAnim = new YAHOO.util.Anim(
|
||||
this.body,
|
||||
{ marginTop: { to: 0 } },
|
||||
.5,
|
||||
YAHOO.util.Easing.easeOut
|
||||
);
|
||||
|
||||
oAnim.animate();
|
||||
|
||||
var me = this;
|
||||
|
||||
function onTween() {
|
||||
|
||||
me.cfg.refireEvent("iframe");
|
||||
|
||||
}
|
||||
|
||||
function onAnimationComplete() {
|
||||
|
||||
YAHOO.util.Dom.setStyle(me.body, "marginTop", ("0px"));
|
||||
YAHOO.util.Dom.setStyle(me.element, "overflow", "visible");
|
||||
|
||||
setupMenuAnimation(me);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Refire the event handler for the "iframe"
|
||||
configuration property with each tween so that the
|
||||
size and position of the iframe shim remain in sync
|
||||
with the menu.
|
||||
*/
|
||||
|
||||
if(this.cfg.getProperty("iframe") == true) {
|
||||
|
||||
oAnim.onTween.subscribe(onTween);
|
||||
|
||||
}
|
||||
|
||||
oAnim.onComplete.subscribe(onAnimationComplete);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// "render" event handler for the menu bar
|
||||
|
||||
function onMenuRender(p_sType, p_sArgs, p_oMenu) {
|
||||
|
||||
setupMenuAnimation(p_oMenu);
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Instantiate and render the menu bar
|
||||
|
||||
var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay:true, hidedelay:750, lazyload:true });
|
||||
|
||||
|
||||
// Subscribe to the "render" event
|
||||
|
||||
oMenuBar.renderEvent.subscribe(onMenuRender, oMenuBar, true);
|
||||
|
||||
oMenuBar.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Initialize and render the menu bar when it is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onContentReady("productsandservices", YAHOO.example.onMenuBarReady);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body 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) <em>[<a href="index.html">Examples Home</a>]</em></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">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenubaritem first-of-type"><a href="http://communication.yahoo.com">Communication</a>
|
||||
|
||||
<div id="communication" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://360.yahoo.com">360°</a></li>
|
||||
<li class="yuimenuitem"><a href="http://alerts.yahoo.com">Alerts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://avatars.yahoo.com">Avatars</a></li>
|
||||
<li class="yuimenuitem"><a href="http://groups.yahoo.com">Groups</a></li>
|
||||
<li class="yuimenuitem"><a href="http://promo.yahoo.com/broadband/">Internet Access</a></li>
|
||||
<li class="yuimenuitem">PIM
|
||||
|
||||
<div id="pim" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul class="first-of-type">
|
||||
<li class="yuimenuitem"><a href="http://mail.yahoo.com">Yahoo! Mail</a></li>
|
||||
<li class="yuimenuitem"><a href="http://addressbook.yahoo.com">Yahoo! Address Book</a></li>
|
||||
<li class="yuimenuitem"><a href="http://calendar.yahoo.com">Yahoo! Calendar</a></li>
|
||||
<li class="yuimenuitem"><a href="http://notepad.yahoo.com">Yahoo! Notepad</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenuitem"><a href="http://members.yahoo.com">Member Directory</a></li>
|
||||
<li class="yuimenuitem"><a href="http://messenger.yahoo.com">Messenger</a></li>
|
||||
<li class="yuimenuitem"><a href="http://mobile.yahoo.com">Mobile</a></li>
|
||||
<li class="yuimenuitem"><a href="http://photos.yahoo.com">Photos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://shopping.yahoo.com">Shopping</a>
|
||||
|
||||
<div id="shopping" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://auctions.shopping.yahoo.com">Auctions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://autos.yahoo.com">Autos</a></li>
|
||||
<li class="yuimenuitem"><a href="http://classifieds.yahoo.com">Classifieds</a></li>
|
||||
<li class="yuimenuitem"><a href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
|
||||
<li class="yuimenuitem"><a href="http://points.yahoo.com">Points</a></li>
|
||||
<li class="yuimenuitem"><a href="http://realestate.yahoo.com">Real Estate</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://wallet.yahoo.com">Wallet</a></li>
|
||||
<li class="yuimenuitem"><a href="http://yp.yahoo.com">Yellow Pages</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem"><a href="http://entertainment.yahoo.com">Entertainment</a>
|
||||
|
||||
<div id="entertainment" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://fantasysports.yahoo.com">Fantasy Sports</a></li>
|
||||
<li class="yuimenuitem"><a href="http://games.yahoo.com">Games</a></li>
|
||||
<li class="yuimenuitem"><a href="http://www.yahooligans.com">Kids</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com">Music</a></li>
|
||||
<li class="yuimenuitem"><a href="http://movies.yahoo.com">Movies</a></li>
|
||||
<li class="yuimenuitem"><a href="http://music.yahoo.com/launchcast">Radio</a></li>
|
||||
<li class="yuimenuitem"><a href="http://travel.yahoo.com">Travel</a></li>
|
||||
<li class="yuimenuitem"><a href="http://tv.yahoo.com">TV</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="yuimenubaritem">Information
|
||||
|
||||
<div id="information" class="yuimenu">
|
||||
<div class="bd">
|
||||
<ul>
|
||||
<li class="yuimenuitem"><a href="http://downloads.yahoo.com">Downloads</a></li>
|
||||
<li class="yuimenuitem"><a href="http://finance.yahoo.com">Finance</a></li>
|
||||
<li class="yuimenuitem"><a href="http://health.yahoo.com">Health</a></li>
|
||||
<li class="yuimenuitem"><a href="http://local.yahoo.com">Local</a></li>
|
||||
<li class="yuimenuitem"><a href="http://maps.yahoo.com">Maps & Directions</a></li>
|
||||
<li class="yuimenuitem"><a href="http://my.yahoo.com">My Yahoo!</a></li>
|
||||
<li class="yuimenuitem"><a href="http://news.yahoo.com">News</a></li>
|
||||
<li class="yuimenuitem"><a href="http://search.yahoo.com">Search</a></li>
|
||||
<li class="yuimenuitem"><a href="http://smallbusiness.yahoo.com">Small Business</a></li>
|
||||
<li class="yuimenuitem"><a 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. You can also add animation to submenus built <a href="topnavfromjswithanim.html">using JavaScript</a>.</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>
|
||||
275
www/extras/yui/examples/menu/treeviewcontextmenu.html
Normal file
275
www/extras/yui/examples/menu/treeviewcontextmenu.html
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
<!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/tree.css">
|
||||
|
||||
|
||||
|
||||
<!-- CSS for Menu -->
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/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;
|
||||
|
||||
}
|
||||
|
||||
h1 em,
|
||||
p em,
|
||||
#operainstructions li em {
|
||||
|
||||
font-weight:bold;
|
||||
|
||||
}
|
||||
|
||||
#operainstructions {
|
||||
|
||||
list-style-type:square;
|
||||
margin-left:2em;
|
||||
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
<!-- TreeView source file -->
|
||||
|
||||
<script type="text/javascript" src="../../build/treeview/treeview.js"></script>
|
||||
|
||||
<!-- Container source file -->
|
||||
<script type="text/javascript" src="../../build/container/container_core.js"></script>
|
||||
|
||||
<!-- Menu source file -->
|
||||
<script type="text/javascript" src="../../build/menu/menu.js"></script>
|
||||
|
||||
<!-- Page-specific script -->
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.onTreeViewAvailble = function() {
|
||||
|
||||
var oTreeView, // The YAHOO.widget.TreeView instance
|
||||
oContextMenu, // The YAHOO.widget.ContextMenu instance
|
||||
oTextNodeMap = {}, // Hash of YAHOO.widget.TextNode instances in the tree
|
||||
oCurrentTextNode = null; // The YAHOO.widget.TextNode instance whose "contextmenu" DOM event triggered the display of the context menu
|
||||
|
||||
|
||||
function buildRandomTextBranch(p_oNode) {
|
||||
|
||||
if(p_oNode.depth < 6) {
|
||||
|
||||
for(var i=0; i<Math.floor(Math.random() * 4); i++) {
|
||||
|
||||
var oTextNode = new YAHOO.widget.TextNode(p_oNode.label + "-" + i, p_oNode, false);
|
||||
|
||||
oTextNodeMap[oTextNode.labelElId] = oTextNode;
|
||||
|
||||
buildRandomTextBranch(oTextNode);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create a tree
|
||||
|
||||
oTreeView = new YAHOO.widget.TreeView("mytreeview");
|
||||
|
||||
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
|
||||
|
||||
var oTextNode = new YAHOO.widget.TextNode("label-" + i, oTreeView.getRoot(), false);
|
||||
|
||||
oTextNodeMap[oTextNode.labelElId] = oTextNode;
|
||||
|
||||
buildRandomTextBranch(oTextNode);
|
||||
|
||||
}
|
||||
|
||||
oTreeView.draw();
|
||||
|
||||
|
||||
function addNode() {
|
||||
|
||||
var sLabel = window.prompt("Enter a label for the new node:", "");
|
||||
|
||||
if(sLabel && sLabel.length > 0) {
|
||||
|
||||
var oChildNode = new YAHOO.widget.TextNode(sLabel, oCurrentTextNode, false);
|
||||
|
||||
oCurrentTextNode.refresh();
|
||||
oCurrentTextNode.expand();
|
||||
|
||||
oTextNodeMap[oChildNode.labelElId] = oChildNode;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function deleteNode() {
|
||||
|
||||
delete oTextNodeMap[oCurrentTextNode.labelElId];
|
||||
|
||||
oTreeView.removeNode(oCurrentTextNode);
|
||||
oTreeView.draw();
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
"contextmenu" event handler for the element(s) that triggered the display of the context menu
|
||||
*/
|
||||
function onTriggerContextMenu(p_oEvent, p_oMenu) {
|
||||
|
||||
/*
|
||||
Returns a TextNode instance that corresponds to the DOM
|
||||
element whose "contextmenu" event triggered the display
|
||||
of the context menu.
|
||||
*/
|
||||
|
||||
function GetTextNodeFromEventTarget(p_oTarget) {
|
||||
|
||||
if(p_oTarget.tagName.toUpperCase() == "A" && p_oTarget.className == "ygtvlabel") {
|
||||
|
||||
return oTextNodeMap[p_oTarget.id];
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
if(p_oTarget.parentNode) {
|
||||
|
||||
return GetTextNodeFromEventTarget(p_oTarget.parentNode);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
var oTextNode = GetTextNodeFromEventTarget(this.contextEventTarget);
|
||||
|
||||
if(oTextNode) {
|
||||
|
||||
oCurrentTextNode = oTextNode;
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
this.cancel();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Create the context menu for the tree
|
||||
|
||||
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 } }
|
||||
]
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
oContextMenu.triggerContextMenuEvent.subscribe(onTriggerContextMenu, oContextMenu, true);
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Build the tree view when the "mytreeview" DIV is available in the DOM
|
||||
|
||||
YAHOO.util.Event.onAvailable("mytreeview", YAHOO.example.onTreeViewAvailble);
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>Example: Adding A Context Menu To A TreeView (YUI Library) <em>[<a href="index.html">Examples Home</a>]</em></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 how to display a context menu when the
|
||||
user clicks on any of the labels of the nodes in a YAHOO.widget.TreeView instance.
|
||||
</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>
|
||||
|
||||
<div id="mytreeview"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue