JavaScript DHTML/YUI Library/DropDown Button
Содержание
- 1 Combine a Split Button with a Slider to create an opacity slider button, similar to Adobe Photoshop
- 2 Create a Menu Button whose Menu instance displays a Calendar
- 3 Create and use a Menu Button from HTML markup
- 4 Create and use a Menu Button from Javascript
- 5 Create and use a Split Button from HTML markup
- 6 Create and use a Split Button from Javascript
- 7 Dropdown Button based color picker
- 8 Dropdown button with slider
- 9 Fixed Width Menu Button
- 10 Lazy load on/off and dropdown button
- 11 Replace the content of a dropdown Button"s Menu on the fly
Combine a Split Button with a Slider to create an opacity slider button, similar to Adobe Photoshop
<!--
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>Slider Button</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/slider/assets/skins/sam/slider.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<!--begin custom header content for this example-->
<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;
}
#example {
padding: 1em;
}
#photo {
border: solid 1px #000;
}
/*
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 the <div> element containing the Button instance */
#opacitycontrols {
border-top: solid 1px #000;
padding: .5em .25em;
margin-top: .5em;
}
/* Style the Slider instance */
#slider-bg {
position: relative;
background: url(yui_2.7.0b-assets/button-assets/bg-fader.gif) 7px 12px no-repeat;
height: 28px;
width: 217px;
}
#slider-thumb {
cursor: default;
position: absolute;
top: 4px;
}
/*
Give the <em> element wrapping the Button instance"s text label a
fixed width so that the Button doesn"t grow or shrink as the
text label is updated.
*/
#opacitybutton-currentopacity {
width: 3em;
font-style: normal;
display: block;
text-align: left;
}
#opacitybutton {
vertical-align: middle;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Slider Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to combine a Split Button with a Slider to
create an opacity slider button, similar to that found in Adobe Photoshop.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event;
Event.onContentReady("example", function () {
var Dom = YAHOO.util.Dom,
oSlider;
/*
Create a <div> element to house a Button instance and its
corresponding <label> element.
*/
var oDIV = document.createElement("div")
oDIV.id = "opacitycontrols";
oDIV.innerHTML = "<label for=\"opacitybutton-button\">Opacity:</label>";
Dom.get("example").appendChild(oDIV);
/*
Create a Menu instance whose body element will house a
Slider instance.
*/
var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" });
/*
Create a new Button instance, wrapping the label in an
<em> element. The <em> element will be used to give the
Button instance a fixed width to prevent it from growing
and shrinking as the text label is updated.
*/
var oButton = new YAHOO.widget.Button({
type: "menu",
id: "opacitybutton",
label: "<em id=\"opacitybutton-currentopacity\">100%</em>",
menu: oOpacityMenu,
container: "opacitycontrols" });
/*
Maintain a reference to the <em> element inside the label
so that its text can easily be updated in response to the firing
of the Slider instance"s "change" event.
*/
var oCurrentOpacity;
oButton.on("appendTo", function () {
// Add Slider markup to the Menu instance"s body element
oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"yui_2.7.0b-assets/button-assets/thumb-n.gif\"></div></div>");
/*
Render the Menu instance into the element specified as the
Button instance"s container
*/
oOpacityMenu.render(this.get("container"));
oCurrentOpacity = Dom.get("opacitybutton-currentopacity");
});
/*
Give the Button instance"s <button> element an id so that
clicking its corresponding <label> element will result in the
Button instance receiving focus.
*/
var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0];
oHTMLButton.id = "opacitybutton-button";
/*
Add a "beforeShow" event handler to the Menu instance that
will instantiate the Slider.
*/
var onMenuBeforeShow = function () {
// Instantiate the Slider
oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1);
// Set the initial value of the Slider instance
oSlider.setValue(200, true);
// Maintain a reference to the Slider instance"s root element
var oSliderEl = Dom.get("slider-bg");
// Subscribe to the Slider instance"s "change" event
oSlider.subscribe("change", function() {
/*
Divide the pixel offset in half to get a value between
0 and 100 - used to convey the current opacity via the
Button instance"s label.
*/
var nValue = (Math.round(oSlider.getValue() * .5)),
/*
Divide by 100 in order to set provide a compatible
value for the CSS "opacity" property.
*/
nOpacity = (nValue * .01);
/*
Update the title attribute of the Slider instance"s
root element. This helps assistive technology to
communicate the state change.
*/
oSliderEl.title = "slider value = " + Math.round(nOpacity);
// Set the opacity of the photo
Dom.setStyle("photo", "opacity", nOpacity);
// Update the text label of the Button instance
oCurrentOpacity.innerHTML = (nValue + "%");
});
var focusSlider = function () {
if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {
window.setTimeout(function () {
oSliderEl.focus();
}, 0);
}
};
focusSlider();
// Focus the Slider instance each time it is made visible
oOpacityMenu.subscribe("show", focusSlider);
// Unsubscribe from the "beforeShow" event, since we only need to initialize the
// Slider once.
oOpacityMenu.unsubscribe("beforeShow", onMenuBeforeShow);
};
oOpacityMenu.subscribe("beforeShow", onMenuBeforeShow);
});
})();
</script>
<div id="example"><a href="http://www.flickr.ru/photos/toddlr/477993821/" title="Photo Sharing"><img id="photo" src="http://farm1.static.flickr.ru/198/477993821_0079194851.jpg" width="500" height="375" alt="Ella - A Shih Tzu + Maltese Mix Puppy"></a></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 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 Button whose Menu instance displays a Calendar
<!--
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>Simple Calendar Menu Button</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/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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/calendar/calendar-min.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/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
/*
Restore default padding of 10px for the calendar containtainer
that is overridden by the ".example-container .bd .bd" rule
in yui.css.
*/
#calendarcontainer {
padding:10px;
}
#calendarmenu {
position: absolute;
}
#calendarpicker button {
background: url(yui_2.7.0b-assets/button-assets/calendar_icon.gif) center center no-repeat;
text-align: left;
text-indent: -10em;
overflow: hidden;
*margin-left: 10em; /* For IE */
*padding: 0 3em; /* For IE */
white-space: nowrap;
}
#month-field,
#day-field {
width: 2em;
}
#year-field {
width: 3em;
}
#datefields {
border: solid 1px #666;
padding: .5em;
}
#calendarpicker {
vertical-align: baseline;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Simple Calendar Menu Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
(function () {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom;
Event.onDOMReady(function () {
var oCalendarMenu;
var onButtonClick = function () {
// Create a Calendar instance and render it into the body
// element of the Overlay.
var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
oCalendar.render();
// Subscribe to the Calendar instance"s "select" event to
// update the month, day, year form fields when the user
// selects a date.
oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
var aDate;
if (p_aArgs) {
aDate = p_aArgs[0][0];
Dom.get("month-field").value = aDate[1];
Dom.get("day-field").value = aDate[2];
Dom.get("year-field").value = aDate[0];
}
oCalendarMenu.hide();
});
// Pressing the Esc key will hide the Calendar Menu and send focus back to
// its parent Button
Event.on(oCalendarMenu.element, "keydown", function (p_oEvent) {
if (Event.getCharCode(p_oEvent) === 27) {
oCalendarMenu.hide();
this.focus();
}
}, null, this);
var focusDay = function () {
var oCalendarTBody = Dom.get("buttoncalendar").tBodies[0],
aElements = oCalendarTBody.getElementsByTagName("a"),
oAnchor;
if (aElements.length > 0) {
Dom.batch(aElements, function (element) {
if (Dom.hasClass(element.parentNode, "today")) {
oAnchor = element;
}
});
if (!oAnchor) {
oAnchor = aElements[0];
}
// Focus the anchor element using a timer since Calendar will try
// to set focus to its next button by default
YAHOO.lang.later(0, oAnchor, function () {
try {
oAnchor.focus();
}
catch(e) {}
});
}
};
// Set focus to either the current day, or first day of the month in
// the Calendar when it is made visible or the month changes
oCalendarMenu.subscribe("show", focusDay);
oCalendar.renderEvent.subscribe(focusDay, oCalendar, true);
// Give the Calendar an initial focus
focusDay.call(oCalendar);
// Re-align the CalendarMenu to the Button to ensure that it is in the correct
// position when it is initial made visible
oCalendarMenu.align();
// Unsubscribe from the "click" event so that this code is
// only executed once
this.unsubscribe("click", onButtonClick);
};
// Create an Overlay instance to house the Calendar instance
oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible: false });
// Create a Button instance of type "menu"
var oButton = new YAHOO.widget.Button({
type: "menu",
id: "calendarpicker",
label: "Choose A Date",
menu: oCalendarMenu,
container: "datefields" });
oButton.on("appendTo", function () {
// Create an empty body element for the Overlay instance in order
// to reserve space to render the Calendar instance into.
oCalendarMenu.setBody(" ");
oCalendarMenu.body.id = "calendarcontainer";
});
// Add a "click" event listener that will render the Overlay, and
// instantiate the Calendar the first time the Button instance is
// clicked.
oButton.on("click", onButtonClick);
});
}());
</script>
<div>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="datefields">
<legend>Date</legend>
<label for="month-field">Month: </label> <input id="month-field" type="text" name="month">
<label for="day-field">Day:</label> <input id="day-field" type="text" name="day">
<label for="year-field">Year: </label> <input id="year-field" type="text" name="year">
</fieldset>
</form>
</div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 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 and use a Menu Button from HTML 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>Menu Buttons</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#menubutton3menu,
#menubutton4menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Menu Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create and use a Menu Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
// Create a Button using an existing <input> and <select> element.
// Because the "type" attribute of the <input> element was set to
// "submit" - clicking on any MenuItem in the Button"s Menu will
// automatically submit the Button"s parent <form>.
var oMenuButton1 = new YAHOO.widget.Button("menubutton1",
{ type: "menu", menu: "menubutton1select" });
// "render" event handler for the Button"s Menu
var onMenuRender = function (p_sType, p_aArgs) {
this.addItems([
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
};
// Add some additional MenuItems to the Button"s Menu once it has
// been rendered
oMenuButton1.getMenu().subscribe("render", onMenuRender);
// "submit" event handler for the <form>
var onExampleSubmit = function(p_oEvent) {
var bSubmit =
window.confirm("Are you sure you want to submit the form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
};
// Add a "submit" event handler to the <form> to confirm that
// clicking on one of the MenuItems in the Button"s Menu
// submits the <form>.
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
// Create a Button using an existing <input> and <select> element
var oMenuButton2 = new YAHOO.widget.Button("menubutton2",
{ type: "menu", menu: "menubutton2select" });
// "click" event listener for the second Button"s Menu instance
var onMenuClick = function (p_sType, p_aArgs) {
var oEvent = p_aArgs[0], // DOM event
oMenuItem = p_aArgs[1]; // MenuItem instance that was the
// target of the event
if (oMenuItem) {
alert("[MenuItem Properties] text: " +
oMenuItem.cfg.getProperty("text") + ", value: " +
oMenuItem.value);
}
};
// Add a "click" event listener for the Button"s Menu
oMenuButton2.getMenu().subscribe("click", onMenuClick);
// Create a Button using an existing <input> element and a
// YAHOO.widget.Overlay instance as its menu
var oMenuButton3 = new YAHOO.widget.Button("menubutton3",
{ type: "menu", menu: "menubutton3menu" });
// "click" event listener for the third Button"s
// menu (Overlay instance)
var onOverlayClick = function (p_oEvent) {
alert("You clicked the Button"s menu.");
};
// Add a "click" event listener to the Button"s menu (Overlay instance)
YAHOO.util.Event.on(oMenuButton3.getMenu().element,
"click", onOverlayClick);
// "show" event listener for the third Button"s menu (Overlay instance)
var onOverlayShow = function (p_sType, p_aArgs) {
alert("The Button"s menu is now visible.");
};
// Add a listener for the Button"s "show" event
oMenuButton3.getMenu().subscribe("show", onOverlayShow);
});
// Search for an element to place the Menu Button into via the
// Event utility"s "onContentReady" method
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
// Create two Buttons without using existing markup
// Instantiate an Overlay instance
var oOverlay = new YAHOO.widget.Overlay("menubutton4menu",
{ visible: false });
oOverlay.setBody("Menu Button 4 Menu");
// Instantiate a Menu Button
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu",
label: "Menu Button 4",
menu: oOverlay,
container: this });
// "click" event handler for each item in the Button"s menu
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
var sText = p_oItem.cfg.getProperty("text");
alert("[MenuItem Properties] text: " + sText + ", value: " +
p_oItem.value);
oMenuButton5.set("label", sText);
};
// Create an array of YAHOO.widget.MenuItem configuration properties
var aMenuButton5Menu = [
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
];
// Instantiate a Menu Button using the array of YAHOO.widget.MenuItem
// configuration properties as the value for the "menu"
// configuration attribute.
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu",
label: "One",
name: "mymenubutton",
menu: aMenuButton5Menu,
container: this });
});
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="menubuttons">
<legend>Menu Buttons</legend>
<fieldset id="menubuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="menubutton1" name="menubutton1_button" value="Menu Button 1">
<select id="menubutton1select" name="menubutton1select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton2" name="menubutton2_button" value="Menu Button 2">
<select id="menubutton2select" name="menubutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton3" name="menubutton3_button" value="Menu Button 3">
<div id="menubutton3menu" class="yui-overlay">
<div class="bd">Menu Button 3 Menu</div>
</div>
</fieldset>
<fieldset id="menubuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 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 and use a Menu Button 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>Menu Buttons</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#menubutton3menu,
#menubutton4menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Menu Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create and use a Menu Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// "contentready" event handler for the "menubuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
// Create a Button using an existing <input> and <select> element.
// Because the "type" attribute of the <input> element was set to
// "submit" - clicking on any MenuItem in the Button"s Menu will
// automatically submit the Button"s parent <form>.
var oMenuButton1 = new YAHOO.widget.Button("menubutton1",
{ type: "menu", menu: "menubutton1select" });
// "render" event handler for the Button"s Menu
var onMenuRender = function (p_sType, p_aArgs) {
this.addItems([
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
};
// Add some additional MenuItems to the Button"s Menu once it has
// been rendered
oMenuButton1.getMenu().subscribe("render", onMenuRender);
// "submit" event handler for the <form>
var onExampleSubmit = function(p_oEvent) {
var bSubmit =
window.confirm("Are you sure you want to submit the form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
};
// Add a "submit" event handler to the <form> to confirm that
// clicking on one of the MenuItems in the Button"s Menu
// submits the <form>.
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
// Create a Button using an existing <input> and <select> element
var oMenuButton2 = new YAHOO.widget.Button("menubutton2",
{ type: "menu", menu: "menubutton2select" });
// "click" event listener for the second Button"s Menu instance
var onMenuClick = function (p_sType, p_aArgs) {
var oEvent = p_aArgs[0], // DOM event
oMenuItem = p_aArgs[1]; // MenuItem instance that was the
// target of the event
if (oMenuItem) {
alert("[MenuItem Properties] text: " +
oMenuItem.cfg.getProperty("text") + ", value: " +
oMenuItem.value);
}
};
// Add a "click" event listener for the Button"s Menu
oMenuButton2.getMenu().subscribe("click", onMenuClick);
// Create a Button using an existing <input> element and a
// YAHOO.widget.Overlay instance as its menu
var oMenuButton3 = new YAHOO.widget.Button("menubutton3",
{ type: "menu", menu: "menubutton3menu" });
// "click" event listener for the third Button"s
// menu (Overlay instance)
var onOverlayClick = function (p_oEvent) {
alert("You clicked the Button"s menu.");
};
// Add a "click" event listener to the Button"s menu (Overlay instance)
YAHOO.util.Event.on(oMenuButton3.getMenu().element,
"click", onOverlayClick);
// "show" event listener for the third Button"s menu (Overlay instance)
var onOverlayShow = function (p_sType, p_aArgs) {
alert("The Button"s menu is now visible.");
};
// Add a listener for the Button"s "show" event
oMenuButton3.getMenu().subscribe("show", onOverlayShow);
});
// Search for an element to place the Menu Button into via the
// Event utility"s "onContentReady" method
YAHOO.util.Event.onContentReady("menubuttonsfromjavascript", function () {
// Create two Buttons without using existing markup
// Instantiate an Overlay instance
var oOverlay = new YAHOO.widget.Overlay("menubutton4menu",
{ visible: false });
oOverlay.setBody("Menu Button 4 Menu");
// Instantiate a Menu Button
var oMenuButton4 = new YAHOO.widget.Button({ type: "menu",
label: "Menu Button 4",
menu: oOverlay,
container: this });
// "click" event handler for each item in the Button"s menu
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
var sText = p_oItem.cfg.getProperty("text");
alert("[MenuItem Properties] text: " + sText + ", value: " +
p_oItem.value);
oMenuButton5.set("label", sText);
};
// Create an array of YAHOO.widget.MenuItem configuration properties
var aMenuButton5Menu = [
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
];
// Instantiate a Menu Button using the array of YAHOO.widget.MenuItem
// configuration properties as the value for the "menu"
// configuration attribute.
var oMenuButton5 = new YAHOO.widget.Button({ type: "menu",
label: "One",
name: "mymenubutton",
menu: aMenuButton5Menu,
container: this });
});
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="menubuttons">
<legend>Menu Buttons</legend>
<fieldset id="menubuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="menubutton1" name="menubutton1_button" value="Menu Button 1">
<select id="menubutton1select" name="menubutton1select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton2" name="menubutton2_button" value="Menu Button 2">
<select id="menubutton2select" name="menubutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="menubutton3" name="menubutton3_button" value="Menu Button 3">
<div id="menubutton3menu" class="yui-overlay">
<div class="bd">Menu Button 3 Menu</div>
</div>
</fieldset>
<fieldset id="menubuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 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 and use a Split Button from HTML 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>Split Buttons</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#splitbutton3menu,
#splitbutton4menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Split Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create and use a Split Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
// Create a Button using an existing <input> and <select> element.
// Because the "type" attribute of the <input> element was set to
// "submit" - clicking on any MenuItem in the Button"s Menu will
// automatically submit the Button"s parent <form>.
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
// "render" event handler for the Button"s Menu
var onMenuRender = function (p_sType, p_aArgs) {
this.addItems([
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
};
// Add some additional MenuItems to the Button"s Menu once it has been rendered
oSplitButton1.getMenu().subscribe("render", onMenuRender);
// "submit" event handler for the <form>
var onExampleSubmit = function (p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
};
// Add a "submit" event handler to the <form> to confirm that
// clicking on one of the MenuItems in the Button"s Menu
// submits the <form>.
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
// "click" event handler for the Button - called when the user clicks
// on the Button"s text label, not when the user clicks on the area
// of the Button that displays the Button"s Menu.
var onButtonClick = function () {
alert("You clicked the Button.");
};
// Create a Button using an existing <input> and <select> element
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select", onclick: { fn: onButtonClick } });
// Click event listener for the second Button"s Menu instance
var onMenuClick = function (p_sType, p_aArgs) {
var oEvent = p_aArgs[0], // DOM event
oMenuItem = p_aArgs[1]; // MenuItem instance that was the target of the event
if (oMenuItem) {
alert("[MenuItem Properties] text: " + oMenuItem.cfg.getProperty("text") + ", value: " + oMenuItem.value);
}
};
// Add a "click" event listener for the Button"s Menu
oSplitButton2.getMenu().subscribe("click", onMenuClick);
// "option" event listener - called when the user clicks on the
// area of the Button that displays its Menu.
var onOption = function () {
alert("You clicked the Split Button"s option area.");
};
// Add a listener for the Button"s "option" event
oSplitButton2.on("option", onOption);
// Create a Button using an existing <input> element and an Overlay instance as its menu
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
});
// Search for an element to place the Split Button into via the
// Event Utility"s "onContentReady" method
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
// Create two Buttons without using existing markup
// Instantiate an Overlay instance
var oOverlay = new YAHOO.widget.Overlay("splitbutton4menu", { visible: false });
oOverlay.setBody("Split Button 4 Menu");
// Instantiate a Split Button
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", menu: oOverlay, container: this });
// "click" event handler for each item in the Button"s Menu
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
var sText = p_oItem.cfg.getProperty("text");
alert("[MenuItem Properties] text: " + sText + ", value: " + p_oItem.value);
};
// Create an array of YAHOO.widget.MenuItem configuration properties
var aSplitButton5Menu = [
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
];
// Instantiate a Split Button using the array of YAHOO.widget.MenuItem
// configuration properties as the value for the "menu"
// configuration attribute.
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", name: "splitbutton5", menu: aSplitButton5Menu, container: this });
});
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="splitbuttons">
<legend>Split Buttons</legend>
<fieldset id="splitbuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="splitbutton1" name="splitbutton1_button" value="Split Button 1">
<select id="splitbutton1select" name="splitbutton1select" multiple>
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton2" name="splitbutton2_button" value="Split Button 2">
<select id="splitbutton2select" name="splitbutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton3" name="splitbutton3_button" value="Split Button 3">
<div id="splitbutton3menu" class="yui-overlay">
<div class="bd">Split Button 3 Menu</div>
</div>
</fieldset>
<fieldset id="splitbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 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 and use a Split Button 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>Split Buttons</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
#splitbutton3menu,
#splitbutton4menu {
position: absolute;
visibility: hidden;
border: solid 1px #000;
padding: .5em;
background-color: #ccc;
}
#button-example-form-postdata {
border: dashed 1px #666;
background-color: #ccc;
padding: 1em;
}
#button-example-form-postdata h2 {
margin: 0 0 .5em 0;
padding: 0;
border: none;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Split Buttons</h1>
<div class="exampleIntro">
<p>This example demonstrates different ways to create and use a Split Button.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
// "contentready" event handler for the "splitbuttonsfrommarkup" <fieldset>
YAHOO.util.Event.onContentReady("splitbuttonsfrommarkup", function () {
// Create a Button using an existing <input> and <select> element.
// Because the "type" attribute of the <input> element was set to
// "submit" - clicking on any MenuItem in the Button"s Menu will
// automatically submit the Button"s parent <form>.
var oSplitButton1 = new YAHOO.widget.Button("splitbutton1", { type: "split", menu: "splitbutton1select" });
// "render" event handler for the Button"s Menu
var onMenuRender = function (p_sType, p_aArgs) {
this.addItems([
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
};
// Add some additional MenuItems to the Button"s Menu once it has been rendered
oSplitButton1.getMenu().subscribe("render", onMenuRender);
// "submit" event handler for the <form>
var onExampleSubmit = function (p_oEvent) {
var bSubmit = window.confirm("Are you sure you want to submit this form?");
if(!bSubmit) {
YAHOO.util.Event.preventDefault(p_oEvent);
}
};
// Add a "submit" event handler to the <form> to confirm that
// clicking on one of the MenuItems in the Button"s Menu
// submits the <form>.
YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
// "click" event handler for the Button - called when the user clicks
// on the Button"s text label, not when the user clicks on the area
// of the Button that displays the Button"s Menu.
var onButtonClick = function () {
alert("You clicked the Button.");
};
// Create a Button using an existing <input> and <select> element
var oSplitButton2 = new YAHOO.widget.Button("splitbutton2", { type: "split", menu: "splitbutton2select", onclick: { fn: onButtonClick } });
// Click event listener for the second Button"s Menu instance
var onMenuClick = function (p_sType, p_aArgs) {
var oEvent = p_aArgs[0], // DOM event
oMenuItem = p_aArgs[1]; // MenuItem instance that was the target of the event
if (oMenuItem) {
alert("[MenuItem Properties] text: " + oMenuItem.cfg.getProperty("text") + ", value: " + oMenuItem.value);
}
};
// Add a "click" event listener for the Button"s Menu
oSplitButton2.getMenu().subscribe("click", onMenuClick);
// "option" event listener - called when the user clicks on the
// area of the Button that displays its Menu.
var onOption = function () {
alert("You clicked the Split Button"s option area.");
};
// Add a listener for the Button"s "option" event
oSplitButton2.on("option", onOption);
// Create a Button using an existing <input> element and an Overlay instance as its menu
var oSplitButton3 = new YAHOO.widget.Button("splitbutton3", { type: "split", menu: "splitbutton3menu" });
});
// Search for an element to place the Split Button into via the
// Event Utility"s "onContentReady" method
YAHOO.util.Event.onContentReady("splitbuttonsfromjavascript", function () {
// Create two Buttons without using existing markup
// Instantiate an Overlay instance
var oOverlay = new YAHOO.widget.Overlay("splitbutton4menu", { visible: false });
oOverlay.setBody("Split Button 4 Menu");
// Instantiate a Split Button
var oSplitButton4 = new YAHOO.widget.Button({ type: "split", label: "Split Button 4", menu: oOverlay, container: this });
// "click" event handler for each item in the Button"s Menu
var onMenuItemClick = function (p_sType, p_aArgs, p_oItem) {
var sText = p_oItem.cfg.getProperty("text");
alert("[MenuItem Properties] text: " + sText + ", value: " + p_oItem.value);
};
// Create an array of YAHOO.widget.MenuItem configuration properties
var aSplitButton5Menu = [
{ text: "One", value: 1, onclick: { fn: onMenuItemClick } },
{ text: "Two", value: 2, onclick: { fn: onMenuItemClick } },
{ text: "Three", value: 3, onclick: { fn: onMenuItemClick } }
];
// Instantiate a Split Button using the array of YAHOO.widget.MenuItem
// configuration properties as the value for the "menu"
// configuration attribute.
var oSplitButton5 = new YAHOO.widget.Button({ type: "split", label: "Split Button 5", name: "splitbutton5", menu: aSplitButton5Menu, container: this });
});
</script>
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="splitbuttons">
<legend>Split Buttons</legend>
<fieldset id="splitbuttonsfrommarkup">
<legend>From Markup</legend>
<input type="submit" id="splitbutton1" name="splitbutton1_button" value="Split Button 1">
<select id="splitbutton1select" name="splitbutton1select" multiple>
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton2" name="splitbutton2_button" value="Split Button 2">
<select id="splitbutton2select" name="splitbutton2select">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
<input type="button" id="splitbutton3" name="splitbutton3_button" value="Split Button 3">
<div id="splitbutton3menu" class="yui-overlay">
<div class="bd">Split Button 3 Menu</div>
</div>
</fieldset>
<fieldset id="splitbuttonsfromjavascript">
<legend>From JavaScript</legend>
</fieldset>
</fieldset>
</form>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Dropdown Button based color picker
<!--
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>Color Picker Button</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/slider/assets/skins/sam/slider.css" />
<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/colorpicker/assets/skins/sam/colorpicker.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/colorpicker/colorpicker-min.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>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
#button-container {
padding: .5em;
}
#color-picker-button {
vertical-align: baseline;
}
#color-picker-button button {
outline: none; /* Safari */
line-height: 1.5;
}
/*
Style the Button instance"s label as a square whose background color
represents the current value of the ColorPicker instance.
*/
#current-color {
display: block;
display: inline-block;
*display: block; /* For IE */
margin-top: .5em;
*margin: .25em 0; /* For IE */
width: 1em;
height: 1em;
overflow: hidden;
text-indent: 1em;
background-color: #fff;
white-space: nowrap;
border: solid 1px #000;
}
/* Hide default colors for the ColorPicker instance. */
#color-picker-container .yui-picker-controls,
#color-picker-container .yui-picker-swatch,
#color-picker-container .yui-picker-websafe-swatch {
display: none;
}
/*
Size the body element of the Menu instance to match the dimensions of
the ColorPicker instance.
*/
#color-picker-menu .bd {
width: 220px;
height: 190px;
}
#photo {
background: #fff url(yui_2.7.0b-assets/button-assets/ggbridge.png) top left no-repeat;
/*
Hide the alpha PNG from IE 6 and make the background image transparent via the use of
the AlphaImageLoader that is applied by the filter property.
*/
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="yui_2.7.0b-assets/button-assets/ggbridge.png", sizingMethod="image");;
border: solid 1px #000;
width: 400px;
height: 300px;
_width: 398px; /* For IE 6 */
_height: 298px; /* For IE 6 */
}
#button-container {
border-top: solid 1px #000;
padding: .5em .25em;
margin-top: .5em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Color Picker Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to render a Color Picker into the Menu of a Split Button.
Use the Color Picker Button below to create a duotone by selecting the background color
that should be applied to the image.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
YAHOO.util.Event.onContentReady("button-container", function () {
function onButtonOption() {
/*
Create a new ColorPicker instance, placing it inside the body
element of the Menu instance.
*/
var oColorPicker = new YAHOO.widget.ColorPicker(oColorPickerMenu.body.id, {
showcontrols: false,
images: {
PICKER_THUMB: "yui_2.7.0b-lib/colorpicker/assets/picker_thumb.png",
HUE_THUMB: "yui_2.7.0b-lib/colorpicker/assets/hue_thumb.png"
}
});
/*
Add a listener for the ColorPicker instance"s "rgbChange" event
to update the background color and text of the Button"s
label to reflect the change in the value of the ColorPicker.
*/
oColorPicker.on("rgbChange", function (p_oEvent) {
var sColor = "#" + this.get("hex");
oButton.set("value", sColor);
YAHOO.util.Dom.setStyle("current-color", "backgroundColor", sColor);
YAHOO.util.Dom.get("current-color").innerHTML = "Current color is " + sColor;
});
// Remove this event listener so that this code runs only once
this.unsubscribe("option", onButtonOption);
}
// Create a Menu instance to house the ColorPicker instance
var oColorPickerMenu = new YAHOO.widget.Menu("color-picker-menu");
// Create a Button instance of type "split"
var oButton = new YAHOO.widget.Button({
type: "split",
id: "color-picker-button",
label: "<em id=\"current-color\">Current color is #FFFFFF.</em>",
menu: oColorPickerMenu,
container: "button-container" });
oButton.on("appendTo", function () {
/*
Create an empty body element for the Menu instance in order to
reserve space to render the ColorPicker instance into.
*/
oColorPickerMenu.setBody(" ");
oColorPickerMenu.body.id = "color-picker-container";
// Render the Menu into the Button instance"s parent element
oColorPickerMenu.render(this.get("container"));
});
/*
Add a listener for the "option" event. This listener will be
used to defer the creation the ColorPicker instance until the
first time the Button"s Menu instance is requested to be displayed
by the user.
*/
oButton.on("option", onButtonOption);
/*
Add a listener for the "click" event. This listener will be used to apply the
the background color to the photo.
*/
oButton.on("click", function () {
YAHOO.util.Dom.setStyle("photo", "backgroundColor", this.get("value"));
});
});
</script>
<div id="photo"></div>
<div id="button-container"><label for="color-picker-button">Background Color: </label></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Dropdown button with slider
<!--
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>Slider Button</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/slider/assets/skins/sam/slider.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/slider/slider-min.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<!--begin custom header content for this example-->
<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;
}
#example {
padding: 1em;
}
#photo {
border: solid 1px #000;
}
/*
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 the <div> element containing the Button instance */
#opacitycontrols {
border-top: solid 1px #000;
padding: .5em .25em;
margin-top: .5em;
}
/* Style the Slider instance */
#slider-bg {
position: relative;
background: url(yui_2.7.0b-assets/button-assets/bg-fader.gif) 7px 12px no-repeat;
height: 28px;
width: 217px;
}
#slider-thumb {
cursor: default;
position: absolute;
top: 4px;
}
/*
Give the <em> element wrapping the Button instance"s text label a
fixed width so that the Button doesn"t grow or shrink as the
text label is updated.
*/
#opacitybutton-currentopacity {
width: 3em;
font-style: normal;
display: block;
text-align: left;
}
#opacitybutton {
vertical-align: middle;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Slider Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to combine a Split Button with a Slider to
create an opacity slider button, similar to that found in Adobe Photoshop.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event;
Event.onContentReady("example", function () {
var Dom = YAHOO.util.Dom,
oSlider;
/*
Create a <div> element to house a Button instance and its
corresponding <label> element.
*/
var oDIV = document.createElement("div")
oDIV.id = "opacitycontrols";
oDIV.innerHTML = "<label for=\"opacitybutton-button\">Opacity:</label>";
Dom.get("example").appendChild(oDIV);
/*
Create a Menu instance whose body element will house a
Slider instance.
*/
var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" });
/*
Create a new Button instance, wrapping the label in an
<em> element. The <em> element will be used to give the
Button instance a fixed width to prevent it from growing
and shrinking as the text label is updated.
*/
var oButton = new YAHOO.widget.Button({
type: "menu",
id: "opacitybutton",
label: "<em id=\"opacitybutton-currentopacity\">100%</em>",
menu: oOpacityMenu,
container: "opacitycontrols" });
/*
Maintain a reference to the <em> element inside the label
so that its text can easily be updated in response to the firing
of the Slider instance"s "change" event.
*/
var oCurrentOpacity;
oButton.on("appendTo", function () {
// Add Slider markup to the Menu instance"s body element
oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"yui_2.7.0b-assets/button-assets/thumb-n.gif\"></div></div>");
/*
Render the Menu instance into the element specified as the
Button instance"s container
*/
oOpacityMenu.render(this.get("container"));
oCurrentOpacity = Dom.get("opacitybutton-currentopacity");
});
/*
Give the Button instance"s <button> element an id so that
clicking its corresponding <label> element will result in the
Button instance receiving focus.
*/
var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0];
oHTMLButton.id = "opacitybutton-button";
/*
Add a "beforeShow" event handler to the Menu instance that
will instantiate the Slider.
*/
var onMenuBeforeShow = function () {
// Instantiate the Slider
oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1);
// Set the initial value of the Slider instance
oSlider.setValue(200, true);
// Maintain a reference to the Slider instance"s root element
var oSliderEl = Dom.get("slider-bg");
// Subscribe to the Slider instance"s "change" event
oSlider.subscribe("change", function() {
/*
Divide the pixel offset in half to get a value between
0 and 100 - used to convey the current opacity via the
Button instance"s label.
*/
var nValue = (Math.round(oSlider.getValue() * .5)),
/*
Divide by 100 in order to set provide a compatible
value for the CSS "opacity" property.
*/
nOpacity = (nValue * .01);
/*
Update the title attribute of the Slider instance"s
root element. This helps assistive technology to
communicate the state change.
*/
oSliderEl.title = "slider value = " + Math.round(nOpacity);
// Set the opacity of the photo
Dom.setStyle("photo", "opacity", nOpacity);
// Update the text label of the Button instance
oCurrentOpacity.innerHTML = (nValue + "%");
});
var focusSlider = function () {
if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {
window.setTimeout(function () {
oSliderEl.focus();
}, 0);
}
};
focusSlider();
// Focus the Slider instance each time it is made visible
oOpacityMenu.subscribe("show", focusSlider);
// Unsubscribe from the "beforeShow" event, since we only need to initialize the
// Slider once.
oOpacityMenu.unsubscribe("beforeShow", onMenuBeforeShow);
};
oOpacityMenu.subscribe("beforeShow", onMenuBeforeShow);
});
})();
</script>
<div id="example"><a href="http://www.flickr.ru/photos/toddlr/477993821/" title="Photo Sharing"><img id="photo" src="http://farm1.static.flickr.ru/198/477993821_0079194851.jpg" width="500" height="375" alt="Ella - A Shih Tzu + Maltese Mix Puppy"></a></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Fixed Width Menu Button
<!--
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>Fixed Width Menu Button</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-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;
}
#categorybutton button {
/*
Suppress the focus outline since Safari will outline even the
text that is clipped by the application of the "overflow" property
in the follow style rule.
*/
outline: none;
}
#categorybutton button em {
font-style: normal;
display: block;
text-align: left;
white-space: nowrap;
/* Restrict the width of the label to 10em. */
width: 10em;
/* Hide the overflow if the text label exceeds 10em in width. */
overflow: hidden;
/*
IE, Safari and Opera support the ability to add ellipsis when the text
label exceeds 10em in width.
*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Fixed Width Menu Button</h1>
<div class="exampleIntro">
<p>
This example demonstrates how to create a Menu Button whose text label has a
fixed width. The behavior of this widget is similar to an HTML
<code><select></code> element in that its label hides any overflow
when updated to represent the selected menu item.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
YAHOO.util.Event.onAvailable("buttoncontainer", function () {
// Create an array of name and value pairs that serve as the data
// source for the Button instance"s menu.
var aCategories = [
{ text: "Category 1", value: "one" },
{ text: "Category 2", value: "two" },
{ text: "Category 3", value: "three" },
{ text: "A Really, Really Long Category 4", value: "four" }
];
// Create a Button instance, wrapping the text label in an <EM>
// tag that will be given a fixed width of 10em.
var oButton = new YAHOO.widget.Button({
type: "menu",
id:"categorybutton",
label: "<em>Select a Category</em>",
menu: aCategories,
container: "buttoncontainer" });
// "selectedMenuItemChange" event handler for a Button that will set
// the Button"s "label" attribute to the value of the "text"
// configuration property of the MenuItem that was clicked.
var onSelectedMenuItemChange = function (event) {
var oMenuItem = event.newValue;
this.set("label", ("<em class=\"yui-button-label\">" +
oMenuItem.cfg.getProperty("text") + "</em>"));
};
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oButton.on("selectedMenuItemChange", onSelectedMenuItemChange);
});
</script>
<div id="buttoncontainer"></div>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:06 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Lazy load on/off and dropdown button
<!--
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>Using A Menu Button To Replace A <select> Element</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* Style the <fieldset> since the Reset CSS removes the default style. */
#button-example-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
pre {
border: solid 1px #000;
background-color: #ccc;
padding: 10px;
margin: 10px;
}
.yui-menu-button em.yui-button-label {
font-style: normal;
display: block;
text-align: left;
white-space: nowrap;
/* Restrict the width of the label to 5em. */
width: 5em;
/* Hide the overflow if the text label exceeds 5em in width. */
overflow: hidden;
/*
IE, Safari and Opera support the ability to add ellipsis when the text
label exceeds 10em in width.
*/
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
li.yui-button-selectedmenuitem {
background: url(yui_2.7.0b-assets/button-assets/checkbox.png) left center no-repeat;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using A Menu Button To Replace A <select> Element</h1>
<div class="exampleIntro">
<p>
This example illustrates how to use Button to mimic the behavior of an
HTML <code><select></code> element.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var Button = YAHOO.widget.Button;
// "render" event handler for a Button"s Menu - responsible for setting
// the default value for the Button"s "selectedMenuItem" attribute.
var onMenuRender = function (type, args, button) {
button.set("selectedMenuItem", this.getItem(0));
};
// "selectedMenuItemChange" event handler for a Button that will set
// the Button"s "label" attribute to the value of the "text"
// configuration property of the MenuItem that was clicked.
var onSelectedMenuItemChange = function (event) {
var oMenuItem = event.newValue;
this.set("label", ("<em class=\"yui-button-label\">" +
oMenuItem.cfg.getProperty("text") + "</em>"));
};
// "submit" event handler for a Button"s parent form - repsonsible for
// rendering a Menu that was to be lazy loaded, but never clicked on,
// and therefore never rendered.
var onFormSubmit = function (event, button) {
var oMenuItem = button.get("selectedMenuItem"),
UA = YAHOO.env.ua,
oEvent,
oMenu;
if (!oMenuItem) {
// Pause submission of the form until the Button"s Menu
// is rendered
YAHOO.util.Event.preventDefault(event);
oMenu = button.getMenu();
oMenu.addItems(oMenu.itemData);
oMenu.subscribe("render", function () {
var bSubmitForm;
if (UA.ie) {
bSubmitForm = this.fireEvent("onsubmit");
}
else { // Gecko, Opera, and Safari
oEvent = document.createEvent("HTMLEvents");
oEvent.initEvent("submit", true, true);
bSubmitForm = this.dispatchEvent(oEvent);
}
// In IE and Safari, dispatching a "submit" event to a form
// WILL cause the form"s "submit" event to fire, but WILL
// NOT submit the form. Therefore, we need to call the
// "submit" method as well.
if ((UA.ie || UA.webkit) && bSubmitForm) {
this.submit();
}
}, this, true);
oMenu.render(oMenu.cfg.getProperty("container"));
}
};
var oMenuButton1 = new Button({
id: "menubutton-1",
name: "menubutton-1",
label: "<em class=\"yui-button-label\">Option 1</em>",
type: "menu",
menu: "select-1",
container: "select-1-container"
});
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton1.on("selectedMenuItemChange", onSelectedMenuItemChange);
var oMenuButton2 = new Button({
id: "menubutton-2",
name: "menubutton-2",
label: "<em class=\"yui-button-label\">Option 1</em>",
type: "menu",
lazyloadmenu: false,
menu: "select-2",
container: "select-2-container"
});
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton2.on("selectedMenuItemChange", onSelectedMenuItemChange);
var aMenuButton3MenuData = [
{ text: "Option 1", value: "menubutton-3-1" },
{ text: "Option 2", value: "menubutton-3-2" },
{ text: "Option 3", value: "menubutton-3-3" }
];
var oMenuButton3 = new Button({
id: "menubutton-3",
name: "menubutton-3",
label: "<em class=\"yui-button-label\">Option 1</em>",
type: "menu",
menu: aMenuButton3MenuData,
container: "menubutton-3-container" });
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton3.on("selectedMenuItemChange", onSelectedMenuItemChange);
oMenuButton3.on("appendTo", function () {
var oMenu = this.getMenu();
// If a Button"s "selectedMenuItem" attribute is set, the selected
// MenuItem"s name and value will be part of the form"s data set
// when its parent form is submitted. For Buttons with Menus built
// entirely from script, the "selectedMenuItem" property is not
// set by default. To set the "selectedMenuItem" to a default
// value, simply register a "render" event handler for the Button"s
// Menu that sets the Button"s "selectedMenuItem" attribute to the
// desired item in the Menu.
oMenu.subscribe("render", onMenuRender, this);
// The items in a Button"s Menu are lazy loaded by default: loaded
// when the Button is initially clicked. If the user never clicks
// on the Button, its Menu will never be rendered, meaning the
// "render" event handler registered above will never be called,
// and the default value for the Button"s "selectMenuItem"
// attribute will never be set. Therefore, add a "submit" event
// handler to the Button"s parent form that will render the Menu
// if the Button"s "selectedMenuItem" attribute is not set.
YAHOO.util.Event.on(this.getForm(), "submit", onFormSubmit, this);
});
var aMenuButton4MenuData = [
{ text: "Option 1", value: "menubutton-4-1" },
{ text: "Option 2", value: "menubutton-4-2" },
{ text: "Option 3", value: "menubutton-4-3" }
];
var oMenuButton4 = new Button({
id: "menubutton-4",
name: "menubutton-4",
label: "<em class=\"yui-button-label\">Option 1</em>",
type: "menu",
lazyloadmenu: false,
menu: aMenuButton4MenuData,
container: "menubutton-4-container" });
var oMenuButton4Menu = oMenuButton4.getMenu();
// If a Button"s "selectedMenuItem" attribute is set, the selected
// MenuItem"s name and value will be part of the form"s data set
// when its parent form is submitted. For Buttons with Menus built
// entirely from script, the "selectedMenuItem" property is not set by
// default. To set the "selectedMenuItem" to a default value, simply
// register a "render" event handler for the Button"s Menu that sets
// the Button"s "selectedMenuItem" attribute to the desired item in
// the Menu.
oMenuButton4Menu.subscribe("render", onMenuRender, oMenuButton4);
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton4.on("selectedMenuItemChange", onSelectedMenuItemChange);
var oMenuButton5 = new Button({
id: "menubutton-5",
name: "menubutton-5",
label: "<em class=\"yui-button-label\">None</em>",
type: "menu",
menu: "select-3",
container: "select-3-container" });
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton5.on("selectedMenuItemChange", onSelectedMenuItemChange);
var oMenuButton6 = new Button({
id: "menubutton-6",
name: "menubutton-6",
label: "<em class=\"yui-button-label\">None</em>",
type: "menu",
lazyloadmenu: false,
menu: "select-4",
container: "select-4-container" });
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton6.on("selectedMenuItemChange", onSelectedMenuItemChange);
var aMenuButton7MenuData = [
"None",
{ text: "Option 1", value: "menubutton-7-1" },
{ text: "Option 2", value: "menubutton-7-2" },
{ text: "Option 3", value: "menubutton-7-3" }
];
var oMenuButton7 = new Button({
id: "menubutton-7",
name: "menubutton-7",
label: "<em class=\"yui-button-label\">None</em>",
type: "menu",
menu: aMenuButton7MenuData,
container: "menubutton-7-container" });
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton7.on("selectedMenuItemChange", onSelectedMenuItemChange);
var aMenuButton8MenuData = [
"None",
{ text: "Option 1", value: "menubutton-8-1" },
{ text: "Option 2", value: "menubutton-8-2" },
{ text: "Option 3", value: "menubutton-8-3" }
];
var oMenuButton8 = new Button({
id: "menubutton-8",
name: "menubutton-8",
label: "<em class=\"yui-button-label\">None</em>",
type: "menu",
lazyloadmenu: false,
menu: aMenuButton8MenuData,
container: "menubutton-8-container" });
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton8.on("selectedMenuItemChange", onSelectedMenuItemChange);
});
</script>
<form name="button-example-form" id="button-example-form" method="post" action="#">
<fieldset>
<legend>With A Default Value</legend>
<fieldset>
<legend>Using Existing Markup</legend>
<fieldset>
<legend>Lazy load on</legend>
<label id="select-1-container">
Choose a value:
<select id="select-1" name="select-1">
<option value="select-1-1" selected>Option 1</option>
<option value="select-1-2">Option 2</option>
<option value="select-1-3">Option 3</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Lazy load off</legend>
<label id="select-2-container">
Choose a value:
<select id="select-2" name="select-2">
<option value="select-2-1" selected>Option 1</option>
<option value="select-2-2">Option 2</option>
<option value="select-2-3">Option 3</option>
</select>
</label>
</fieldset>
</fieldset>
<fieldset>
<legend>Without Existing Markup</legend>
<fieldset>
<legend>Lazy load on</legend>
<label id="menubutton-3-container">Choose a value: </label>
</fieldset>
<fieldset>
<legend>Lazy load off</legend>
<label id="menubutton-4-container">Choose a value: </label>
</fieldset>
</fieldset>
</fieldset>
<fieldset>
<legend>Without A Default Value</legend>
<fieldset>
<legend>Using Existing Markup</legend>
<fieldset>
<legend>Lazy load on</legend>
<label id="select-3-container">
Choose a value:
<select id="select-3" name="select-3">
<option value="">None</option>
<option value="select-3-1">Option 1</option>
<option value="select-3-2">Option 2</option>
<option value="select-3-3">Option 3</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Lazy load off</legend>
<label id="select-4-container">
Choose a value
<select id="select-4" name="select-4">
<option value="">None</option>
<option value="select-4-1">Option 1</option>
<option value="select-4-2">Option 2</option>
<option value="select-4-3">Option 3</option>
</select>
</label>
</fieldset>
</fieldset>
<fieldset>
<legend>Without Existing Markup</legend>
<fieldset>
<legend>Lazy load on</legend>
<label id="menubutton-7-container">Choose a value: </label>
</fieldset>
<fieldset>
<legend>Lazy load off</legend>
<label id="menubutton-8-container">Choose a value: </label>
</fieldset>
</fieldset>
</fieldset>
<div>
<input type="submit" id="submit-button" name="submit-button" value="Submit Form">
</div>
</form>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:07 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Replace the content of a dropdown Button"s Menu on the fly
<!--
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>Replacing the content of a Button"s Menu</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" />
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.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>
<script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* Style the <fieldset> since the Reset CSS removes the default style. */
#pizza-order-form fieldset {
border: 2px groove #ccc;
margin: .5em;
padding: .5em;
}
pre {
border: solid 1px #000;
background-color: #ccc;
padding: 10px;
margin: 10px;
}
li.yui-button-selectedmenuitem {
background: url(yui_2.7.0b-assets/button-assets/checkbox.png) left center no-repeat;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Replacing the content of a Button"s Menu</h1>
<div class="exampleIntro">
<p>
This example illustrates how to replace the content of a Button"s Menu on
the fly.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE -->
<script type="text/javascript">
YAHOO.util.Event.onContentReady("pizza-order-form", function () {
// Change the default node name for the ButtonGroup element
// so that the fieldset can be used.
YAHOO.widget.ButtonGroup.prototype.NODE_NAME = "FIELDSET";
// Transform the existing radio buttons into a ButtonGroup control
var oButtonGroup = new YAHOO.widget.ButtonGroup("pizza-types-fields"),
oType1Label = YAHOO.util.Dom.get("type1-label"),
oType2Label = YAHOO.util.Dom.get("type2-label"),
oButton1 = oButtonGroup.getButton(0),
oButton2 = oButtonGroup.getButton(1);
// Set the "label" attribute of each Button to the text of
// its corresponding <label> element
oButton1.set("label", oType1Label.innerHTML);
oButton2.set("label", oType2Label.innerHTML);
// Remove the original labels, since Buttons of type "radio"
// are self labelling
oButtonGroup.removeChild(oType1Label);
oButtonGroup.removeChild(oType2Label);
// Utility function to transform the data in HTML <option>
// elements into JavaScript arrays of MenuItem
// configuration properties
var createMenuItemData = function (optiongroup) {
var aOptions = YAHOO.util.Dom.get(optiongroup).getElementsByTagName("option"),
aMenuItemData = [],
nOptions = aOptions.length,
oOption;
for (var i = 0; i < nOptions; i++) {
oOption = aOptions[i];
aMenuItemData[i] = { text: oOption.text , value: oOption.value };
}
aMenuItemData.splice(0, 0, "Select Size");
return aMenuItemData;
};
// Read the data out of the <select>"s <optgroup> elements so
// that it can be used to create MenuItems in a Button"s Menu
var aThinCrustSizes = createMenuItemData("thin-crust-sizes"),
aDeepDishSizes = createMenuItemData("deep-dish-sizes");
var onCheckedChange = function (event, menuitems) {
var oMenu;
if (this.get("checked")) {
oMenu = oMenuButton.getMenu();
// Use the "inDocument" method of the Dom utility to
// determine if the Button"s Menu has been rendered.
if (YAHOO.util.Dom.inDocument(oMenuButton.getMenu().element)) {
// If the Menu has been rendered, use Menu"s "clearContent"
// method to remove all existing MenuItems, then repopulate
// the Menu using the "addItems" method.
oMenu.clearContent();
oMenu.addItems(menuitems);
// Using the "clearContent" method removes all content
// from a Menu instance, effectively restoring it to its
// pre-rendered state. For this reason, it is necessary
// to call the "render" method after using "clearContent"
// so that the Menu"s content is rendered into the Menu"s
// body element (<div class="bd">). However, since the
// Menu"s root element is already in the page, it is not
// necessary to pass an element reference when calling the
// "render" method.
oMenu.render();
}
else {
// By default a Button"s Menu is lazyloaded - meaning the
// creation and rendering of all MenuItems is
// deferred until the Menu is intially requested by the
// user. If the "menu" attribute of a Button is set to
// an array of MenuItem configuration properties, as in
// this example, Button sets the "itemData" property of its
// Menu to the value of the "menu" attribute. When the
// Button"s Menu is first shown, Menu uses the value of
// the "itemData" to create and render all MenuItems.
// If the user clicks either the "Deep Dish" or
// "Thin Crust" Buttons before the content of the
// "Pizza Size" Menu has been rendered, simply set the
// Menu"s "itemData" property to the to the array of
// MenuItem configuration properties that should be used
// to build the Menu when it is lazy loaded.
oMenu.itemData = menuitems;
}
}
};
// Register a change event handler for each radio button"s
// "checked" attribute that will rebuild the content of the
// menu button"s Menu instance when the user toggles between
// the deep dish and thin crust pizzas
oButton1.on("checkedChange", onCheckedChange, aThinCrustSizes);
oButton2.on("checkedChange", onCheckedChange, aDeepDishSizes);
// Remove the existing <select> element from the <form>, and
// replace it with a menu button
var oPizzaSizeSelect = YAHOO.util.Dom.get("pizza-size");
oPizzaSizeSelect.parentNode.removeChild(oPizzaSizeSelect);
var oMenuButton = new YAHOO.widget.Button({ type: "menu",
label: "Select Size",
name: "pizza-size",
menu: aThinCrustSizes,
container: "pizza-size-fields" });
// "selectedMenuItemChange" event handler for a Button that will set
// the Button"s "label" attribute to the value of the "text"
// configuration property of the MenuItem that was clicked.
var onSelectedMenuItemChange = function (event) {
var oMenuItem = event.newValue;
this.set("label", oMenuItem.cfg.getProperty("text"));
};
// Register a "selectedMenuItemChange" event handler that will sync the
// Button"s "label" attribute to the MenuItem that was clicked.
oMenuButton.on("selectedMenuItemChange", onSelectedMenuItemChange);
// "render" event handler for a Button"s Menu - responsible for setting
// the default value for the Button"s "selectedMenuItem" attribute.
var onMenuRender = function (type, args, button) {
button.set("selectedMenuItem", this.getItem(0));
};
// "submit" event handler for a Button"s parent form - repsonsible for
// rendering a Menu that was to be lazy loaded, but never clicked on,
// and therefore never rendered.
var onFormSubmit = function (event, button) {
var oMenuItem = button.get("selectedMenuItem"),
UA = YAHOO.env.ua,
oEvent,
oMenu;
if (!oMenuItem) {
// Pause submission of the form until the Button"s Menu
// is rendered
YAHOO.util.Event.preventDefault(event);
oMenu = button.getMenu();
oMenu.addItems(oMenu.itemData);
oMenu.subscribe("render", function () {
var bSubmitForm;
if (UA.ie) {
bSubmitForm = this.fireEvent("onsubmit");
}
else { // Gecko, Opera, and Safari
oEvent = document.createEvent("HTMLEvents");
oEvent.initEvent("submit", true, true);
bSubmitForm = this.dispatchEvent(oEvent);
}
// In IE and Safari, dispatching a "submit" event to a form
// WILL cause the form"s "submit" event to fire, but WILL
// NOT submit the form. Therefore, we need to call the
// "submit" method as well.
if ((UA.ie || UA.webkit) && bSubmitForm) {
this.submit();
}
}, this, true);
oMenu.render(oMenu.cfg.getProperty("container"));
}
};
oMenuButton.on("appendTo", function () {
var oMenu = this.getMenu();
// If a Button"s "selectedMenuItem" attribute is set, the selected
// MenuItem"s name and value will be part of the form"s data set
// when its parent form is submitted. For Buttons with Menus built
// entirely from script, the "selectedMenuItem" property is not
// set by default. To set the "selectedMenuItem" to a default
// value, simply register a "render" event handler for the Button"s
// Menu that sets the Button"s "selectedMenuItem" attribute to the
// desired item in the Menu.
oMenu.subscribe("render", onMenuRender, this);
// The items in a Button"s Menu are lazy loaded by default: loaded
// when the Button is initially clicked. If the user never clicks
// on the Button, its Menu will never be rendered, meaning the
// "render" event handler registered above will never be called,
// and the default value for the Button"s "selectMenuItem"
// attribute will never be set. Therefore, add a "submit" event
// handler to the Button"s parent form that will render the Menu
// if the Button"s "selectedMenuItem" attribute is not set.
YAHOO.util.Event.on(this.getForm(), "submit", onFormSubmit, this);
});
var oPlaceOrder = new YAHOO.widget.Button("place-order");
});
</script>
<form id="pizza-order-form" method="post" action="button-test.html">
<fieldset>
<legend>Pizza Order Form</legend>
<fieldset id="pizza-types-fields">
<legend>Pizza Type</legend>
<label id="type1-label" for="type1">Thin Crust</label>
<input type="radio" name="pizza-type" id="type1" value="1" checked>
<label id="type2-label" for="type2">Deep Dish</label>
<input type="radio" name="pizza-type" id="type2" value="2">
</fieldset>
<div id="pizza-size-fields">
<label for="pizza-size">Size: </label>
<select name="pizza-size" id="pizza-size">
<option selected label="none" value="none">Select a size</option>
<optgroup label="Thin Crust" id="thin-crust-sizes">
<option value="1.1">Small</option>
<option value="1.2">Medium</option>
<option value="1.3">Large</option>
<option value="1.4">Extra Large</option>
</optgroup>
<optgroup label="Deep Dish" id="deep-dish-sizes">
<option value="2.1">Regular</option>
<option value="2.2">Large</option>
</optgroup>
</select>
</div>
</fieldset>
<input type="submit" id="place-order" name="place-order" value="Place Order">
</form>
<!--END SOURCE CODE FOR EXAMPLE -->
</body>
</html>
<!-- presentbright.corp.yahoo.ru uncompressed/chunked Thu Feb 19 10:53:07 PST 2009 -->
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
