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
<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();
});