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 Slider Button
- 3 Simple Calendar Menu Button
- 4 Menu Buttons
- 5 Menu Buttons
- 6 Split Buttons
- 7 Split Buttons
- 8 Color Picker Button
- 9 Slider Button
- 10 Fixed Width Menu Button
- 11 Using A Menu Button To Replace A <select> Element
- 12 Replacing the content of a Button"s Menu
Combine a Split Button with a Slider to create an opacity slider button, similar to Adobe Photoshop
<source lang="html4strict">
<!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>
<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
#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 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>
</head> <body class=" yui-skin-sam">
Slider Button
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.
<script type="text/javascript">
(function() { var Event = YAHOO.util.Event; Event.onContentReady("example", function () { var Dom = YAHOO.util.Dom, oSlider;
/*Create a
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 element. The 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: "100%", menu: oOpacityMenu, container: "opacitycontrols" });
/* Maintain a reference to the 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 elementoOpacityMenu.setBody("
/* 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>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Simple Calendar Menu Button
This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
<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>
<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>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Menu Buttons
This example demonstrates different ways to create and use a Menu Button.
<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">
</fieldset> <fieldset id="menubuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Menu Buttons
This example demonstrates different ways to create and use a Menu Button.
<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">
</fieldset> <fieldset id="menubuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Split Buttons
This example demonstrates different ways to create and use a Split Button.
<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">
</fieldset> <fieldset id="splitbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Split Buttons
This example demonstrates different ways to create and use a Split Button.
<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">
</fieldset> <fieldset id="splitbuttonsfromjavascript"> <legend>From JavaScript</legend> </fieldset> </fieldset>
</form>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Color Picker Button
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.
<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: "Current color is #FFFFFF.", 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>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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
#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 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>
</head> <body class=" yui-skin-sam">
Slider Button
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.
<script type="text/javascript">
(function() { var Event = YAHOO.util.Event; Event.onContentReady("example", function () { var Dom = YAHOO.util.Dom, oSlider;
/*Create a
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 element. The 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: "100%", menu: oOpacityMenu, container: "opacitycontrols" });
/* Maintain a reference to the 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 elementoOpacityMenu.setBody("
/* 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>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Fixed Width Menu Button
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
<select>
element in that its label hides any overflow
when updated to represent the selected menu item.
<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 // tag that will be given a fixed width of 10em. var oButton = new YAHOO.widget.Button({ type: "menu", id:"categorybutton", label: "Select a Category", 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", ("" + oMenuItem.cfg.getProperty("text") + "")); };
// Register a "selectedMenuItemChange" event handler that will sync the // Button"s "label" attribute to the MenuItem that was clicked. oButton.on("selectedMenuItemChange", onSelectedMenuItemChange); });
</script>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Using A Menu Button To Replace A <select> Element
This example illustrates how to use Button to mimic the behavior of an
HTML <select>
element.
<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", ("" + oMenuItem.cfg.getProperty("text") + "")); };
// "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: "Option 1", 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: "Option 1", 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: "Option 1", 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: "Option 1", 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: "None", 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: "None", 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: "None", 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: "None", 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>
<input type="submit" id="submit-button" name="submit-button" value="Submit Form">
</form>
</body> </html>
</source>
<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
<source lang="html4strict">
<!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>
<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>
</head> <body class=" yui-skin-sam">
Replacing the content of a Button"s Menu
This example illustrates how to replace the content of a Button"s Menu on the fly.
<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 (
// 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>
<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>
</fieldset> <input type="submit" id="place-order" name="place-order" value="Place Order">
</form>
</body> </html>
</source><A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>