button.mustache revision e9738690feeb7eae0899f34e5d0feec68bdbd48c
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<div class="intro">
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <p>In this example, we'll look at a few ways to create buttons using the `'button'` module, which combines `'button-core'`, `'widget'`, and uses and `'cssbutton'` for styling.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright{{>getting-started}}
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h2>Using Button</h2>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h3>Quick Start</h3>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>There are two ways to create a Y.Button instance. The most common method is to assign it to an existing DOM node, like:</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright// Use an existing node
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightvar button = new Y.Button({
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright srcNode: '#myButton'
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek GathrightOr, you can also create an unattached node and append to a parent container:
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightvar button = new Y.Button(); // Dynamically create the node
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightvar node = button.getNode(); // Get the Y.Node instance
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek GathrightY.one('#container').append(node); // Append it to #container
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>In either case, the object you receive from the constructor will be a Y.Button instance that contains a few attributes, and wraps around a Y.Node instance. The markup generated will look something similar to:</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<button id='myButton' class='yui3-button' aria-pressed='false'>My Button</button>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>At this point, you can modify `button`'s attributes, manipulate its state, or listen for change events.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright// Create a toggle button
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightnode.on('click', function(){
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright button.set('selected', !button.get('selected'));
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h3>Events</h3>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>Most commonly with button elements, you want to listen for any clicks, or other <a href='/yui/docs/api/files/node_js_node-event.js.html#l8'>DOM events</a> that occur.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightvar button = new Y.Button({
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright srcNode: '#myButton'
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightnode.on('click', function(){
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright alert('Hello!');
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>If you are more interested in listening to a `button`'s attribute change events, that can be done at creation.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathrightvar button = new Y.Button({
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright srcNode: '#myButton',
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright type: 'toggle',
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright selectedChange: function(){
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Y.log('This will fire when the toggled state changed')
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>Any event handlers can also be assigned by using the `on` property in the configuration object. Valid events include any , as well as Y.Button attribute change events (e.g. 'selectedChange').</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h3>Styling</h3>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>YUI's Button component was designed with the idea in mind that you may only want button styles, no JS functionality. Instead of `use('button')`, you can just include the `cssbutton` sub-module. This can be done dynamically with `use('cssbutton')`, or statically with a `<link>` tag.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>Including this CSS module will load in a stylesheet consisting of the following classes:</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <li>yui3-button</li>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <li>yui3-button:hover</li>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <li>yui3-button:active</li>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <li>yui3-button-disabled</li>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>These styles are designed to progressively enhance. In legacy browsers, you'll get styles that appear a bit nicer than native buttons, and in modern browsers you'll get buttons using the latest CSS3 styles.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h3>Events</h3>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>Here are the events emitted from a Y.Button instance </p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>`button.on('eventName', fn)` will fire <strong>before</strong> the attribute & UI are updated.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<br>`button.after('eventName', fn)` will fire <strong>after</strong> the attribute & UI are updated.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <th>Event</th>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <th>Description</th>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`selectedChange`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Fires for toggle buttons to notify the subscriber the selected state is about to be, or has been updated.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`disabledChange`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Fires to notify the subscriber the disabled state is about to be, or has been updated.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`typeChange`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Fires to inform the subscriber that the button's type is about to be, or has been updated.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`labelChange`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Fires to inform the subscriber that the button's label is about to be, or has been updated.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h3>Configuration</h3>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<p>Here are the attributes that can be set on instantiation.</p>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <th>Event</th>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <th>Description</th>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`srcNode`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright The source node
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`label`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright The textual representation of the element
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`on`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Any single event, or group of events to listen for.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <br> Note: These are attribute change events, not DOM events.
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`disabled`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Whether or not the button should be disabled by default
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright <td>`selected`</td>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright Whether or not the button should be selected by default
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<div class="example yui3-skin-sam">
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright {{>button-source}}
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h4>Source: HTML</h4>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright{{>button-source-html}}
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright<h4>Source: JavaScript</h4>
e9738690feeb7eae0899f34e5d0feec68bdbd48cDerek Gathright{{>button-source-js}}