Lazy-load-onoff-and-dropdown-button


            



    
Using A Menu Button To Replace A <select> Element

/*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 the  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;
  }




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.




  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);
  });


    
  
    With A Default Value
    
      Using Existing Markup
      
        Lazy load on
        
          Choose a value: 
          
            Option 1
            Option 2
            Option 3      
          
        
      

      
        Lazy load off
        
          Choose a value: 
          
            Option 1
            Option 2
            Option 3      
          
        
      

    

    
      Without Existing Markup
      
        Lazy load on
        Choose a value: 
      

              
        Lazy load off
        Choose a value: 
      

    

  

  
    Without A Default Value
    
      Using Existing Markup
      
        Lazy load on
        
          Choose a value:
          
            None
            Option 1
            Option 2
            Option 3      
          
        
      

      
        Lazy load off
        
          Choose a value
          
            None
            Option 1
            Option 2
            Option 3      
          
        
      

    

    
      Without Existing Markup
      
      
        Lazy load on
        Choose a value: 
      

              
        Lazy load off
        Choose a value: 
      
        
      
    

  

  
    
  

  





   
   
yui_2.7.0b.zip( 4,431 k)

YUI Library JavaScript DHTML

Using A Menu Button To Replace A <select> Element