YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Create Button from Javascript




    
Push 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;
    }
    .yui-button#pushbutton2 button,
    .yui-button#pushbutton5 button, 
    .yui-button#pushbutton8 button {
        background: url(yui_2.7.0b-assets/button-assets/add.gif) center center no-repeat;
        text-indent: -4em;
        overflow: hidden;
        padding: 0 .75em;
        width: 2em;
        *margin-left: 4em;   /* IE only */
        *padding: 0 1.75em;  /* IE only */
    }
    
    .yui-button#pushbutton3 button,
    .yui-button#pushbutton6 button, 
    .yui-button#pushbutton9 button {
        padding-left: 2em;
        background: url(yui_2.7.0b-assets/button-assets/add.gif) 10% 50% no-repeat;
    
    }




Push Buttons



  

This example demonstrates different ways to create a Push Button.

      



    YAHOO.example.init = function () {
        // "click" event handler for each Button instance
        function onButtonClick(p_oEvent) {
            YAHOO.log("You clicked button: " + this.get("id"), "info", "example1");
        
        }
        // "contentready" event handler for the "pushbuttonsfrommarkup" 

        YAHOO.util.Event.onContentReady("pushbuttonsfrommarkup", function () {
            // Create Buttons using existing  elements as a data source
            var oPushButton1 = new YAHOO.widget.Button("pushbutton1");
            oPushButton1.on("click", onButtonClick);
            
            var oPushButton2 = new YAHOO.widget.Button("pushbutton2", { onclick: { fn: onButtonClick } });
            var oPushButton3 = new YAHOO.widget.Button("pushbutton3", { onclick: { fn: onButtonClick } });
            // Create Buttons using the YUI Button markup
            var oPushButton4 = new YAHOO.widget.Button("pushbutton4");
            oPushButton4.on("click", onButtonClick);
            var oPushButton5 = new YAHOO.widget.Button("pushbutton5", { onclick: { fn: onButtonClick } });
            var oPushButton6 = new YAHOO.widget.Button("pushbutton6", { onclick: { fn: onButtonClick } });        
        
        });
        // Create Buttons without using existing markup
        var oPushButton7 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton7", container:"pushbuttonsfromjavascript" });
        oPushButton7.on("click", onButtonClick);
        var oPushButton8 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton8", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
        var oPushButton9 = new YAHOO.widget.Button({ label:"Add", id:"pushbutton9", container:"pushbuttonsfromjavascript", onclick: { fn: onButtonClick } });
    } ();


    
        Push Buttons
        
            From Markup
            

                Add
                
                
            

            

                
                Add
                Add
            

        

        
        
            From JavaScript
        
    





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