Jump to Table of Contents

Example: Enhancing <button> nodes with button-plugin

In this example, we'll look at a few ways to create buttons using the 'button-plugin' module, and use the 'cssbutton' module for basic styles.

This example uses 3 different ways of creating plugged node elements. Choose the one you are most comfortable with.

Source: HTML

Note: be sure to add the yui3-skin-sam classname to the page's <body> element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning. 

<body class="yui3-skin-sam"> <!-- You need this skin class -->
<button id="myButton">A simple push button</button>

<button id="myEventButton">Toggle 'disabled' state of >></button>

<button id="myDisabledButton">Disabled</button>

Source: JavaScript

YUI().use('button-plugin', 'cssbutton', function(Y){
    
    // A basic push button
    Y.one('#myButton').plug(Y.Plugin.Button);
    
    
    // A disabled button
    var disabledButton = Y.one('#myDisabledButton');
    disabledButton.plug(Y.Plugin.Button, {
        disabled: true
    });
    
    disabledButton.on('click', function(){
        var label = this.get('label');
        alert("My label is '"  + label + "'");
    });
    
    // An event button, listening for a click
    var eventButton = Y.Plugin.Button.createNode({
        srcNode:'#myEventButton'
    });
    
    eventButton.on('click', function(){
        var disabled = disabledButton.get('disabled'),
            newLabel = disabled ? 'Not disabled' : 'Disabled';
            
        disabledButton.set('label', newLabel).set('disabled', !disabled);
    });
});

Examples