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.10.3/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
+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">One</button>+ +
JavaScript
+// 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
+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 --> + <div id="container"> + <button class='yui3-button'>One</button> + <button class='yui3-button'>Two</button> + <button class='yui3-button'>Three</button>+ +
JavaScript
+ +// 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) nodes
+ use('button-plugin')if you only need to enhance a DOM node with button functionality
+ use('button')if you want a button widget
+ use('button-group')if you want a widget to manage a group of buttons
+ button-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.
+