|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Button</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
<a href="#toc" class="jump">Jump to Table of Contents</a> |
|
|
24 |
|
|
|
25 |
|
|
|
26 |
<h1>Button</h1> |
|
|
27 |
<div class="yui3-g"> |
|
|
28 |
<div class="yui3-u-3-4"> |
|
|
29 |
<div id="main"> |
|
|
30 |
<div class="content"><div class='intro'> |
|
|
31 |
<p>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.</p> |
|
|
32 |
</div> |
|
|
33 |
|
|
|
34 |
<h2 id="getting-started">Getting Started</h2> |
|
|
35 |
|
|
|
36 |
<p> |
|
|
37 |
To include the source files for Button and its dependencies, first load |
|
|
38 |
the YUI seed file if you haven't already loaded it. |
|
|
39 |
</p> |
|
|
40 |
|
|
|
41 |
<pre class="code prettyprint"><script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script></pre> |
|
|
42 |
|
|
|
43 |
|
|
|
44 |
<p> |
|
|
45 |
Next, create a new YUI instance for your application and populate it with the |
|
|
46 |
modules you need by specifying them as arguments to the <code>YUI().use()</code> method. |
|
|
47 |
YUI will automatically load any dependencies required by the modules you |
|
|
48 |
specify. |
|
|
49 |
</p> |
|
|
50 |
|
|
|
51 |
<pre class="code prettyprint"><script> |
|
|
52 |
// Create a new YUI instance and populate it with the required modules. |
|
|
53 |
YUI().use('button', function (Y) { |
|
|
54 |
// Button is available and ready for use. Add implementation |
|
|
55 |
// code here. |
|
|
56 |
}); |
|
|
57 |
</script></pre> |
|
|
58 |
|
|
|
59 |
|
|
|
60 |
<p> |
|
|
61 |
For more information on creating YUI instances and on the |
|
|
62 |
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the |
|
|
63 |
documentation for the <a href="../yui/index.html">YUI Global Object</a>. |
|
|
64 |
</p> |
|
|
65 |
|
|
|
66 |
|
|
|
67 |
<h2 id="using-button---quick-start">Using Button - Quick Start</h2> |
|
|
68 |
<h3 id="button-widgets">Button Widgets</h3> |
|
|
69 |
<h4 id="html">HTML</h4> |
|
|
70 |
<p> |
|
|
71 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
72 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
73 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
74 |
</p> |
|
|
75 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
76 |
<button id="myButton">One</button></pre> |
|
|
77 |
|
|
|
78 |
<h4 id="javascript">JavaScript</h4> |
|
|
79 |
<pre class="code prettyprint">// Create some button widgets |
|
|
80 |
YUI().use('button', function(Y){ |
|
|
81 |
|
|
|
82 |
// A push button widget |
|
|
83 |
var button = new Y.Button({ |
|
|
84 |
srcNode: '#myButton' |
|
|
85 |
}); |
|
|
86 |
|
|
|
87 |
// A toggle button widget |
|
|
88 |
var toggleButton = new Y.ToggleButton({ |
|
|
89 |
srcNode: '#myToggleButton' |
|
|
90 |
}); |
|
|
91 |
|
|
|
92 |
});</pre> |
|
|
93 |
|
|
|
94 |
|
|
|
95 |
<h3 id="node-plugin">Node Plugin</h3> |
|
|
96 |
<pre class="code prettyprint">// If you want something a little more light-weight than a widget... |
|
|
97 |
YUI().use('button-plugin', function(Y){ |
|
|
98 |
|
|
|
99 |
var button = new Y.Plugin.Button.createNode("#testButton", { |
|
|
100 |
label: "I'm a disabled button", |
|
|
101 |
disabled: true |
|
|
102 |
}); |
|
|
103 |
|
|
|
104 |
});</pre> |
|
|
105 |
|
|
|
106 |
<h3 id="button-groups">Button Groups</h3> |
|
|
107 |
<h4 id="html2">HTML</h4> |
|
|
108 |
<p> |
|
|
109 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
110 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
111 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
112 |
</p> |
|
|
113 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --> |
|
|
114 |
<div id="container"> |
|
|
115 |
<button class='yui3-button'>One</button> |
|
|
116 |
<button class='yui3-button'>Two</button> |
|
|
117 |
<button class='yui3-button'>Three</button></pre> |
|
|
118 |
|
|
|
119 |
<h4 id="javascript2">JavaScript</h4> |
|
|
120 |
|
|
|
121 |
<pre class="code prettyprint">// And if you want to manage a group of buttons |
|
|
122 |
YUI().use('button-group', function(Y){ |
|
|
123 |
|
|
|
124 |
var buttonGroup = new Y.ButtonGroup({ |
|
|
125 |
srcNode: '#container' // Should contain <button> children |
|
|
126 |
}); |
|
|
127 |
|
|
|
128 |
});</pre> |
|
|
129 |
|
|
|
130 |
|
|
|
131 |
|
|
|
132 |
|
|
|
133 |
<h2 id="modules">Modules</h2> |
|
|
134 |
<p>YUI's Button component introduces 5 modules:</p> |
|
|
135 |
<ul> |
|
|
136 |
<li><a href="#cssbutton"><code>cssbutton</code></a> - Includes various <code>yui3-button</code> styles to provide a normalized CSS base for buttons.</li> |
|
|
137 |
<li><a href="#button"><code>button</code></a> - Exports the <code>Y.Button</code> & <code>Y.ToggleButton</code> widgets.</li> |
|
|
138 |
<li><a href="#buttongroup"><code>button-group</code></a> - Exports the <code>Y.ButtonGroup</code> widget.</li> |
|
|
139 |
<li><a href="#buttonplugin"><code>button-plugin</code></a> - Exports the <code>Y.Plugin.Button.createNode</code> factory.</li> |
|
|
140 |
<li><code>button-core</code> - Exports <code>Y.ButtonCore</code>, a base used by all other Button component modules.</li> |
|
|
141 |
</ul> |
|
|
142 |
|
|
|
143 |
|
|
|
144 |
<h3 id="which-one-to-use">Which one to use?</h3> |
|
|
145 |
<ul> |
|
|
146 |
<li><code>use('cssbutton')</code> if you only want a CSS stylesheet to enhance button(-like) nodes</li> |
|
|
147 |
<li><code>use('button-plugin')</code> if you only need to enhance a DOM node with button functionality</li> |
|
|
148 |
<li><code>use('button')</code> if you want a button widget</li> |
|
|
149 |
<li><code>use('button-group')</code> if you want a widget to manage a group of buttons</li> |
|
|
150 |
<li><code>button-core</code> is not intended to be used stand-alone</li> |
|
|
151 |
</ul> |
|
|
152 |
|
|
|
153 |
<div id="cssbutton"> |
|
|
154 |
<h3 id="usecssbutton">use('cssbutton')</h3> |
|
|
155 |
<p>YUI's Button component was designed with the idea in mind that sometimes you may only want button styles, without the need for any JavaScript functionality. Instead of <code>use('button', ...)</code>, you can just include the <code>cssbutton</code> module. This can be done dynamically with <code>use('cssbutton')</code>, or statically with a <code>link</code> tag.</p> |
|
|
156 |
<pre class="code prettyprint"><link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssbutton/cssbutton.css"></pre> |
|
|
157 |
|
|
|
158 |
|
|
|
159 |
<p>Loading this stylesheet will include the following classes:</p> |
|
|
160 |
<ul> |
|
|
161 |
<li>yui3-button</li> |
|
|
162 |
<li>yui3-button-disabled</li> |
|
|
163 |
<li>yui3-button-hover, yui3-button:hover</li> |
|
|
164 |
<li>yui3-button-active, yui3-button:active</li> |
|
|
165 |
<li>yui3-button-primary, yui3-button-selected</li> |
|
|
166 |
</ul> |
|
|
167 |
|
|
|
168 |
<p>These styles are designed to progressively enhance. In legacy browsers, you'll get styles that appear as basic buttons, and in new browsers you'll get buttons using modern styles. cssbutton is intended to provide a base and be overridable with custom styles. Such as <code>background-color</code>.</p> |
|
|
169 |
|
|
|
170 |
<h5 id="background-color">Background Color</h5> |
|
|
171 |
<p>A feature of cssbutton is that it uses transparent gradients to create a colored effect. So if you would like a button that has a light to dark red gradient, you do not need to specify all the styles for proper cross-browser gradients, you only need to specify a single <code>background-color</code> style to your buttons.</p> |
|
|
172 |
</div> |
|
|
173 |
|
|
|
174 |
|
|
|
175 |
<div id="buttonplugin"> |
|
|
176 |
<h3 id="usebutton-core">use('button-core')</h3> |
|
|
177 |
<p>This module serves as the foundation for all Button component JavaScript modules and exports <code>Y.ButtonCore</code>. While you can use it stand-alone if you like, it is typically a foundational building block for all other Button classes.</p> |
|
|
178 |
</div> |
|
|
179 |
|
|
|
180 |
|
|
|
181 |
<div id="buttonplugin"> |
|
|
182 |
<h3 id="usebutton-plugin">use('button-plugin')</h3> |
|
|
183 |
<p>This module exports the <code>Y.Plugin.Node.createNode</code> factory, which simplifies the process of plugging nodes with <code>Y.ButtonCore</code>.</p> |
|
|
184 |
</div> |
|
|
185 |
|
|
|
186 |
|
|
|
187 |
<div id="button"> |
|
|
188 |
<h3 id="usebutton">use('button')</h3> |
|
|
189 |
|
|
|
190 |
<h4 id="ybutton">Y.Button</h4> |
|
|
191 |
<p><code>Y.Button</code> combines <code>Y.ButtonCore</code> with <code>Y.Widget</code>, to give you basic button functionality, but with the benefits of having a <a href='/yui/docs/widget/'>Widget</a> instance. This can be used as a building block for different types of advanced buttons.</p> |
|
|
192 |
|
|
|
193 |
<h4 id="ytogglebutton">Y.ToggleButton</h4> |
|
|
194 |
<p><code>Y.ToggleButton</code> does everything that <code>Y.Button</code> does (by extending it), and adds the concept of a selected state, which is referred to as either 'pressed' or 'checked', depending on the <code>type</code> attribute of the instance. This distinction is made for proper ARIA support.</p> |
|
|
195 |
|
|
|
196 |
<h4 id="benefits">Benefits</h4> |
|
|
197 |
|
|
|
198 |
<p>So what do you get from <code>Y.Button</code>/<code>Y.ToggleButton</code> over just creating or plugging a <code><button></code> node?</p> |
|
|
199 |
|
|
|
200 |
<ul> |
|
|
201 |
<li><strong>Accessibility</strong> - Your buttons automatically create and manage their own ARIA <a href='http://www.w3.org/TR/wai-aria/states_and_properties'>states</a> & <a href='http://www.w3.org/TR/wai-aria/roles'>roles</a>. This includes states like <code>aria-pressed</code> & <code>aria-checked</code>, also appropriate roles like <code>button</code>, <code>checked</code>, <code>radio</code>, etc...</li> |
|
|
202 |
<li><strong>State management</strong> - Instances automatically apply classes, such as <code>yui3-button-selected</code> and <code>yui3-button-disabled</code> which are useful for styling purposes. Also, <code>Y.ToggleButton</code> will fire a 'pressedChange' or 'checkedChange' event (depending on <code>type</code>) when the button's state changes from selected to unselected, or vice-versa. This event eliminates the typical case of listening for all 'click' events and then verifying a state changed actually did occur.</li> |
|
|
203 |
</ul> |
|
|
204 |
</div> |
|
|
205 |
|
|
|
206 |
|
|
|
207 |
<div id="buttongroup"> |
|
|
208 |
<h3 id="usebutton-group">use('button-group')</h3> |
|
|
209 |
<p><code>Y.ButtonGroup</code> is a constructor that is used to generate widgets containing a group of buttons. To avoid widgets inside of widgets, this class is built on top of <code>Y.ButtonCore</code>, not <code>Y.Button</code></p> |
|
|
210 |
</div> |
|
|
211 |
|
|
|
212 |
|
|
|
213 |
<h2 id="reference">Reference</h2> |
|
|
214 |
<p><strong>Note</strong>: This is not an exhaustive list. See the API documentation for a complete listing.</p> |
|
|
215 |
<h3 id="attributes">Attributes</h3> |
|
|
216 |
<h4 id="ybuttoncore">Y.ButtonCore</h4> |
|
|
217 |
<table> |
|
|
218 |
<thead> |
|
|
219 |
<tr> |
|
|
220 |
<th>Attribute</th> |
|
|
221 |
<th>Data type</th> |
|
|
222 |
<th>Description</th> |
|
|
223 |
</tr> |
|
|
224 |
</thead> |
|
|
225 |
<tbody> |
|
|
226 |
<tr> |
|
|
227 |
<td>label</td> |
|
|
228 |
<td>string</td> |
|
|
229 |
<td> |
|
|
230 |
Sets the button's <code>innerHTML</code> or <code>value</code> attribute depending on node type |
|
|
231 |
</td> |
|
|
232 |
</tr> |
|
|
233 |
<tr> |
|
|
234 |
<td>disabled</td> |
|
|
235 |
<td>boolean</td> |
|
|
236 |
<td> |
|
|
237 |
Sets the button's disabled state to true/false |
|
|
238 |
</td> |
|
|
239 |
</tr> |
|
|
240 |
</tbody> |
|
|
241 |
</table> |
|
|
242 |
|
|
|
243 |
<h4 id="node-plugin2">Node Plugin</h4> |
|
|
244 |
<p>Inherited from <code>Y.ButtonCore</code></p> |
|
|
245 |
|
|
|
246 |
<h4 id="ybutton2">Y.Button</h4> |
|
|
247 |
<p>Identical to <code>Y.ButtonCore</code></p> |
|
|
248 |
|
|
|
249 |
<h4 id="ytogglebutton2">Y.ToggleButton</h4> |
|
|
250 |
<p>In addition to the inherited <code>Y.Button</code> attributes...</p> |
|
|
251 |
<table> |
|
|
252 |
<thead> |
|
|
253 |
<tr> |
|
|
254 |
<th>Attribute</th> |
|
|
255 |
<th>Data type</th> |
|
|
256 |
<th>Description</th> |
|
|
257 |
</tr> |
|
|
258 |
</thead> |
|
|
259 |
<tbody> |
|
|
260 |
<tr> |
|
|
261 |
<td>type</td> |
|
|
262 |
<td>string</td> |
|
|
263 |
<td> |
|
|
264 |
<p>Sets the type of a toggleable button.</p> |
|
|
265 |
<p>Possible values: |
|
|
266 |
<ul> |
|
|
267 |
<li>'toggle' (default)</li> |
|
|
268 |
<li>'checkbox' </li> |
|
|
269 |
</ul> |
|
|
270 |
</p> |
|
|
271 |
<p>The difference is that a 'toggle' button will use <a href='http://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed'>aria-pressed</a>, and a 'checkbox' button will use <a href='http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked'>aria-checked</a>.</p> </td> |
|
|
272 |
</tr> |
|
|
273 |
</tbody> |
|
|
274 |
</table> |
|
|
275 |
|
|
|
276 |
<h4 id="ybuttongroup">Y.ButtonGroup</h4> |
|
|
277 |
<p>In addition to the inherited <code>Y.ButtonCore</code> attributes...</p> |
|
|
278 |
<table> |
|
|
279 |
<thead> |
|
|
280 |
<tr> |
|
|
281 |
<th>Attribute</th> |
|
|
282 |
<th>Data type</th> |
|
|
283 |
<th>Description</th> |
|
|
284 |
</tr> |
|
|
285 |
</thead> |
|
|
286 |
<tbody> |
|
|
287 |
<tr> |
|
|
288 |
<td>type</td> |
|
|
289 |
<td>string</td> |
|
|
290 |
<td> |
|
|
291 |
<p>Sets the type of button group</p> |
|
|
292 |
<p>Possible values: |
|
|
293 |
<ul> |
|
|
294 |
<li>'push' (default) - No buttons have a selectable state</li> |
|
|
295 |
<li>'radio' - Only one button is selectable at a time</li> |
|
|
296 |
<li>'checkbox' - Multiple buttons can be selected at a time</li> |
|
|
297 |
</ul> |
|
|
298 |
</p> |
|
|
299 |
</td> |
|
|
300 |
</tr> |
|
|
301 |
</tbody> |
|
|
302 |
</table> |
|
|
303 |
|
|
|
304 |
|
|
|
305 |
|
|
|
306 |
<h3 id="change-events">Change Events</h3> |
|
|
307 |
<h4 id="ybuttoncore2">Y.ButtonCore</h4> |
|
|
308 |
<table> |
|
|
309 |
<thead> |
|
|
310 |
<tr> |
|
|
311 |
<th>Event</th> |
|
|
312 |
<th>Description</th> |
|
|
313 |
</tr> |
|
|
314 |
</thead> |
|
|
315 |
<tbody> |
|
|
316 |
<tr> |
|
|
317 |
<td>labelChange</td> |
|
|
318 |
<td> |
|
|
319 |
Fires to inform the subscriber that the button's label is about to be, or has been updated. |
|
|
320 |
</td> |
|
|
321 |
</tr> |
|
|
322 |
<tr> |
|
|
323 |
<td>disabledChange</td> |
|
|
324 |
<td> |
|
|
325 |
Fires to notify the subscriber the disabled state is about to be, or has been updated. |
|
|
326 |
</td> |
|
|
327 |
</tr> |
|
|
328 |
</tbody> |
|
|
329 |
</table> |
|
|
330 |
|
|
|
331 |
<h4 id="node-plugin3">Node Plugin</h4> |
|
|
332 |
<p>Inherited from <code>Y.ButtonCore</code></p> |
|
|
333 |
|
|
|
334 |
<h4 id="ybutton3">Y.Button</h4> |
|
|
335 |
<p>Identical to <code>Y.ButtonCore</code></p> |
|
|
336 |
|
|
|
337 |
<h4 id="ytogglebutton3">Y.ToggleButton</h4> |
|
|
338 |
<p>In addition to the inherited <code>Y.Button</code> events...</p> |
|
|
339 |
<table> |
|
|
340 |
<thead> |
|
|
341 |
<tr> |
|
|
342 |
<th>Event</th> |
|
|
343 |
<th>Description</th> |
|
|
344 |
</tr> |
|
|
345 |
</thead> |
|
|
346 |
<tbody> |
|
|
347 |
<tr> |
|
|
348 |
<td>pressedChange</td> |
|
|
349 |
<td> |
|
|
350 |
Fires for toggle buttons to notify the subscriber the selected state is about to be, or has been updated. |
|
|
351 |
</td> |
|
|
352 |
</tr> |
|
|
353 |
<tr> |
|
|
354 |
<td>checkedChange</td> |
|
|
355 |
<td> |
|
|
356 |
Identical to <code>"pressedChange"</code>, but only applicable for buttons with a configuration attribute <code>"type: 'checkbox'"</code>. |
|
|
357 |
</td> |
|
|
358 |
</tr> |
|
|
359 |
</tbody> |
|
|
360 |
</table> |
|
|
361 |
|
|
|
362 |
<h4 id="ybuttongroup2">Y.ButtonGroup</h4> |
|
|
363 |
<p>In addition to the inherited <code>Y.ButtonCore</code> events...</p> |
|
|
364 |
<table> |
|
|
365 |
<thead> |
|
|
366 |
<tr> |
|
|
367 |
<th>Event</th> |
|
|
368 |
<th>Description</th> |
|
|
369 |
</tr> |
|
|
370 |
</thead> |
|
|
371 |
<tbody> |
|
|
372 |
<tr> |
|
|
373 |
<td>selectionChange</td> |
|
|
374 |
<td> |
|
|
375 |
Fires when a button within the group is either selected or unselected. The event payload contains a reference <code>'originEvent'</code> to the original event, which can be used to obtain the target button. |
|
|
376 |
</td> |
|
|
377 |
</tr> |
|
|
378 |
</tbody> |
|
|
379 |
</table> |
|
|
380 |
|
|
|
381 |
<p> |
|
|
382 |
Note: |
|
|
383 |
<br><code>.on('eventName', fn)</code> will fire <strong>before</strong> the attribute & UI are updated. |
|
|
384 |
<br><code>.after('eventName', fn)</code> will fire <strong>after</strong> the attribute & UI are updated. |
|
|
385 |
</p> |
|
|
386 |
</div> |
|
|
387 |
</div> |
|
|
388 |
</div> |
|
|
389 |
|
|
|
390 |
<div class="yui3-u-1-4"> |
|
|
391 |
<div class="sidebar"> |
|
|
392 |
|
|
|
393 |
<div id="toc" class="sidebox"> |
|
|
394 |
<div class="hd"> |
|
|
395 |
<h2 class="no-toc">Table of Contents</h2> |
|
|
396 |
</div> |
|
|
397 |
|
|
|
398 |
<div class="bd"> |
|
|
399 |
<ul class="toc"> |
|
|
400 |
<li> |
|
|
401 |
<a href="#getting-started">Getting Started</a> |
|
|
402 |
</li> |
|
|
403 |
<li> |
|
|
404 |
<a href="#using-button---quick-start">Using Button - Quick Start</a> |
|
|
405 |
<ul class="toc"> |
|
|
406 |
<li> |
|
|
407 |
<a href="#button-widgets">Button Widgets</a> |
|
|
408 |
<ul class="toc"> |
|
|
409 |
<li> |
|
|
410 |
<a href="#html">HTML</a> |
|
|
411 |
</li> |
|
|
412 |
<li> |
|
|
413 |
<a href="#javascript">JavaScript</a> |
|
|
414 |
</li> |
|
|
415 |
</ul> |
|
|
416 |
</li> |
|
|
417 |
<li> |
|
|
418 |
<a href="#node-plugin">Node Plugin</a> |
|
|
419 |
</li> |
|
|
420 |
<li> |
|
|
421 |
<a href="#button-groups">Button Groups</a> |
|
|
422 |
<ul class="toc"> |
|
|
423 |
<li> |
|
|
424 |
<a href="#html2">HTML</a> |
|
|
425 |
</li> |
|
|
426 |
<li> |
|
|
427 |
<a href="#javascript2">JavaScript</a> |
|
|
428 |
</li> |
|
|
429 |
</ul> |
|
|
430 |
</li> |
|
|
431 |
</ul> |
|
|
432 |
</li> |
|
|
433 |
<li> |
|
|
434 |
<a href="#modules">Modules</a> |
|
|
435 |
<ul class="toc"> |
|
|
436 |
<li> |
|
|
437 |
<a href="#which-one-to-use">Which one to use?</a> |
|
|
438 |
</li> |
|
|
439 |
<li> |
|
|
440 |
<a href="#usecssbutton">use('cssbutton')</a> |
|
|
441 |
<ul class="toc"> |
|
|
442 |
<li> |
|
|
443 |
<a href="#background-color">Background Color</a> |
|
|
444 |
</li> |
|
|
445 |
</ul> |
|
|
446 |
</li> |
|
|
447 |
<li> |
|
|
448 |
<a href="#usebutton-core">use('button-core')</a> |
|
|
449 |
</li> |
|
|
450 |
<li> |
|
|
451 |
<a href="#usebutton-plugin">use('button-plugin')</a> |
|
|
452 |
</li> |
|
|
453 |
<li> |
|
|
454 |
<a href="#usebutton">use('button')</a> |
|
|
455 |
<ul class="toc"> |
|
|
456 |
<li> |
|
|
457 |
<a href="#ybutton">Y.Button</a> |
|
|
458 |
</li> |
|
|
459 |
<li> |
|
|
460 |
<a href="#ytogglebutton">Y.ToggleButton</a> |
|
|
461 |
</li> |
|
|
462 |
<li> |
|
|
463 |
<a href="#benefits">Benefits</a> |
|
|
464 |
</li> |
|
|
465 |
</ul> |
|
|
466 |
</li> |
|
|
467 |
<li> |
|
|
468 |
<a href="#usebutton-group">use('button-group')</a> |
|
|
469 |
</li> |
|
|
470 |
</ul> |
|
|
471 |
</li> |
|
|
472 |
<li> |
|
|
473 |
<a href="#reference">Reference</a> |
|
|
474 |
<ul class="toc"> |
|
|
475 |
<li> |
|
|
476 |
<a href="#attributes">Attributes</a> |
|
|
477 |
<ul class="toc"> |
|
|
478 |
<li> |
|
|
479 |
<a href="#ybuttoncore">Y.ButtonCore</a> |
|
|
480 |
</li> |
|
|
481 |
<li> |
|
|
482 |
<a href="#node-plugin2">Node Plugin</a> |
|
|
483 |
</li> |
|
|
484 |
<li> |
|
|
485 |
<a href="#ybutton2">Y.Button</a> |
|
|
486 |
</li> |
|
|
487 |
<li> |
|
|
488 |
<a href="#ytogglebutton2">Y.ToggleButton</a> |
|
|
489 |
</li> |
|
|
490 |
<li> |
|
|
491 |
<a href="#ybuttongroup">Y.ButtonGroup</a> |
|
|
492 |
</li> |
|
|
493 |
</ul> |
|
|
494 |
</li> |
|
|
495 |
<li> |
|
|
496 |
<a href="#change-events">Change Events</a> |
|
|
497 |
<ul class="toc"> |
|
|
498 |
<li> |
|
|
499 |
<a href="#ybuttoncore2">Y.ButtonCore</a> |
|
|
500 |
</li> |
|
|
501 |
<li> |
|
|
502 |
<a href="#node-plugin3">Node Plugin</a> |
|
|
503 |
</li> |
|
|
504 |
<li> |
|
|
505 |
<a href="#ybutton3">Y.Button</a> |
|
|
506 |
</li> |
|
|
507 |
<li> |
|
|
508 |
<a href="#ytogglebutton3">Y.ToggleButton</a> |
|
|
509 |
</li> |
|
|
510 |
<li> |
|
|
511 |
<a href="#ybuttongroup2">Y.ButtonGroup</a> |
|
|
512 |
</li> |
|
|
513 |
</ul> |
|
|
514 |
</li> |
|
|
515 |
</ul> |
|
|
516 |
</li> |
|
|
517 |
</ul> |
|
|
518 |
</div> |
|
|
519 |
</div> |
|
|
520 |
|
|
|
521 |
|
|
|
522 |
|
|
|
523 |
<div class="sidebox"> |
|
|
524 |
<div class="hd"> |
|
|
525 |
<h2 class="no-toc">Examples</h2> |
|
|
526 |
</div> |
|
|
527 |
|
|
|
528 |
<div class="bd"> |
|
|
529 |
<ul class="examples"> |
|
|
530 |
|
|
|
531 |
|
|
|
532 |
<li data-description="This example shows how you can easily style button and non-button DOM elements to appear as buttons"> |
|
|
533 |
<a href="cssbutton.html">Styling elements with cssbutton</a> |
|
|
534 |
</li> |
|
|
535 |
|
|
|
536 |
|
|
|
537 |
|
|
|
538 |
<li data-description="This example shows a simple, light solution to enhance <button> nodes"> |
|
|
539 |
<a href="button-plugin.html">Enhancing <button> nodes with button-plugin</a> |
|
|
540 |
</li> |
|
|
541 |
|
|
|
542 |
|
|
|
543 |
|
|
|
544 |
<li data-description="This example demonstrates how to create button widgets"> |
|
|
545 |
<a href="button-basic.html">Basic button widgets</a> |
|
|
546 |
</li> |
|
|
547 |
|
|
|
548 |
|
|
|
549 |
|
|
|
550 |
<li data-description="This example demonstrates how to create a widget containing a group of buttons"> |
|
|
551 |
<a href="button-group.html">Managing groups of buttons with button-group</a> |
|
|
552 |
</li> |
|
|
553 |
|
|
|
554 |
|
|
|
555 |
</ul> |
|
|
556 |
</div> |
|
|
557 |
</div> |
|
|
558 |
|
|
|
559 |
|
|
|
560 |
|
|
|
561 |
</div> |
|
|
562 |
</div> |
|
|
563 |
</div> |
|
|
564 |
</div> |
|
|
565 |
|
|
|
566 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
567 |
<script>prettyPrint();</script> |
|
|
568 |
|
|
|
569 |
<script> |
|
|
570 |
YUI.Env.Tests = { |
|
|
571 |
examples: [], |
|
|
572 |
project: '../assets', |
|
|
573 |
assets: '../assets/button', |
|
|
574 |
name: 'button', |
|
|
575 |
title: 'Button', |
|
|
576 |
newWindow: '', |
|
|
577 |
auto: false |
|
|
578 |
}; |
|
|
579 |
YUI.Env.Tests.examples.push('cssbutton'); |
|
|
580 |
YUI.Env.Tests.examples.push('button-plugin'); |
|
|
581 |
YUI.Env.Tests.examples.push('button-basic'); |
|
|
582 |
YUI.Env.Tests.examples.push('button-group'); |
|
|
583 |
|
|
|
584 |
</script> |
|
|
585 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
586 |
|
|
|
587 |
|
|
|
588 |
|
|
|
589 |
</body> |
|
|
590 |
</html> |