Different-ways-to-create-a-Button-that-functions-like-an-HTML-anchor-element

YUI Library JavaScript DHTML


            



    
Link 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-examples div {
        border: 2px groove #ccc;
        margin: .5em;
        padding: .5em;
    }
    #button-examples h2 {
    
        border: none;
        margin: 0 0 .5em 0;
        padding: 0;
    
    }
    #linkbutton2 a,
    #linkbutton5 a {
    
        background: url(yui_2.7.0b-assets/button-assets/yahoo.gif) center center no-repeat;
        text-indent: -5em;
        overflow: hidden;
        padding: 0 1em;
        *margin-left: 5em;   /* IE only */
        _padding: 0 2.25em; /* IE 6 and IE 7 (Quirks Mode) */
    }
    #linkbutton3 a, 
    #linkbutton6 a {
        padding-left: 2.25em;
        background: url(yui_2.7.0b-assets/button-assets/yahoo.gif) 10% 50% no-repeat;
    
    }




Link Buttons


  This example demonstrates different ways to create a Button that functions like an HTML <a/> element.




    YAHOO.example.init = function () {
        // "contentready" event handler for the "linkbuttonsfrommarkup" 
        YAHOO.util.Event.onContentReady("linkbuttonsfrommarkup", function() {
            // Create Buttons from existing markup
    
            var oLinkButton1 = new YAHOO.widget.Button("linkbutton1");
            var oLinkButton2 = new YAHOO.widget.Button("linkbutton2");
            var oLinkButton3 = new YAHOO.widget.Button("linkbutton3");  
        
        });
        // Create Buttons without using existing markup
        var oLinkButton4 = new YAHOO.widget.Button({ type: "link", id: "linkbutton4", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
        var oLinkButton5 = new YAHOO.widget.Button({ type: "link", id: "linkbutton5", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
        var oLinkButton6 = new YAHOO.widget.Button({ type: "link", id: "linkbutton6", label: "Yahoo!", href: "http://www.yahoo.com", container: "linkbuttonsfromjavascript" });
    } ();


    
        From Markup

        Yahoo!
        Yahoo!
        Yahoo!
    

    
    
        From JavaScript