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