YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Three-state button (toggle button) from Javascript




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








    #button-example-form fieldset, 
    #button-example-form fieldset div {
        border: 2px groove #ccc;
        margin: .5em;
        padding: .5em;
    }
    
    #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;
    
    }




Checkbox Buttons



  

This example demonstrates different ways to create a Button that functions like an HTML checkbox (<input type="checkbox"/>).

      



    (function () {
      var Button = YAHOO.widget.Button;
        // "contentready" event handler for the "checkboxbuttonsfrommarkup" 

        YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup", function () {
            // Create Buttons using existing  elements as a data source
    
            var oCheckButton1 = new Button("checkbutton1", { label: "One" });
            var oCheckButton2 = new Button("checkbutton2", { label: "Two" });
            var oCheckButton3 = new Button("checkbutton3", { label: "Three" });
            var oCheckButton4 = new Button("checkbutton4", { label: "Four" });
            // Create Buttons using the YUI Button markup
            var oCheckButton5 = new Button("checkbutton5", { type: "checkbox", value: "1", checked: true });
            var oCheckButton6 = new Button("checkbutton6", { type: "checkbox", value: "2"});
            var oCheckButton7 = new Button("checkbutton7", { type: "checkbox", value: "3" });
            var oCheckButton8 = new Button("checkbutton8", { type: "checkbox", value: "4" });
        
        });
        // Create Buttons without using existing markup
        var oCheckButton9 = new Button({ type: "checkbox", label: "One", id: "checkbutton9", name: "checkboxfield3", value: "1", container: "checkboxbuttonsfromjavascript", checked: true });
        var oCheckButton10 = new Button({ type: "checkbox", label: "Two", id: "checkbutton10", name: "checkboxfield3", value: "2", container: "checkboxbuttonsfromjavascript" });
        var oCheckButton11 = new Button({ type: "checkbox", label: "Three", id: "checkbutton11", name: "checkboxfield3", value: "3", container: "checkboxbuttonsfromjavascript" });
        var oCheckButton12 = new Button({ type: "checkbox", label: "Four", id: "checkbutton12", name: "checkboxfield3", value: "4", container: "checkboxbuttonsfromjavascript" });
    }());


    
        Checkbox Buttons
        
            From Markup
            

                
                
                
                
            

            

                One
                Two
                Three
                Four
            

        

        
            From JavaScript
        
    
    

        
        
    






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