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