JavaScript DHTML/YUI Library/DropDown Button

Материал из Web эксперт
Перейти к: навигация, поиск

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
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  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
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 
                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 element
oOpacityMenu.setBody("
<img src=\"yui_2.7.0b-assets/button-assets/thumb-n.gif\">
");
               /*
                    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>

<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>

</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">
Split Button 3 Menu
       </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">
Split Button 3 Menu
       </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>

<label for="color-picker-button">Background Color: </label>

</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
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  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
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 
                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 element
oOpacityMenu.setBody("
<img src=\"yui_2.7.0b-assets/button-assets/thumb-n.gif\">
");
               /*
                    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>

<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>

</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 (
). 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>
     <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>