YUI's Button component is a mixed-module approach to providing a simple-to-use button that normalizes and enhances the Web browser's default button component.
Getting Started
To include the source files for Button and its dependencies, first load the YUI seed file if you haven't already loaded it.
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
Next, create a new YUI instance for your application and populate it with the
modules you need by specifying them as arguments to the YUI().use() method.
YUI will automatically load any dependencies required by the modules you
specify.
<script>
// Create a new YUI instance and populate it with the required modules.
YUI().use('button', function (Y) {
// Button is available and ready for use. Add implementation
// code here.
});
</script>
For more information on creating YUI instances and on the
use() method, see the
documentation for the YUI Global Object.
Using Button - Quick Start
Button Widgets
// Create some button widgets
YUI().use('button', function(Y){
// A push button widget
var button = new Y.Button({
srcNode: '#myButton'
});
// A toggle button widget
var toggleButton = new Y.ToggleButton({
srcNode: '#myToggleButton'
});
});
Node Plugin
// If you want something a little more light-weight than a widget...
YUI().use('button-plugin', function(Y){
var button = new Y.Plugin.Button.createNode("#testButton", {
label: "I'm a disabled button",
disabled: true
});
});
Button Groups
// And if you want to manage a group of buttons
YUI().use('button-group', function(Y){
var buttonGroup = new Y.ButtonGroup({
srcNode: '#container' // Should contain <button> children
});
});
Modules
YUI's Button component introduces 5 modules:
cssbutton- Includes variousyui3-buttonstyles to provide a normalized CSS base for buttons.button- Exports theY.Button&Y.ToggleButtonwidgets.button-group- Exports theY.ButtonGroupwidget.button-plugin- Exports theY.Plugin.Button.createNodefactory.button-core- ExportsY.ButtonCore, a base used by all other Button component modules.
Which one to use?
use('cssbutton')if you only want a CSS stylesheet to enhance button(-like) nodesuse('button-plugin')if you only need to enhance a DOM node with button functionalityuse('button')if you want a button widgetuse('button-group')if you want a widget to manage a group of buttonsbutton-coreis not intended to be used stand-alone
Reference
Note: This is not an exhaustive list. See the API documentation for a complete listing.
Attributes
Y.ButtonCore
| Attribute | Data type | Description |
|---|---|---|
| label | string |
Sets the button's innerHTML or value attribute depending on node type
|
| disabled | boolean | Sets the button's disabled state to true/false |
Node Plugin
Inherited from Y.ButtonCore
Y.Button
Identical to Y.ButtonCore
Y.ToggleButton
In addition to the inherited Y.Button attributes...
| Attribute | Data type | Description |
|---|---|---|
| type | string |
Sets the type of a toggleable button. Possible values:
The difference is that a 'toggle' button will use aria-pressed, and a 'checkbox' button will use aria-checked. |
Y.ButtonGroup
In addition to the inherited Y.ButtonCore attributes...
| Attribute | Data type | Description |
|---|---|---|
| type | string |
Sets the type of button group Possible values:
|
Change Events
Y.ButtonCore
| Event | Description |
|---|---|
| labelChange | Fires to inform the subscriber that the button's label is about to be, or has been updated. |
| disabledChange | Fires to notify the subscriber the disabled state is about to be, or has been updated. |
Node Plugin
Inherited from Y.ButtonCore
Y.Button
Identical to Y.ButtonCore
Y.ToggleButton
In addition to the inherited Y.Button events...
| Event | Description |
|---|---|
| pressedChange | Fires for toggle buttons to notify the subscriber the selected state is about to be, or has been updated. |
| checkedChange |
Identical to "pressedChange", but only applicable for buttons with a configuration attribute "type: 'checkbox'".
|
Y.ButtonGroup
In addition to the inherited Y.ButtonCore events...
| Event | Description |
|---|---|
| selectionChange |
Fires when a button within the group is either selected or unselected. The event payload contains a reference 'originEvent' to the original event, which can be used to obtain the target button.
|
Note:
.on('eventName', fn) will fire before the attribute & UI are updated.
.after('eventName', fn) will fire after the attribute & UI are updated.