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

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