Replace-the-content-of-a-dropdown-Buttons-Menu-on-the-fly

YUI Library JavaScript DHTML


            



    
Replacing the content of a Button's Menu

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




Replacing the content of a Button's Menu


  
This example illustrates how to replace the content of a Button's Menu on 
the fly.




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

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