Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/docs/button.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
1
2 <ul class="UIAPIPlugin-toc">
3 <li><a href="#overview">Overview</a></li>
4 <li><a href="#options">Options</a></li>
5 <li><a href="#events">Events</a></li>
6 <li><a href="#methods">Methods</a></li>
7 <li><a href="#theming">Theming</a></li>
8 </ul>
9 <div class="UIAPIPlugin">
10 <h1>jQuery UI Button</h1>
11 <div id="overview">
12 <h2 class="top-header">Overview</h2>
13 <div id="overview-main">
14 <p>Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.</p>
15 <p>In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.</p>
16 <p>In order to group radio buttons, Button also provides an additional widget-method, called Buttonset. Its used by selecting a container element (which contains the radio buttons) and calling buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendents and applying button() to them. You can enable and disable a buttonset, which will enable and disable all contained buttons. Destroying a buttonset also calls the button's destroy method.</p>
17 <p>When using an input of type button, submit or reset, support is limited to plain text labels with no icons.</p>
18 </div>
19 <div id="overview-dependencies">
20 <h3>Dependencies</h3>
21 <ul>
22 <li>UI Core</li>
23 <li>UI Widget</li>
24 </ul>
25 </div>
26 <div id="overview-example">
27 <h3>Example</h3>
28 <div id="overview-example" class="example">
29 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
30 <p><div id="demo" class="tabs-container" rel="300">
31 A simple jQuery UI Button.<br />
32 </p>
33 <pre>$(&quot;button&quot;).button();
34 </pre>
35 <p></div><div id="source" class="tabs-container">
36 </p>
37 <pre>&lt;!DOCTYPE html&gt;
38 &lt;html&gt;
39 &lt;head&gt;
40 &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
41 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
42 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
43
44 &lt;script&gt;
45 $(document).ready(function() {
46 $(&quot;button&quot;).button();
47 });
48 &lt;/script&gt;
49 &lt;/head&gt;
50 &lt;body style="font-size:62.5%;"&gt;
51
52 &lt;button&gt;Button label&lt;/button&gt;
53
54 &lt;/body&gt;
55 &lt;/html&gt;
56 </pre>
57 <p></div>
58 </p><p></div>
59 <div id="overview-example" class="example">
60 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
61 <div id="demo" class="tabs-container" rel="300">
62 A simple jQuery UI Button.<br />
63 </p>
64 <pre>$(&quot;#radio&quot;).buttonset();
65 </pre>
66 <p></div><div id="source" class="tabs-container">
67 </p>
68 <pre>&lt;!DOCTYPE html&gt;
69 &lt;html&gt;
70 &lt;head&gt;
71 &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
72 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
73 &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
74
75 &lt;script&gt;
76 $(document).ready(function() {
77 $(&quot;#radio&quot;).buttonset();
78 });
79 &lt;/script&gt;
80 &lt;/head&gt;
81 &lt;body style="font-size:62.5%;"&gt;
82
83 &lt;div id=&quot;radio&quot;&gt;
84 &lt;input type=&quot;radio&quot; id=&quot;radio1&quot; name=&quot;radio&quot; /&gt;&lt;label for=&quot;radio1&quot;&gt;Choice 1&lt;/label&gt;
85 &lt;input type=&quot;radio&quot; id=&quot;radio2&quot; name=&quot;radio&quot; checked=&quot;checked&quot; /&gt;&lt;label for=&quot;radio2&quot;&gt;Choice 2&lt;/label&gt;
86 &lt;input type=&quot;radio&quot; id=&quot;radio3&quot; name=&quot;radio&quot; /&gt;&lt;label for=&quot;radio3&quot;&gt;Choice 3&lt;/label&gt;
87 &lt;/div&gt;
88
89 &lt;/body&gt;
90 &lt;/html&gt;
91 </pre>
92 <p></div>
93 </p><p></div>
94 </div>
95 </div>
96 <div id="options">
97 <h2 class="top-header">Options</h2>
98 <ul class="options-list">
99
100 <li class="option" id="option-disabled">
101 <div class="option-header">
102 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
103 <dl>
104 <dt class="option-type-label">Type:</dt>
105 <dd class="option-type">Boolean</dd>
106
107 <dt class="option-default-label">Default:</dt>
108 <dd class="option-default">false</dd>
109
110 </dl>
111 </div>
112 <div class="option-description">
113 <p>Disables (true) or enables (false) the button. Can be set when initialising (first creating) the button.</p>
114 </div>
115 <div class="option-examples">
116 <h4>Code examples</h4>
117 <dl class="option-examples-list">
118
119 <dt>
120 Initialize a button with the <code>disabled</code> option specified.
121 </dt>
122 <dd>
123 <pre><code>$( ".selector" ).button({ disabled: true });</code></pre>
124 </dd>
125
126
127 <dt>
128 Get or set the <code>disabled</code> option, after init.
129 </dt>
130 <dd>
131 <pre><code>//getter
132 var disabled = $( ".selector" ).button( "option", "disabled" );
133 //setter
134 $( ".selector" ).button( "option", "disabled", true );</code></pre>
135 </dd>
136
137 </dl>
138 </div>
139 </li>
140
141
142 <li class="option" id="option-text">
143 <div class="option-header">
144 <h3 class="option-name"><a href="#option-text">text</a></h3>
145 <dl>
146 <dt class="option-type-label">Type:</dt>
147 <dd class="option-type">Boolean</dd>
148
149 <dt class="option-default-label">Default:</dt>
150 <dd class="option-default">true</dd>
151
152 </dl>
153 </div>
154 <div class="option-description">
155 <p>Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.</p>
156 </div>
157 <div class="option-examples">
158 <h4>Code examples</h4>
159 <dl class="option-examples-list">
160
161 <dt>
162 Initialize a button with the <code>text</code> option specified.
163 </dt>
164 <dd>
165 <pre><code>$( ".selector" ).button({ text: false });</code></pre>
166 </dd>
167
168
169 <dt>
170 Get or set the <code>text</code> option, after init.
171 </dt>
172 <dd>
173 <pre><code>//getter
174 var text = $( ".selector" ).button( "option", "text" );
175 //setter
176 $( ".selector" ).button( "option", "text", false );</code></pre>
177 </dd>
178
179 </dl>
180 </div>
181 </li>
182
183
184 <li class="option" id="option-icons">
185 <div class="option-header">
186 <h3 class="option-name"><a href="#option-icons">icons</a></h3>
187 <dl>
188 <dt class="option-type-label">Type:</dt>
189 <dd class="option-type">Options</dd>
190
191 <dt class="option-default-label">Default:</dt>
192 <dd class="option-default">{ primary: null, secondary: null }</dd>
193
194 </dl>
195 </div>
196 <div class="option-description">
197 <p>Icons to display, with or without text (see text option). The primary icon is displayed by default on the left of the label text, the secondary by default is on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear". For using only one icon: icons: {primary:'ui-icon-locked'}. For using two icons: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}</p>
198 </div>
199 <div class="option-examples">
200 <h4>Code examples</h4>
201 <dl class="option-examples-list">
202
203 <dt>
204 Initialize a button with the <code>icons</code> option specified.
205 </dt>
206 <dd>
207 <pre><code>$( ".selector" ).button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });</code></pre>
208 </dd>
209
210
211 <dt>
212 Get or set the <code>icons</code> option, after init.
213 </dt>
214 <dd>
215 <pre><code>//getter
216 var icons = $( ".selector" ).button( "option", "icons" );
217 //setter
218 $( ".selector" ).button( "option", "icons", {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} );</code></pre>
219 </dd>
220
221 </dl>
222 </div>
223 </li>
224
225
226 <li class="option" id="option-label">
227 <div class="option-header">
228 <h3 class="option-name"><a href="#option-label">label</a></h3>
229 <dl>
230 <dt class="option-type-label">Type:</dt>
231 <dd class="option-type">String</dd>
232
233 <dt class="option-default-label">Default:</dt>
234 <dd class="option-default">HTML content of the button, or value attribute</dd>
235
236 </dl>
237 </div>
238 <div class="option-description">
239 <p>Text to show on the button. When not specified (null), the element's html content is used, or its value attribute when it's an input element of type submit or reset; or the html content of the associated label element if its an input of type radio or checkbox</p>
240 </div>
241 <div class="option-examples">
242 <h4>Code examples</h4>
243 <dl class="option-examples-list">
244
245 <dt>
246 Initialize a button with the <code>label</code> option specified.
247 </dt>
248 <dd>
249 <pre><code>$( ".selector" ).button({ label: "custom label" });</code></pre>
250 </dd>
251
252
253 <dt>
254 Get or set the <code>label</code> option, after init.
255 </dt>
256 <dd>
257 <pre><code>//getter
258 var label = $( ".selector" ).button( "option", "label" );
259 //setter
260 $( ".selector" ).button( "option", "label", "custom label" );</code></pre>
261 </dd>
262
263 </dl>
264 </div>
265 </li>
266
267 </ul>
268 </div>
269 <div id="events">
270 <h2 class="top-header">Events</h2>
271 <ul class="events-list">
272
273 <li class="event" id="event-create">
274 <div class="event-header">
275 <h3 class="event-name"><a href="#event-create">create</a></h3>
276 <dl>
277 <dt class="event-type-label">Type:</dt>
278 <dd class="event-type">buttoncreate</dd>
279 </dl>
280 </div>
281 <div class="event-description">
282 <p>This event is triggered when button is created.</p>
283 </div>
284 <div class="event-examples">
285 <h4>Code examples</h4>
286 <dl class="event-examples-list">
287
288 <dt>
289 Supply a callback function to handle the <code>create</code> event as an init option.
290 </dt>
291 <dd>
292 <pre><code>$( &quot;.selector&quot; ).button({
293 create: function(event, ui) { ... }
294 });</code></pre>
295 </dd>
296
297
298 <dt>
299 Bind to the <code>create</code> event by type: <code>buttoncreate</code>.
300 </dt>
301 <dd>
302 <pre><code>$( &quot;.selector&quot; ).bind( &quot;buttoncreate&quot;, function(event, ui) {
303 ...
304 });</code></pre>
305 </dd>
306
307 </dl>
308 </div>
309 </li>
310
311 </p>
312 <p>There are no events for this plugin.</p>
313 </ul>
314 </div>
315 <div id="methods">
316 <h2 class="top-header">Methods</h2>
317 <ul class="methods-list">
318
319 <li class="method" id="method-destroy">
320 <div class="method-header">
321 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
322 <dl>
323 <dt class="method-signature-label">Signature:</dt>
324 <dd class="method-signature">.button( "destroy"
325
326
327
328
329
330
331
332 )</dd>
333 </dl>
334 </div>
335 <div class="method-description">
336 <p>Remove the button functionality completely. This will return the element back to its pre-init state.</p>
337 </div>
338 </li>
339
340 <p>
341 <li class="method" id="method-disable">
342 <div class="method-header">
343 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
344 <dl>
345 <dt class="method-signature-label">Signature:</dt>
346 <dd class="method-signature">.button( "disable"
347
348
349
350
351
352
353
354 )</dd>
355 </dl>
356 </div>
357 <div class="method-description">
358 <p>Disable the button.</p>
359 </div>
360 </li>
361
362
363 <li class="method" id="method-enable">
364 <div class="method-header">
365 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
366 <dl>
367 <dt class="method-signature-label">Signature:</dt>
368 <dd class="method-signature">.button( "enable"
369
370
371
372
373
374
375
376 )</dd>
377 </dl>
378 </div>
379 <div class="method-description">
380 <p>Enable the button.</p>
381 </div>
382 </li>
383
384
385 <li class="method" id="method-option">
386 <div class="method-header">
387 <h3 class="method-name"><a href="#method-option">option</a></h3>
388 <dl>
389 <dt class="method-signature-label">Signature:</dt>
390 <dd class="method-signature">.button( "option"
391
392 , optionName
393
394 , <span class="optional">[</span>value<span class="optional">] </span>
395
396
397
398 )</dd>
399 </dl>
400 </div>
401 <div class="method-description">
402 <p>Get or set any button option. If no value is specified, will act as a getter.</p>
403 </div>
404 </li>
405
406
407 <li class="method" id="method-option">
408 <div class="method-header">
409 <h3 class="method-name"><a href="#method-option">option</a></h3>
410 <dl>
411 <dt class="method-signature-label">Signature:</dt>
412 <dd class="method-signature">.button( "option"
413
414 , options
415
416
417
418
419
420 )</dd>
421 </dl>
422 </div>
423 <div class="method-description">
424 <p>Set multiple button options at once by providing an options object.</p>
425 </div>
426 </li>
427
428
429 <li class="method" id="method-widget">
430 <div class="method-header">
431 <h3 class="method-name"><a href="#method-widget">widget</a></h3>
432 <dl>
433 <dt class="method-signature-label">Signature:</dt>
434 <dd class="method-signature">.button( "widget"
435
436
437
438
439
440
441
442 )</dd>
443 </dl>
444 </div>
445 <div class="method-description">
446 <p>Returns the .ui-button element.</p>
447 </div>
448 </li>
449
450
451 <li class="method" id="method-refresh">
452 <div class="method-header">
453 <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
454 <dl>
455 <dt class="method-signature-label">Signature:</dt>
456 <dd class="method-signature">.button( "refresh"
457
458
459
460
461
462
463
464 )</dd>
465 </dl>
466 </div>
467 <div class="method-description">
468 <p>Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.</p>
469 </div>
470 </li>
471
472 </ul>
473 </div>
474 <div id="theming">
475 <h2 class="top-header">Theming</h2>
476 <p>The jQuery UI Button plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
477 </p>
478 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.
479 </p>
480
481 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
482 &lt;button class=&quot;<strong>ui-button ui-button-text-only</strong> ui-widget ui-state-default ui-corner-all&quot;&gt;<br />
483 &nbsp;&nbsp;&nbsp;&lt;span class=&quot;<strong>ui-button-text</strong>&quot;&gt;Button Label&lt;/span&gt;<br />&lt;/button&gt;
484 <p class="theme-note">
485 <strong>
486 Note: This is a sample of markup generated by the button plugin, not markup you should use to create a button. The only markup needed for that is &lt;button&gt;Button Label&lt;/button&gt;.
487 </strong>
488 </p>
489
490 </div>
491 </div>
492
493 </p><!--
494 Pre-expand include size: 24542 bytes
495 Post-expand include size: 31799 bytes
496 Template argument size: 14018 bytes
497 Maximum: 2097152 bytes
498 -->
499
500 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3767-1!1!0!!en!2 and timestamp 20110315194630 -->