JavaScript DHTML/YUI Library/Menu MenuItem — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 07:29, 26 мая 2010
Содержание
- 1 Add menuitem separator to menu
- 2 Add shortcut key to menuitem
- 3 Add submenu to menuitem
- 4 Create a Menu instance using existing markup on the page.
- 5 Create a Menu instance using nothing but JavaScript.
- 6 Disabled menuitem
- 7 Grouped Menu Items Using JavaScript
- 8 Grouped Menu Items Using Markup
- 9 Grouped Menu Items With Titles From JavaScript
- 10 Grouped Menu Items With Titles From Markup
- 11 Handling Menu Click Events
- 12 Icon on a Menu bar
- 13 Listening For Menu Events
- 14 Multi-tiered Menu(sub menu) From Markup
- 15 Multi-tiered Menu (sun menu) From JavaScript
- 16 OS-Style Programs Menu
- 17 Set MenuItem configuration properties when adding items to a Menu instance.
- 18 Setting Menu Configuration Properties At Runtime
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize and render the MenuBar when the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "<em id=\"yahoolabel\">Yahoo!</em>",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize and render the MenuBar when the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "<em id=\"yahoolabel\">Yahoo!</em>",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize and render the MenuBar when the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "<em id=\"yahoolabel\">Yahoo!</em>",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Create a Menu instance using existing markup on the page.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Menu From Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Menu From Markup</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu instance using existing markup
on the page.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("basicmenu", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="basicmenu" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.ru">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.ru">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.ru">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.ru">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Create a Menu instance using nothing but JavaScript.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Menu From JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Basic Menu From JavaScript</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu instance using nothing
but JavaScript.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
{ text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize and render the MenuBar when the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "<em id=\"yahoolabel\">Yahoo!</em>",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items Using JavaScript
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grouped Menu Items Using JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items Using JavaScript</h1>
<div class="exampleIntro">
<p>This example demonstrates how to group MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
[
{ text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
],
[
{ text: "Yahoo! Local", url: "http://local.yahoo.ru" },
{ text: "Yahoo! Maps", url: "http://maps.yahoo.ru" },
{ text: "Yahoo! Travel", url: "http://travel.yahoo.ru" },
{ text: "Yahoo! Shopping", url: "http://shopping.yahoo.ru" }
],
[
{ text: "Yahoo! Messenger", url: "http://messenger.yahoo.ru" },
{ text: "Yahoo! 360", url: "http://360.yahoo.ru" },
{ text: "Yahoo! Groups", url: "http://groups.yahoo.ru" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }
]
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items Using Markup
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grouped Menu Items Using Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items Using Markup</h1>
<div class="exampleIntro">
<p>This example demonstrates how to group MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("menuwithgroups", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="menuwithgroups" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.ru">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.ru">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.ru">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.ru">Yahoo! Notepad</a></li>
</ul>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.ru">Yahoo! Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.ru">Yahoo! Maps</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.ru">Yahoo! Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.ru">Yahoo! Shopping</a></li>
</ul>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.ru">Yahoo! Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.ru">Yahoo! 360</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.ru">Yahoo! Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.ru">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items With Titles From JavaScript
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grouped Menu Items With Titles From JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items With Titles From JavaScript</h1>
<div class="exampleIntro">
<p>This example demonstrates how to title groups of MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
[
{ text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
],
[
{ text: "Yahoo! Local", url: "http://local.yahoo.ru" },
{ text: "Yahoo! Maps", url: "http://maps.yahoo.ru" },
{ text: "Yahoo! Travel", url: "http://travel.yahoo.ru" },
{ text: "Yahoo! Shopping", url: "http://shopping.yahoo.ru" }
],
[
{ text: "Yahoo! Messenger", url: "http://messenger.yahoo.ru" },
{ text: "Yahoo! 360", url: "http://360.yahoo.ru" },
{ text: "Yahoo! Groups", url: "http://groups.yahoo.ru" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }
]
]);
// Add the title for each group of menu items
oMenu.setItemGroupTitle("Yahoo! PIM", 0);
oMenu.setItemGroupTitle("Yahoo! Search", 1);
oMenu.setItemGroupTitle("Yahoo! Communications", 2);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Grouped Menu Items With Titles From Markup
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grouped Menu Items With Titles From Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Grouped Menu Items With Titles From Markup</h1>
<div class="exampleIntro">
<p>This example demonstrates how to title groups of MenuItem instances.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("menuwithgroups", function () {
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("menuwithgroups", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="menuwithgroups" class="yuimenu">
<div class="bd">
<h6 class="first-of-type">Yahoo! PIM</h6>
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.ru">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.ru">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.ru">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.ru">Yahoo! Notepad</a></li>
</ul>
<h6>Yahoo! Search</h6>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.ru">Yahoo! Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.ru">Yahoo! Maps</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.ru">Yahoo! Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.ru">Yahoo! Shopping</a></li>
</ul>
<h6>Yahoo! Communications</h6>
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.ru">Yahoo! Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.ru">Yahoo! 360</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.ru">Yahoo! Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.ru">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Handling Menu Click Events
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Handling Menu Click Events</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Handling Menu Click Events</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to register a "click" event handler for a
MenuItem instance.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
"click" event handler for the Menu instance - used to keep the Menu
instance visible when clicked, since by default a Menu instance
will hide when clicked.
*/
function onMenuClick(p_sType, p_aArgs, p_oValue) {
this.show();
}
/*
"click" event handler for each MenuItem instance - used to log
info about the MenuItem that was clicked.
*/
function onMenuItemClick(p_sType, p_aArgs, p_oValue) {
YAHOO.log(("index: " + this.index +
", text: " + this.cfg.getProperty("text") +
", value: " + p_oValue), "info", "example9");
}
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("mymenu", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
// Register a "click" event handler for the first item.
{ text: "Item One", onclick: { fn: onMenuItemClick } },
/*
Register a "click" event handler for the second item,
passing a string arguemnt ("foo") to the event handler.
*/
{ text: "Item Two", onclick: { fn: onMenuItemClick, obj: "foo" } },
/*
Register a "click" event handler for the third item and
passing and array as an argument to the event handler.
*/
{ text: "Item Three", onclick: { fn: onMenuItemClick, obj: ["foo", "bar"] } }
]);
oMenu.subscribe("click", onMenuClick);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Icon on a Menu bar
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
background-color: #dfb8df;
}
em#yahoolabel {
text-indent: -6em;
display: block;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) center center no-repeat;
width: 2em;
overflow: hidden;
}
/*
Setting the "zoom" property to "1" triggers the "hasLayout"
property in IE. This is necessary to fix a bug IE where
mousing mousing off a the text node of MenuItem instance"s
text label, or help text without the mouse actually exiting the
boundaries of the MenuItem instance will result in the losing
the background color applied when it is selected.
*/
#filemenu.visible .yuimenuitemlabel,
#editmenu.visible .yuimenuitemlabel {
*zoom: 1;
}
/*
Remove "hasLayout" from the submenu of the file menu.
*/
#filemenu.visible .yuimenu .yuimenuitemlabel {
*zoom: normal;
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize and render the MenuBar when the page"s DOM is ready
to be scripted.
*/
YAHOO.util.Event.onDOMReady(function () {
/*
Define an array of object literals, each containing
the data necessary to create the items for a MenuBar.
*/
var aItemData = [
{
text: "<em id=\"yahoolabel\">Yahoo!</em>",
submenu: {
id: "yahoo",
itemdata: [
"About Yahoo!",
"YUI Team Info",
"Preferences"
]
}
},
{
text: "File",
submenu: {
id: "filemenu",
itemdata: [
{ text: "New File", helptext: "Ctrl + N" },
"New Folder",
{ text: "Open", helptext: "Ctrl + O" },
{
text: "Open With...",
submenu: {
id: "applications",
itemdata: [
"Application 1",
"Application 2",
"Application 3",
"Application 4"
]
}
},
{ text: "Print", helptext: "Ctrl + P" }
]
}
},
{
text: "Edit",
submenu: {
id: "editmenu",
itemdata: [
[
{ text: "Undo", helptext: "Ctrl + Z" },
{ text: "Redo", helptext: "Ctrl + Y", disabled: true }
],
[
{ text: "Cut", helptext: "Ctrl + X", disabled: true },
{ text: "Copy", helptext: "Ctrl + C", disabled: true },
{ text: "Paste", helptext: "Ctrl + V" },
{ text: "Delete", helptext: "Del", disabled: true }
],
[ { text: "Select All", helptext: "Ctrl + A" } ],
[
{ text: "Find", helptext: "Ctrl + F" },
{ text: "Find Again", helptext: "Ctrl + G" }
]
] }
},
"View",
"Favorites",
"Tools",
"Help"
];
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenuBar = new YAHOO.widget.MenuBar("mymenubar", {
lazyload: true,
itemdata: aItemData
});
/*
Since this MenuBar instance is built completely from
script, call the "render" method passing in a node
reference for the DOM element that its should be
appended to.
*/
oMenuBar.render(document.body);
// Add a "show" event listener for each submenu.
function onSubmenuShow() {
var oIFrame,
oElement,
nOffsetWidth;
// Keep the left-most submenu against the left edge of the browser viewport
if (this.id == "yahoo") {
YAHOO.util.Dom.setX(this.element, 0);
oIFrame = this.iframe;
if (oIFrame) {
YAHOO.util.Dom.setX(oIFrame, 0);
}
this.cfg.setProperty("x", 0, true);
}
/*
Need to set the width for submenus of submenus in IE to prevent the mouseout
event from firing prematurely when the user mouses off of a MenuItem"s
text node.
*/
if ((this.id == "filemenu" || this.id == "editmenu") && YAHOO.env.ua.ie) {
oElement = this.element;
nOffsetWidth = oElement.offsetWidth;
/*
Measuring the difference of the offsetWidth before and after
setting the "width" style attribute allows us to compute the
about of padding and borders applied to the element, which in
turn allows us to set the "width" property correctly.
*/
oElement.style.width = nOffsetWidth + "px";
oElement.style.width = (nOffsetWidth - (oElement.offsetWidth - nOffsetWidth)) + "px";
}
}
// Subscribe to the "show" event for each submenu
oMenuBar.subscribe("show", onSubmenuShow);
var oPanel = new YAHOO.widget.Panel("exampleinfo", { constraintoviewport: true, fixedcenter: true, width: "400px", zIndex: 1});
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menu bar using JavaScript.");
oPanel.render(document.body);
});
</script>
</head>
<body class="yui-skin-sam">
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Listening For Menu Events
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Listening For Menu Events</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Listening For Menu Events</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to listen for DOM-related events. Interaction
with the Menu will result in event information being output to the console.
<em>Please note</em>: Disabled MenuItem instances do not fire DOM events. This
is demonstrated with the MenuItem named "MenuItem 2."
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Generic event handler used to log info about the DOM events for
the Menu instance.
*/
function onMenuEvent(p_sType, p_aArgs) {
var oDOMEvent = p_aArgs[0];
YAHOO.log(("Id: " + this.id + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type),
"info", "example10");
}
/*
Generic event handler used to log info about the DOM events for
each MenuItem instance.
*/
function onMenuItemEvent(p_sType, p_aArgs) {
var oDOMEvent = p_aArgs[0];
YAHOO.log(("Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"DOM Event Type: " + oDOMEvent.type
), "info", "example10");
}
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
// Subscribe to the Menu instance"s "itemAdded" event
oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
var oMenuItem = p_aArgs[0];
/*
Subscribe to each MenuItem instance"s DOM events as they
are added to the Menu instance.
*/
oMenuItem.subscribe("mouseover", onMenuItemEvent);
oMenuItem.subscribe("mouseout", onMenuItemEvent);
oMenuItem.subscribe("mousedown", onMenuItemEvent);
oMenuItem.subscribe("mouseup", onMenuItemEvent);
oMenuItem.subscribe("click", onMenuItemEvent);
oMenuItem.subscribe("keydown", onMenuItemEvent);
oMenuItem.subscribe("keyup", onMenuItemEvent);
oMenuItem.subscribe("keypress", onMenuItemEvent);
});
// Subscribe to every DOM event for the Menu instance.
oMenu.subscribe("mouseover", onMenuEvent);
oMenu.subscribe("mouseout", onMenuEvent);
oMenu.subscribe("mousedown", onMenuEvent);
oMenu.subscribe("mouseup", onMenuEvent);
oMenu.subscribe("click", onMenuEvent);
oMenu.subscribe("keydown", onMenuEvent);
oMenu.subscribe("keyup", onMenuEvent);
oMenu.subscribe("keypress", onMenuEvent);
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
"MenuItem 0",
"MenuItem 1",
/*
Add a disabled menu item to demonstrate that disabled
items do not respond to DOM events.
*/
{ text: "MenuItem 2", disabled: true },
"MenuItem 3",
"MenuItem 4"
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multi-tiered Menu From Markup</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Position and hide the Menu instance to prevent a flash of unstyled
content when the page is loading.
*/
div.yuimenu {
position: absolute;
visibility: hidden;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Multi-tiered Menu From Markup</h1>
<div class="exampleIntro">
<p>This example demonstrates how to create a multi-tiered menu using existing markup on the page.</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// Instantiate and render the menu when it is available in the DOM
YAHOO.util.Event.onContentReady("productsandservices", function () {
/*
Instantiate the menu and corresponding submenus. The first argument passed
to the constructor is the id of the element in the DOM that represents
the menu; the second is an object literal representing a set of
configuration properties for the menu.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
/*
Call the "render" method with no arguments since the
markup for this Menu instance is already exists in the page.
*/
oMenu.render();
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="productsandservices" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#communication">Communication</a>
<div id="communication" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://360.yahoo.ru">360°</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://alerts.yahoo.ru">Alerts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://avatars.yahoo.ru">Avatars</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://groups.yahoo.ru">Groups</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://promo.yahoo.ru/broadband/">Internet Access</a></li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#pim">PIM</a>
<div id="pim" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.ru">Yahoo! Mail</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.ru">Yahoo! Address Book</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://calendar.yahoo.ru">Yahoo! Calendar</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://notepad.yahoo.ru">Yahoo! Notepad</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://members.yahoo.ru">Member Directory</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://messenger.yahoo.ru">Messenger</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mobile.yahoo.ru">Mobile</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.flickr.ru">Flickr Photo Sharing</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="http://shopping.yahoo.ru">Shopping</a>
<div id="shopping" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://auctions.shopping.yahoo.ru">Auctions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://autos.yahoo.ru">Autos</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://classifieds.yahoo.ru">Classifieds</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735">Flowers & Gifts</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://realestate.yahoo.ru">Real Estate</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.ru">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://wallet.yahoo.ru">Wallet</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://yp.yahoo.ru">Yellow Pages</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="http://entertainment.yahoo.ru">Entertainment</a>
<div id="entertainment" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://fantasysports.yahoo.ru">Fantasy Sports</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://games.yahoo.ru">Games</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://www.yahooligans.ru">Kids</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.ru">Music</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://movies.yahoo.ru">Movies</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://music.yahoo.ru/launchcast">Radio</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://travel.yahoo.ru">Travel</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://tv.yahoo.ru">TV</a></li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">
<a class="yuimenuitemlabel" href="#information">Information</a>
<div id="information" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://downloads.yahoo.ru">Downloads</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://finance.yahoo.ru">Finance</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://health.yahoo.ru">Health</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://local.yahoo.ru">Local</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://maps.yahoo.ru">Maps & Directions</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://my.yahoo.ru">My Yahoo!</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://news.yahoo.ru">News</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://search.yahoo.ru">Search</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://smallbusiness.yahoo.ru">Small Business</a></li>
<li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://weather.yahoo.ru">Weather</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Multi-tiered Menu From JavaScript</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Multi-tiered Menu From JavaScript</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a multi-tiered menu using nothing
but JavaScript.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Define an array of object literals, each containing
the configuration properties necessary to create a MenuItem and
its corresponding submenu.
*/
var aItems = [
{
text: "Communication",
url: "#communication",
submenu: {
id: "communication",
itemdata: [
{ text: "360", url: "http://360.yahoo.ru" },
{ text: "Alerts", url: "http://alerts.yahoo.ru" },
{ text: "Avatars", url: "http://avatars.yahoo.ru" },
{ text: "Groups", url: "http://groups.yahoo.ru " },
{ text: "Internet Access", url: "http://promo.yahoo.ru/broadband" },
{
text: "PIM",
url: "#pim",
submenu: {
id: "pim",
itemdata: [
{ text: "Yahoo! Mail", url: "http://mail.yahoo.ru" },
{ text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" },
{ text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" },
{ text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" }
]
}
},
{ text: "Member Directory", url: "http://members.yahoo.ru" },
{ text: "Messenger", url: "http://messenger.yahoo.ru" },
{ text: "Mobile", url: "http://mobile.yahoo.ru" },
{ text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }
]
}
},
{
text: "Shopping",
url: "http://shopping.yahoo.ru",
submenu: {
id: "shopping",
itemdata: [
{ text: "Auctions", url: "http://auctions.shopping.yahoo.ru" },
{ text: "Autos", url: "http://autos.yahoo.ru" },
{ text: "Classifieds", url: "http://classifieds.yahoo.ru" },
{ text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" },
{ text: "Real Estate", url: "http://realestate.yahoo.ru" },
{ text: "Travel", url: "http://travel.yahoo.ru" },
{ text: "Wallet", url: "http://wallet.yahoo.ru" },
{ text: "Yellow Pages", url: "http://yp.yahoo.ru" }
]
}
},
{
text: "Entertainment",
url: "http://entertainment.yahoo.ru",
submenu: {
id: "entertainment",
itemdata: [
{ text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" },
{ text: "Games", url: "http://games.yahoo.ru" },
{ text: "Kids", url: "http://www.yahooligans.ru" },
{ text: "Music", url: "http://music.yahoo.ru" },
{ text: "Movies", url: "http://movies.yahoo.ru" },
{ text: "Radio", url: "http://music.yahoo.ru/launchcast" },
{ text: "Travel", url: "http://travel.yahoo.ru" },
{ text: "TV", url: "http://tv.yahoo.ru" }
]
}
},
{
text: "Information",
url: "#information",
submenu: {
id: "information",
itemdata: [
{ text: "Downloads", url: "http://downloads.yahoo.ru" },
{ text: "Finance", url: "http://finance.yahoo.ru" },
{ text: "Health", url: "http://health.yahoo.ru" },
{ text: "Local", url: "http://local.yahoo.ru" },
{ text: "Maps & Directions", url: "http://maps.yahoo.ru" },
{ text: "My Yahoo!", url: "http://my.yahoo.ru" },
{ text: "News", url: "http://news.yahoo.ru" },
{ text: "Search", url: "http://search.yahoo.ru" },
{ text: "Small Business", url: "http://smallbusiness.yahoo.ru" },
{ text: "Weather", url: "http://weather.yahoo.ru" }
]
}
}
];
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems(aItems);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
OS-Style Programs Menu
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!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="yui_2.7.0b-lib/reset/reset.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
html {
overflow: hidden;
background-color: #dfb8df;
}
h1 {
font-weight: bold;
}
body {
overflow: hidden;
}
/* Define a style for the <H1> "toolbar" */
.ytoolbar {
border-top-width: 2px;
border-top-color: #ddd;
border-top-style: solid;
background-color: #ccc;
position: absolute;
bottom: 0;
width: 100%;
}
/* Style the "Yahoo!" anchor to look like a button */
.ytoolbar #yahoo {
border-width: 2px;
border-color: #ddd #666 #666 #ddd;
border-style: solid;
float: left;
*float: none; /* For IE */
*display: inline-block; /* For IE */
padding: 4px 12px 4px 28px;
margin: 4px;
background-color: #ccc;
color: #000;
text-decoration: none;
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) 10% 50% no-repeat;
}
.ytoolbar #yahoo: active {
border-color: #666 #ddd #ddd #666;
}
/* Define a new style for each menu */
.yui-skin-sam .yuimenu {
line-height: 2; /* ~24px */
*line-height: 1.9; /* For IE */
}
.yui-skin-sam .yuimenu .bd {
border-width: 2px;
border-color: #ddd #666 #666 #ddd;
border-style: solid;
background-color: #ccc;
}
/* Define a new style for each MenuItem instance. */
.yui-skin-sam #yproducts li.yuimenuitem .yuimenuitemlabel {
background: url(http://us.i1.yimg.ru/us.yimg.ru/i/us/nt/b/purpley.1.0.gif) no-repeat 4px;
padding: 0 20px 0 24px;
}
.yui-skin-sam #yproducts li.yuimenuitem {
/*
For IE 7 Quirks and IE 6 Strict Mode and Quirks Mode:
Used to collapse superfluous white space between <li>
elements that is triggered by the "display" property of the
<a> elements being set to "block."
*/
_border-bottom: solid 1px #ccc;
}
/* Define a new style for a MenuItem instance"s "selected" state. */
.yui-skin-sam #yproducts .yuimenuitem-selected {
background-color: #039;
}
.yui-skin-sam #yproducts .yuimenuitemlabel-selected {
color: #fff;
}
/* Add unique icons to some of the MenuItem instances. */
.yui-skin-sam #yproducts li#help .yuimenuitemlabel {
background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/hlp16_1.gif);
}
.yui-skin-sam #yproducts li#search .yuimenuitemlabel {
background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/srch16_1.gif);
}
.yui-skin-sam #yproducts li#goto .yuimenuitemlabel {
background-image: url(http://us.i1.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/arorght16_1.gif);
}
</style>
<!-- Dependency source files -->
<script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/*
Initialize and render the MenuBar when its elements are ready
to be scripted.
*/
YAHOO.util.Event.onContentReady("yproducts", function () {
var oPanel = new YAHOO.widget.Panel(
"exampleinfo",
{
constraintoviewport: true,
fixedcenter: true,
width: "400px",
zindex: 1
}
);
oPanel.setHeader("OS-Style Programs Menu Example");
oPanel.setBody("This example demonstrates how to transform existing markup on the page into an operating-system-like menu.");
oPanel.render(document.body);
/*
Apply the "ytoolbar" class to the <H1> so that it is styled
like an application toolbar.
*/
var oH1 = document.getElementsByTagName("h1")[0];
YAHOO.util.Dom.addClass(oH1, "ytoolbar");
/*
Instantiate a Menu: The first argument passed to the
constructor is the id of the element in the page
representing the Menu; the second is an object literal
of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("yproducts", { zindex: 2 });
/*
Aligns the bottom-left corner of Menu instance to the
top-left corner of the Yahoo! anchor element that is
its context element.
*/
function positionMenu() {
oMenu.align("bl", "tl");
}
// "click" handler for the "Go to..." menu item
function onGotoClick() {
var sURL = window.prompt("Enter a URL: ","");
if (sURL && sURL.length > 0) {
document.location = sURL;
}
}
/*
Add an additional item to the Menu instance. Unlike the
other items in the Menu instance, this item is added via
script since its functionality requires JavaScript.
*/
oMenu.addItem({ text: "Go to...", id: "goto", onclick: { fn: onGotoClick } });
/*
"beforeShow" event listener - used to position the
root Menu instance when it is displayed.
*/
oMenu.subscribe("beforeShow", function () {
if (this.getRoot() == this) {
positionMenu();
}
});
/*
Call the "render" method with no arguments since the
markup for this menu already exists in the pages.
*/
oMenu.render();
/*
Position the bottom-left corner of the root menu to the
top-left corner of the "Yahoo!" anchor element.
*/
oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
// "click" event handler for "Yahoo!" button
function onYahooClick(p_oEvent) {
// Position and display the menu
positionMenu();
oMenu.show();
// Stop propagation and prevent the default "click" behavior
YAHOO.util.Event.stopEvent(p_oEvent);
}
/*
Assign a "click" event handler to the "Yahoo!" anchor that
will display the menu
*/
YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);
/*
Add a "resize" event handler for the window that will
reposition the H1 "toolbar" to the bottom of the viewport
*/
YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionMenu);
});
</script>
</head>
<body class="yui-skin-sam">
<h1><a id="yahoo" href="http://www.yahoo.ru">Yahoo!</a></h1>
<div id="yproducts">
<div class="bd">
<ul>
<li><a href="#">Products</a>
<div id="products">
<div class="bd">
<ul>
<li><a href="http://mail.yahoo.ru">Yahoo! Mail</a></li>
<li><a href="http://addressbook.yahoo.ru">Yahoo! Address Book</a></li>
<li><a href="http://calendar.yahoo.ru">Yahoo! Calender</a></li>
<li><a href="http://notepad.yahoo.ru">Yahoo! Notepad</a></li>
<li><a href="http://messenger.yahoo.ru">Yahoo! Messenger</a></li>
<li><a href="http://360.yahoo.ru">Yahoo! 360</a></li>
<li><a href="http://www.flickr.ru">Flickr Photo Sharing</a></li>
<li><a href="http://finance.yahoo.ru/">Finance</a></li>
<li><a href="http://entertainment.yahoo.ru/">Entertainment</a>
<div id="entertainmentproducts">
<div class="bd">
<ul>
<li><a href="http://music.yahoo.ru/">Yahoo! Music</a></li>
<li><a href="http://movies.yahoo.ru/">Yahoo! Movies</a></li>
<li><a href="http://tv.yahoo.ru/">Yahoo! TV</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li id="search"><a href="http://search.yahoo.ru/">Search</a>
<div id="searchproducts">
<div class="bd">
<ul>
<li><a href="http://images.search.yahoo.ru/images">Yahoo! Image Search</a></li>
<li><a href="http://dir.yahoo.ru/">Yahoo! Directory</a></li>
<li><a href="http://local.yahoo.ru">Yahoo! Local</a></li>
<li><a href="http://news.search.yahoo.ru/news">Yahoo! News Search</a></li>
<li><a href="http://search.yahoo.ru/people">Yahoo! People Search</a></li>
<li><a href="http://search.yahoo.ru/products">Yahoo! Product Search</a></li>
</ul>
</div>
</div>
</li>
<li id="help"><a href="http://help.yahoo.ru/">Help</a></li>
</ul>
</div>
</div>
</body>
</html><!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Set MenuItem configuration properties when adding items to a Menu instance.
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>MenuItem Configuration Properties</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.yui-skin-sam .yuimenuitemlabel .helptext {
margin-left: 20em;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>MenuItem Configuration Properties</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to set MenuItem configuration properties when
adding items to a Menu instance.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a Menu instance will hide it.
Additionally, MenuItem instances without a submenu or a URL to navigate to will
hide their parent Menu instance when clicked. Click the "Show Menu" button
below to make the Menu instance visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true } );
/*
Add items to the Menu instance by passing an array of object literals
(each of which represents a set of YAHOO.widget.MenuItem
configuration properties) to the "addItems" method.
*/
oMenu.addItems([
{ text: "Selected MenuItem", selected: true },
{ text: "Disabled MenuItem", disabled: true },
{ text: "MenuItem With A URL", url: "http://www.yahoo.ru" },
{ text: "Checked MenuItem", checked: true }
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Setting Menu Configuration Properties At Runtime
<!--
Software License Agreement (BSD License)
Copyright (c) 2009, Yahoo! Inc.
All rights reserved.
Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of Yahoo! Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission of Yahoo! Inc.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
Sources of Intellectual Property Included in the YUI Library
YUI is issued by Yahoo! under the BSD license above. Below is a list of certain publicly available software that is the source of intellectual property in YUI, along with the licensing terms that pertain to thosesources of IP. This list is for informational purposes only and is not intended to represent an exhaustive list of third party contributions to the YUI.
* Douglas Crockford"s JSON parsing and stringifying methods: In the JSON Utility, Douglas Crockford"s JSON parsing and stringifying methods are adapted from work published at JSON.org. The adapted work is in the public domain.
* Robert Penner"s animation-easing algorithms: In the Animation Utility, YUI makes use of Robert Penner"s algorithms for easing.
* Geoff Stearns"s SWFObject: In the Charts Control and the Uploader versions through 2.7.0, YUI makes use of Geoff Stearns"s SWFObject v1.5 for Flash Player detection and embedding. More information on SWFObject can be found here (http://blog.deconcept.ru/swfobject/). SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License (http://www.opensource.org/licenses/mit-license.php).
* Diego Perini"s IEContentLoaded technique: The Event Utility employs a technique developed by Diego Perini and licensed under GPL. YUI"s use of this technique is included under our BSD license with the author"s permission.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Setting Menu Configuration Properties At Runtime</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/container/container_core-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance"s width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/*
Overrides for the ".example-container a:visited" in the
the yui.css file.
*/
div.yuimenu a.yuimenuitemlabel-disabled:visited {
color: #A6A6A6;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Setting Menu Configuration Properties At Runtime</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to set MenuItem configuration properties at
runtime and listen for the changes through the "configChanged" event.
</p>
<p id="clicknote">
<em>Note:</em> By default clicking outside of a menu will hide it.
Additionally, menu items without a submenu or a URL to navigate to will hide their
parent menu when clicked. Click the "Show Menu" button below to make the menu
visible if it is hidden.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
/*
Initialize and render the Menu when the element it is to be
rendered into is ready to be scripted.
*/
YAHOO.util.Event.onAvailable("rendertarget", function () {
/*
"configChange" event handler for each MenuItem instance - used
to log info about the configuration property that was changed.
*/
function onMenuItemConfigChange(p_sType, p_aArgs) {
var sPropertyName = p_aArgs[0][0],
sPropertyValue = p_aArgs[0][1];
YAHOO.log(("Index: " + this.index + ", " +
"Group Index: " + this.groupIndex + ", " +
"Custom Event Type: " + p_sType + ", " +
"\"" + sPropertyName + "\" Property Set To: \""
+ sPropertyValue + "\""), "info", "example12");
}
/*
Instantiate a Menu: The first argument passed to the constructor
is the id for the Menu element to be created, the second is an
object literal of configuration properties.
*/
var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter: true });
/*
Subscribe to the Menu instance"s "itemAdded" event in order to
subscribe to the "configChange" event handler of each MenuItem
instance"s configuration object.
*/
oMenu.subscribe("itemAdded", function (p_sType, p_aArgs) {
var oMenuItem = p_aArgs[0];
/*
Subscribe to the "configChange" event handler of each MenuItem
instance"s configuration object.
*/
oMenuItem.cfg.subscribe("configChanged", onMenuItemConfigChange);
});
/*
Add items to the Menu instance by passing an array of strings
(each of which represents the "text" configuration property of a
YAHOO.widget.MenuItem instance) to the "addItems" method.
*/
oMenu.addItems([
"Selected MenuItem",
"Disabled MenuItem",
"MenuItem With A URL",
"Checked MenuItem"
]);
/*
Since this Menu instance is built completely from script, call the
"render" method passing in the DOM element that it should be
appended to.
*/
oMenu.render("rendertarget");
/*
Set a configuration property of each MenuItem to trigger the firing
of its configuration object"s "configChanged" event.
*/
oMenu.getItem(0).cfg.setProperty("selected", true);
oMenu.getItem(1).cfg.setProperty("disabled", true);
oMenu.getItem(2).cfg.setProperty("url", "http://www.yahoo.ru");
oMenu.getItem(3).cfg.setProperty("checked", true);
YAHOO.util.Event.addListener("menutoggle", "click", oMenu.show, null, oMenu);
});
</script>
<button id="menutoggle" type="button">Show Menu</button>
<div id="rendertarget"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:17 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
