Jump to Table of Contents

Example: Basic button widgets

In this example, we'll look at a few ways to create button widgets using the 'button' module and listen for events on one to manipulate an attribute of another.

can toggle the pressed attribute of

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="myPushButton">This push button</button>
<p>can toggle the `pressed` attribute of</p>
<button id="myToggleButton">this depressed button :(</button>

<style>
.example {
    text-align:center;
}
.example .yui3-button{
    width: 200px;
}
</style>

Source: JavaScript

YUI().use('button', function(Y){
    
    // A toggle button with a state change listener
    var toggleButton = new Y.ToggleButton({
        srcNode:'#myToggleButton',
        
        // 'after', because 'on' would trigger before the attribute update
        after: {
            'pressedChange': function () {
                var button = this,
                    pressed = button.get('pressed'),
                    newLabel = 'this ' + (pressed ? 'pressed ' : 'depressed') + ' button :' + (pressed ? ')' : '(');
                
                button.set('label', newLabel);
            }
        }
    }).render();
    
    
    var button = new Y.Button({
        srcNode:'#myPushButton',
        on: {
            'click': function(){
                var pressed = toggleButton.get('pressed');
                toggleButton.set('pressed', !pressed);
            }
        }
    }).render();
    
    
});

Examples