aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/docs/progressbar.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/docs/progressbar.html')
-rw-r--r--static/development-bundle/docs/progressbar.html295
1 files changed, 295 insertions, 0 deletions
diff --git a/static/development-bundle/docs/progressbar.html b/static/development-bundle/docs/progressbar.html
new file mode 100644
index 0000000..0e42d5a
--- /dev/null
+++ b/static/development-bundle/docs/progressbar.html
@@ -0,0 +1,295 @@
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 Progressbar</h1>
11 <div id="overview">
12 <h2 class="top-header">Overview</h2>
13 <div id="overview-main">
14 <p>
15The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.
16</p>
17<p>
18This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback.
19</p>
20 </div>
21 <div id="overview-dependencies">
22 <h3>Dependencies</h3>
23 <ul>
24<li>UI Core</li>
25</ul>
26 </div>
27 <div id="overview-example">
28 <h3>Example</h3>
29 <div id="overview-example" class="example">
30<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
31<p><div id="demo" class="tabs-container" rel="100">
32A simple jQuery UI Progressbar.<br />
33</p>
34<pre>$(&quot;#progressbar&quot;).progressbar({ value: 37 });
35</pre>
36<p></div><div id="source" class="tabs-container">
37</p>
38<pre>&lt;!DOCTYPE html&gt;
39&lt;html&gt;
40&lt;head&gt;
41 &lt;link type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
42 &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
43 &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
44 &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.progressbar.js&quot;&gt;&lt;/script&gt;
45 &lt;script type="text/javascript"&gt;
46 $(document).ready(function(){
47 $(&quot;#progressbar&quot;).progressbar({ value: 37 });
48 });
49 &lt;/script&gt;
50&lt;/head&gt;
51&lt;body style="font-size:62.5%;"&gt;
52
53&lt;div id=&quot;progressbar&quot;&gt;&lt;/div&gt;
54
55&lt;/body&gt;
56&lt;/html&gt;
57</pre>
58<p></div>
59</p><p></div>
60 </div>
61 </div>
62 <div id="options">
63 <h2 class="top-header">Options</h2>
64 <ul class="options-list">
65
66<li class="option" id="option-value">
67 <div class="option-header">
68 <h3 class="option-name"><a href="#option-value">value</a></h3>
69 <dl>
70 <dt class="option-type-label">Type:</dt>
71 <dd class="option-type">Number</dd>
72
73 <dt class="option-default-label">Default:</dt>
74 <dd class="option-default">0</dd>
75
76 </dl>
77 </div>
78 <div class="option-description">
79 <p>The value of the progressbar.</p>
80 </div>
81 <div class="option-examples">
82 <h4>Code examples</h4>
83 <dl class="option-examples-list">
84
85<dt>
86 Initialize a progressbar with the <code>value</code> option specified.
87</dt>
88<dd>
89<pre><code>$('.selector').progressbar({ value: 37 });</code></pre>
90</dd>
91
92
93<dt>
94 Get or set the <code>value</code> option, after init.
95</dt>
96<dd>
97<pre><code>//getter
98var value = $('.selector').progressbar('option', 'value');
99//setter
100$('.selector').progressbar('option', 'value', 37);</code></pre>
101</dd>
102
103 </dl>
104 </div>
105</li>
106
107 </ul>
108 </div>
109 <div id="events">
110 <h2 class="top-header">Events</h2>
111 <ul class="events-list">
112
113<li class="event" id="event-change">
114 <div class="event-header">
115 <h3 class="event-name"><a href="#event-change">change</a></h3>
116 <dl>
117 <dt class="event-type-label">Type:</dt>
118 <dd class="event-type">progressbarchange</dd>
119 </dl>
120 </div>
121 <div class="event-description">
122 <p>This event is triggered when the value of the progressbar changes.</p>
123 </div>
124 <div class="event-examples">
125 <h4>Code examples</h4>
126 <dl class="event-examples-list">
127
128<dt>
129 Supply a callback function to handle the <code>change</code> event as an init option.
130</dt>
131<dd>
132<pre><code>$('.selector').progressbar({
133 change: function(event, ui) { ... }
134});</code></pre>
135</dd>
136
137
138<dt>
139 Bind to the <code>change</code> event by type: <code>progressbarchange</code>.
140</dt>
141<dd>
142<pre><code>$('.selector').bind('progressbarchange', function(event, ui) {
143 ...
144});</code></pre>
145</dd>
146
147 </dl>
148 </div>
149</li>
150
151 </ul>
152 </div>
153 <div id="methods">
154 <h2 class="top-header">Methods</h2>
155 <ul class="methods-list">
156
157<li class="method" id="method-destroy">
158 <div class="method-header">
159 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
160 <dl>
161 <dt class="method-signature-label">Signature:</dt>
162 <dd class="method-signature">.progressbar( 'destroy'
163
164
165
166
167
168
169
170)</dd>
171 </dl>
172 </div>
173 <div class="method-description">
174 <p>Remove the progressbar functionality completely. This will return the element back to its pre-init state.</p>
175 </div>
176</li>
177
178
179<li class="method" id="method-disable">
180 <div class="method-header">
181 <h3 class="method-name"><a href="#method-disable">disable</a></h3>
182 <dl>
183 <dt class="method-signature-label">Signature:</dt>
184 <dd class="method-signature">.progressbar( 'disable'
185
186
187
188
189
190
191
192)</dd>
193 </dl>
194 </div>
195 <div class="method-description">
196 <p>Disable the progressbar.</p>
197 </div>
198</li>
199
200
201<li class="method" id="method-enable">
202 <div class="method-header">
203 <h3 class="method-name"><a href="#method-enable">enable</a></h3>
204 <dl>
205 <dt class="method-signature-label">Signature:</dt>
206 <dd class="method-signature">.progressbar( 'enable'
207
208
209
210
211
212
213
214)</dd>
215 </dl>
216 </div>
217 <div class="method-description">
218 <p>Enable the progressbar.</p>
219 </div>
220</li>
221
222
223<li class="method" id="method-option">
224 <div class="method-header">
225 <h3 class="method-name"><a href="#method-option">option</a></h3>
226 <dl>
227 <dt class="method-signature-label">Signature:</dt>
228 <dd class="method-signature">.progressbar( 'option'
229
230, optionName
231
232, <span class="optional">[</span>value<span class="optional">] </span>
233
234
235
236)</dd>
237 </dl>
238 </div>
239 <div class="method-description">
240 <p>Get or set any progressbar option. If no value is specified, will act as a getter.</p>
241 </div>
242</li>
243
244
245<li class="method" id="method-value">
246 <div class="method-header">
247 <h3 class="method-name"><a href="#method-value">value</a></h3>
248 <dl>
249 <dt class="method-signature-label">Signature:</dt>
250 <dd class="method-signature">.progressbar( 'value'
251
252, <span class="optional">[</span>value<span class="optional">] </span>
253
254
255
256
257
258)</dd>
259 </dl>
260 </div>
261 <div class="method-description">
262 <p>This method gets or sets the current value of the progressbar.</p>
263 </div>
264</li>
265
266 </ul>
267 </div>
268 <div id="theming">
269 <h2 class="top-header">Theming</h2>
270 <p>The jQuery UI Progressbar 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.
271</p>
272 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.progressbar.css stylesheet that can be modified. These classes are highlighed in bold below.
273</p>
274
275 <h3>Sample markup with jQuery UI CSS Framework classes</h3>
276 &lt;div class=&quot;<strong>ui-progressbar </strong>ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
277 &nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 37%;&quot; class=&quot;<strong>ui-progressbar-value</strong> ui-widget-header ui-corner-left&quot;&gt;&lt;/div&gt;<br />
278 &lt;/div&gt;
279 <p class="theme-note">
280 <strong>
281 Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
282 </strong>
283 </p>
284
285 </div>
286</div>
287
288</p><!--
289Pre-expand include size: 14353 bytes
290Post-expand include size: 16672 bytes
291Template argument size: 7699 bytes
292Maximum: 2097152 bytes
293-->
294
295<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3348-1!1!0!!en!2 and timestamp 20090604112221 -->
© 2015 Mike Crute