Create-and-use-a-Menu-Button-from-HTML-markup


            



    
Menu Buttons

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











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




Menu Buttons


  This example demonstrates different ways to create and use a Menu Button.




  //  "contentready" event handler for the "menubuttonsfrommarkup" 
  YAHOO.util.Event.onContentReady("menubuttonsfrommarkup", function () {
    //  Create a Button using an existing  and  element was set to 
    //  "submit" - clicking on any MenuItem in the Button's Menu will
    //  automatically submit the Button's parent .
    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 
    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  to confirm that 
    //  clicking on one of the MenuItems in the Button's Menu 
    //  submits the .
    YAHOO.util.Event.on("button-example-form", "submit", onExampleSubmit);
    //  Create a Button using an existing  and  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 });
  });


    
        Menu Buttons
        
            From Markup
            
            
            
                One
                Two
                Three                
            
            
            
                One
                Two
                Three                
            
            
            
                Menu Button 3 Menu

YUI Library JavaScript DHTML

Menu Buttons