|
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 Slider</h1> |
|
11 <div id="overview"> |
|
12 <h2 class="top-header">Overview</h2> |
|
13 <div id="overview-main"> |
|
14 <p>The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.</p> |
|
15 <p>All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'): |
|
16 </p><p>The slider widget will create handle elements with the class 'ui-slider-handle' on initialization. You can specify custom handle elements by creating and appending the elements and adding the 'ui-slider-handle' class before init. It will only create the number of handles needed to match the length of value/values. For example, if you specify 'values: [1, 5, 18]' and create one custom handle, the plugin will create the other two. |
|
17 </p> |
|
18 <ul> |
|
19 <li><b>ui.handle</b>: DOMElement - the current focused handle |
|
20 <li><b>ui.value</b>: Integer - the current handle's value |
|
21 </ul> |
|
22 </div> |
|
23 <div id="overview-dependencies"> |
|
24 <h3>Dependencies</h3> |
|
25 <ul> |
|
26 <li>UI Core</li> |
|
27 <li>UI Widget</li> |
|
28 <li>UI Mouse</li> |
|
29 </ul> |
|
30 </div> |
|
31 <div id="overview-example"> |
|
32 <h3>Example</h3> |
|
33 <div id="overview-example" class="example"> |
|
34 <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul> |
|
35 <p><div id="demo" class="tabs-container" rel=""> |
|
36 A simple jQuery UI Slider.<br /> |
|
37 </p> |
|
38 <pre>$("#slider").slider(); |
|
39 </pre> |
|
40 <p></div><div id="source" class="tabs-container"> |
|
41 </p> |
|
42 <pre><!DOCTYPE html> |
|
43 <html> |
|
44 <head> |
|
45 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> |
|
46 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> |
|
47 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> |
|
48 <style type="text/css"> |
|
49 #slider { margin: 10px; } |
|
50 </style> |
|
51 <script> |
|
52 $(document).ready(function() { |
|
53 $("#slider").slider(); |
|
54 }); |
|
55 </script> |
|
56 </head> |
|
57 <body style="font-size:62.5%;"> |
|
58 |
|
59 <div id="slider"></div> |
|
60 |
|
61 </body> |
|
62 </html> |
|
63 </pre> |
|
64 <p></div> |
|
65 </p><p></div> |
|
66 </div> |
|
67 </div> |
|
68 <div id="options"> |
|
69 <h2 class="top-header">Options</h2> |
|
70 <ul class="options-list"> |
|
71 |
|
72 <li class="option" id="option-disabled"> |
|
73 <div class="option-header"> |
|
74 <h3 class="option-name"><a href="#option-disabled">disabled</a></h3> |
|
75 <dl> |
|
76 <dt class="option-type-label">Type:</dt> |
|
77 <dd class="option-type">Boolean</dd> |
|
78 |
|
79 <dt class="option-default-label">Default:</dt> |
|
80 <dd class="option-default">false</dd> |
|
81 |
|
82 </dl> |
|
83 </div> |
|
84 <div class="option-description"> |
|
85 <p>Disables (true) or enables (false) the slider. Can be set when initialising (first creating) the slider.</p> |
|
86 </div> |
|
87 <div class="option-examples"> |
|
88 <h4>Code examples</h4> |
|
89 <dl class="option-examples-list"> |
|
90 |
|
91 <dt> |
|
92 Initialize a slider with the <code>disabled</code> option specified. |
|
93 </dt> |
|
94 <dd> |
|
95 <pre><code>$( ".selector" ).slider({ disabled: true });</code></pre> |
|
96 </dd> |
|
97 |
|
98 |
|
99 <dt> |
|
100 Get or set the <code>disabled</code> option, after init. |
|
101 </dt> |
|
102 <dd> |
|
103 <pre><code>//getter |
|
104 var disabled = $( ".selector" ).slider( "option", "disabled" ); |
|
105 //setter |
|
106 $( ".selector" ).slider( "option", "disabled", true );</code></pre> |
|
107 </dd> |
|
108 |
|
109 </dl> |
|
110 </div> |
|
111 </li> |
|
112 |
|
113 |
|
114 <li class="option" id="option-animate"> |
|
115 <div class="option-header"> |
|
116 <h3 class="option-name"><a href="#option-animate">animate</a></h3> |
|
117 <dl> |
|
118 <dt class="option-type-label">Type:</dt> |
|
119 <dd class="option-type">Boolean, String, Number</dd> |
|
120 |
|
121 <dt class="option-default-label">Default:</dt> |
|
122 <dd class="option-default">false</dd> |
|
123 |
|
124 </dl> |
|
125 </div> |
|
126 <div class="option-description"> |
|
127 <p>Whether to slide handle smoothly when user click outside handle on the bar. Will also accept a string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).</p> |
|
128 </div> |
|
129 <div class="option-examples"> |
|
130 <h4>Code examples</h4> |
|
131 <dl class="option-examples-list"> |
|
132 |
|
133 <dt> |
|
134 Initialize a slider with the <code>animate</code> option specified. |
|
135 </dt> |
|
136 <dd> |
|
137 <pre><code>$( ".selector" ).slider({ animate: true });</code></pre> |
|
138 </dd> |
|
139 |
|
140 |
|
141 <dt> |
|
142 Get or set the <code>animate</code> option, after init. |
|
143 </dt> |
|
144 <dd> |
|
145 <pre><code>//getter |
|
146 var animate = $( ".selector" ).slider( "option", "animate" ); |
|
147 //setter |
|
148 $( ".selector" ).slider( "option", "animate", true );</code></pre> |
|
149 </dd> |
|
150 |
|
151 </dl> |
|
152 </div> |
|
153 </li> |
|
154 |
|
155 |
|
156 <li class="option" id="option-max"> |
|
157 <div class="option-header"> |
|
158 <h3 class="option-name"><a href="#option-max">max</a></h3> |
|
159 <dl> |
|
160 <dt class="option-type-label">Type:</dt> |
|
161 <dd class="option-type">Number</dd> |
|
162 |
|
163 <dt class="option-default-label">Default:</dt> |
|
164 <dd class="option-default">100</dd> |
|
165 |
|
166 </dl> |
|
167 </div> |
|
168 <div class="option-description"> |
|
169 <p>The maximum value of the slider.</p> |
|
170 </div> |
|
171 <div class="option-examples"> |
|
172 <h4>Code examples</h4> |
|
173 <dl class="option-examples-list"> |
|
174 |
|
175 <dt> |
|
176 Initialize a slider with the <code>max</code> option specified. |
|
177 </dt> |
|
178 <dd> |
|
179 <pre><code>$( ".selector" ).slider({ max: 7 });</code></pre> |
|
180 </dd> |
|
181 |
|
182 |
|
183 <dt> |
|
184 Get or set the <code>max</code> option, after init. |
|
185 </dt> |
|
186 <dd> |
|
187 <pre><code>//getter |
|
188 var max = $( ".selector" ).slider( "option", "max" ); |
|
189 //setter |
|
190 $( ".selector" ).slider( "option", "max", 7 );</code></pre> |
|
191 </dd> |
|
192 |
|
193 </dl> |
|
194 </div> |
|
195 </li> |
|
196 |
|
197 |
|
198 <li class="option" id="option-min"> |
|
199 <div class="option-header"> |
|
200 <h3 class="option-name"><a href="#option-min">min</a></h3> |
|
201 <dl> |
|
202 <dt class="option-type-label">Type:</dt> |
|
203 <dd class="option-type">Number</dd> |
|
204 |
|
205 <dt class="option-default-label">Default:</dt> |
|
206 <dd class="option-default">0</dd> |
|
207 |
|
208 </dl> |
|
209 </div> |
|
210 <div class="option-description"> |
|
211 <p>The minimum value of the slider.</p> |
|
212 </div> |
|
213 <div class="option-examples"> |
|
214 <h4>Code examples</h4> |
|
215 <dl class="option-examples-list"> |
|
216 |
|
217 <dt> |
|
218 Initialize a slider with the <code>min</code> option specified. |
|
219 </dt> |
|
220 <dd> |
|
221 <pre><code>$( ".selector" ).slider({ min: -7 });</code></pre> |
|
222 </dd> |
|
223 |
|
224 |
|
225 <dt> |
|
226 Get or set the <code>min</code> option, after init. |
|
227 </dt> |
|
228 <dd> |
|
229 <pre><code>//getter |
|
230 var min = $( ".selector" ).slider( "option", "min" ); |
|
231 //setter |
|
232 $( ".selector" ).slider( "option", "min", -7 );</code></pre> |
|
233 </dd> |
|
234 |
|
235 </dl> |
|
236 </div> |
|
237 </li> |
|
238 |
|
239 |
|
240 <li class="option" id="option-orientation"> |
|
241 <div class="option-header"> |
|
242 <h3 class="option-name"><a href="#option-orientation">orientation</a></h3> |
|
243 <dl> |
|
244 <dt class="option-type-label">Type:</dt> |
|
245 <dd class="option-type">String</dd> |
|
246 |
|
247 <dt class="option-default-label">Default:</dt> |
|
248 <dd class="option-default">'horizontal'</dd> |
|
249 |
|
250 </dl> |
|
251 </div> |
|
252 <div class="option-description"> |
|
253 <p>This option determines whether the slider has the min at the left, the max at the right or the min at the bottom, the max at the top. Possible values: 'horizontal', 'vertical'.</p> |
|
254 </div> |
|
255 <div class="option-examples"> |
|
256 <h4>Code examples</h4> |
|
257 <dl class="option-examples-list"> |
|
258 |
|
259 <dt> |
|
260 Initialize a slider with the <code>orientation</code> option specified. |
|
261 </dt> |
|
262 <dd> |
|
263 <pre><code>$( ".selector" ).slider({ orientation: 'vertical' });</code></pre> |
|
264 </dd> |
|
265 |
|
266 |
|
267 <dt> |
|
268 Get or set the <code>orientation</code> option, after init. |
|
269 </dt> |
|
270 <dd> |
|
271 <pre><code>//getter |
|
272 var orientation = $( ".selector" ).slider( "option", "orientation" ); |
|
273 //setter |
|
274 $( ".selector" ).slider( "option", "orientation", 'vertical' );</code></pre> |
|
275 </dd> |
|
276 |
|
277 </dl> |
|
278 </div> |
|
279 </li> |
|
280 |
|
281 |
|
282 <li class="option" id="option-range"> |
|
283 <div class="option-header"> |
|
284 <h3 class="option-name"><a href="#option-range">range</a></h3> |
|
285 <dl> |
|
286 <dt class="option-type-label">Type:</dt> |
|
287 <dd class="option-type">Boolean, String</dd> |
|
288 |
|
289 <dt class="option-default-label">Default:</dt> |
|
290 <dd class="option-default">false</dd> |
|
291 |
|
292 </dl> |
|
293 </div> |
|
294 <div class="option-description"> |
|
295 <p>If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and 'max'. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.</p> |
|
296 </div> |
|
297 <div class="option-examples"> |
|
298 <h4>Code examples</h4> |
|
299 <dl class="option-examples-list"> |
|
300 |
|
301 <dt> |
|
302 Initialize a slider with the <code>range</code> option specified. |
|
303 </dt> |
|
304 <dd> |
|
305 <pre><code>$( ".selector" ).slider({ range: 'min' });</code></pre> |
|
306 </dd> |
|
307 |
|
308 |
|
309 <dt> |
|
310 Get or set the <code>range</code> option, after init. |
|
311 </dt> |
|
312 <dd> |
|
313 <pre><code>//getter |
|
314 var range = $( ".selector" ).slider( "option", "range" ); |
|
315 //setter |
|
316 $( ".selector" ).slider( "option", "range", 'min' );</code></pre> |
|
317 </dd> |
|
318 |
|
319 </dl> |
|
320 </div> |
|
321 </li> |
|
322 |
|
323 |
|
324 <li class="option" id="option-step"> |
|
325 <div class="option-header"> |
|
326 <h3 class="option-name"><a href="#option-step">step</a></h3> |
|
327 <dl> |
|
328 <dt class="option-type-label">Type:</dt> |
|
329 <dd class="option-type">Number</dd> |
|
330 |
|
331 <dt class="option-default-label">Default:</dt> |
|
332 <dd class="option-default">1</dd> |
|
333 |
|
334 </dl> |
|
335 </div> |
|
336 <div class="option-description"> |
|
337 <p>Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.</p> |
|
338 </div> |
|
339 <div class="option-examples"> |
|
340 <h4>Code examples</h4> |
|
341 <dl class="option-examples-list"> |
|
342 |
|
343 <dt> |
|
344 Initialize a slider with the <code>step</code> option specified. |
|
345 </dt> |
|
346 <dd> |
|
347 <pre><code>$( ".selector" ).slider({ step: 5 });</code></pre> |
|
348 </dd> |
|
349 |
|
350 |
|
351 <dt> |
|
352 Get or set the <code>step</code> option, after init. |
|
353 </dt> |
|
354 <dd> |
|
355 <pre><code>//getter |
|
356 var step = $( ".selector" ).slider( "option", "step" ); |
|
357 //setter |
|
358 $( ".selector" ).slider( "option", "step", 5 );</code></pre> |
|
359 </dd> |
|
360 |
|
361 </dl> |
|
362 </div> |
|
363 </li> |
|
364 |
|
365 |
|
366 <li class="option" id="option-value"> |
|
367 <div class="option-header"> |
|
368 <h3 class="option-name"><a href="#option-value">value</a></h3> |
|
369 <dl> |
|
370 <dt class="option-type-label">Type:</dt> |
|
371 <dd class="option-type">Number</dd> |
|
372 |
|
373 <dt class="option-default-label">Default:</dt> |
|
374 <dd class="option-default">0</dd> |
|
375 |
|
376 </dl> |
|
377 </div> |
|
378 <div class="option-description"> |
|
379 <p>Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.</p> |
|
380 </div> |
|
381 <div class="option-examples"> |
|
382 <h4>Code examples</h4> |
|
383 <dl class="option-examples-list"> |
|
384 |
|
385 <dt> |
|
386 Initialize a slider with the <code>value</code> option specified. |
|
387 </dt> |
|
388 <dd> |
|
389 <pre><code>$( ".selector" ).slider({ value: 37 });</code></pre> |
|
390 </dd> |
|
391 |
|
392 |
|
393 <dt> |
|
394 Get or set the <code>value</code> option, after init. |
|
395 </dt> |
|
396 <dd> |
|
397 <pre><code>//getter |
|
398 var value = $( ".selector" ).slider( "option", "value" ); |
|
399 //setter |
|
400 $( ".selector" ).slider( "option", "value", 37 );</code></pre> |
|
401 </dd> |
|
402 |
|
403 </dl> |
|
404 </div> |
|
405 </li> |
|
406 |
|
407 |
|
408 <li class="option" id="option-values"> |
|
409 <div class="option-header"> |
|
410 <h3 class="option-name"><a href="#option-values">values</a></h3> |
|
411 <dl> |
|
412 <dt class="option-type-label">Type:</dt> |
|
413 <dd class="option-type">Array</dd> |
|
414 |
|
415 <dt class="option-default-label">Default:</dt> |
|
416 <dd class="option-default">null</dd> |
|
417 |
|
418 </dl> |
|
419 </div> |
|
420 <div class="option-description"> |
|
421 <p>This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.</p> |
|
422 </div> |
|
423 <div class="option-examples"> |
|
424 <h4>Code examples</h4> |
|
425 <dl class="option-examples-list"> |
|
426 |
|
427 <dt> |
|
428 Initialize a slider with the <code>values</code> option specified. |
|
429 </dt> |
|
430 <dd> |
|
431 <pre><code>$( ".selector" ).slider({ values: [1,5,9] });</code></pre> |
|
432 </dd> |
|
433 |
|
434 |
|
435 <dt> |
|
436 Get or set the <code>values</code> option, after init. |
|
437 </dt> |
|
438 <dd> |
|
439 <pre><code>//getter |
|
440 var values = $( ".selector" ).slider( "option", "values" ); |
|
441 //setter |
|
442 $( ".selector" ).slider( "option", "values", [1,5,9] );</code></pre> |
|
443 </dd> |
|
444 |
|
445 </dl> |
|
446 </div> |
|
447 </li> |
|
448 |
|
449 </ul> |
|
450 </div> |
|
451 <div id="events"> |
|
452 <h2 class="top-header">Events</h2> |
|
453 <ul class="events-list"> |
|
454 |
|
455 <li class="event" id="event-start"> |
|
456 <div class="event-header"> |
|
457 <h3 class="event-name"><a href="#event-start">start</a></h3> |
|
458 <dl> |
|
459 <dt class="event-type-label">Type:</dt> |
|
460 <dd class="event-type">slidestart</dd> |
|
461 </dl> |
|
462 </div> |
|
463 <div class="event-description"> |
|
464 <p>This event is triggered when the user starts sliding.</p> |
|
465 </div> |
|
466 <div class="event-examples"> |
|
467 <h4>Code examples</h4> |
|
468 <dl class="event-examples-list"> |
|
469 |
|
470 <dt> |
|
471 Supply a callback function to handle the <code>start</code> event as an init option. |
|
472 </dt> |
|
473 <dd> |
|
474 <pre><code>$( ".selector" ).slider({ |
|
475 start: function(event, ui) { ... } |
|
476 });</code></pre> |
|
477 </dd> |
|
478 |
|
479 |
|
480 <dt> |
|
481 Bind to the <code>start</code> event by type: <code>slidestart</code>. |
|
482 </dt> |
|
483 <dd> |
|
484 <pre><code>$( ".selector" ).bind( "slidestart", function(event, ui) { |
|
485 ... |
|
486 });</code></pre> |
|
487 </dd> |
|
488 |
|
489 </dl> |
|
490 </div> |
|
491 </li> |
|
492 |
|
493 |
|
494 <li class="event" id="event-slide"> |
|
495 <div class="event-header"> |
|
496 <h3 class="event-name"><a href="#event-slide">slide</a></h3> |
|
497 <dl> |
|
498 <dt class="event-type-label">Type:</dt> |
|
499 <dd class="event-type">slide</dd> |
|
500 </dl> |
|
501 </div> |
|
502 <div class="event-description"> |
|
503 <p>This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value. |
|
504 </p><p>Return false in order to prevent a slide, based on ui.value.</p> |
|
505 </div> |
|
506 <div class="event-examples"> |
|
507 <h4>Code examples</h4> |
|
508 <dl class="event-examples-list"> |
|
509 |
|
510 <dt> |
|
511 Supply a callback function to handle the <code>slide</code> event as an init option. |
|
512 </dt> |
|
513 <dd> |
|
514 <pre><code>$( ".selector" ).slider({ |
|
515 slide: function(event, ui) { ... } |
|
516 });</code></pre> |
|
517 </dd> |
|
518 |
|
519 |
|
520 <dt> |
|
521 Bind to the <code>slide</code> event by type: <code>slide</code>. |
|
522 </dt> |
|
523 <dd> |
|
524 <pre><code>$( ".selector" ).bind( "slide", function(event, ui) { |
|
525 ... |
|
526 });</code></pre> |
|
527 </dd> |
|
528 |
|
529 </dl> |
|
530 </div> |
|
531 </li> |
|
532 |
|
533 |
|
534 <li class="event" id="event-change"> |
|
535 <div class="event-header"> |
|
536 <h3 class="event-name"><a href="#event-change">change</a></h3> |
|
537 <dl> |
|
538 <dt class="event-type-label">Type:</dt> |
|
539 <dd class="event-type">slidechange</dd> |
|
540 </dl> |
|
541 </div> |
|
542 <div class="event-description"> |
|
543 <p>This event is triggered on slide stop, or if the value is changed programmatically (by the <code>value</code> method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.</p> |
|
544 </div> |
|
545 <div class="event-examples"> |
|
546 <h4>Code examples</h4> |
|
547 <dl class="event-examples-list"> |
|
548 |
|
549 <dt> |
|
550 Supply a callback function to handle the <code>change</code> event as an init option. |
|
551 </dt> |
|
552 <dd> |
|
553 <pre><code>$( ".selector" ).slider({ |
|
554 change: function(event, ui) { ... } |
|
555 });</code></pre> |
|
556 </dd> |
|
557 |
|
558 |
|
559 <dt> |
|
560 Bind to the <code>change</code> event by type: <code>slidechange</code>. |
|
561 </dt> |
|
562 <dd> |
|
563 <pre><code>$( ".selector" ).bind( "slidechange", function(event, ui) { |
|
564 ... |
|
565 });</code></pre> |
|
566 </dd> |
|
567 |
|
568 </dl> |
|
569 </div> |
|
570 </li> |
|
571 |
|
572 |
|
573 <li class="event" id="event-stop"> |
|
574 <div class="event-header"> |
|
575 <h3 class="event-name"><a href="#event-stop">stop</a></h3> |
|
576 <dl> |
|
577 <dt class="event-type-label">Type:</dt> |
|
578 <dd class="event-type">slidestop</dd> |
|
579 </dl> |
|
580 </div> |
|
581 <div class="event-description"> |
|
582 <p>This event is triggered when the user stops sliding.</p> |
|
583 </div> |
|
584 <div class="event-examples"> |
|
585 <h4>Code examples</h4> |
|
586 <dl class="event-examples-list"> |
|
587 |
|
588 <dt> |
|
589 Supply a callback function to handle the <code>stop</code> event as an init option. |
|
590 </dt> |
|
591 <dd> |
|
592 <pre><code>$( ".selector" ).slider({ |
|
593 stop: function(event, ui) { ... } |
|
594 });</code></pre> |
|
595 </dd> |
|
596 |
|
597 |
|
598 <dt> |
|
599 Bind to the <code>stop</code> event by type: <code>slidestop</code>. |
|
600 </dt> |
|
601 <dd> |
|
602 <pre><code>$( ".selector" ).bind( "slidestop", function(event, ui) { |
|
603 ... |
|
604 });</code></pre> |
|
605 </dd> |
|
606 |
|
607 </dl> |
|
608 </div> |
|
609 </li> |
|
610 |
|
611 </ul> |
|
612 </div> |
|
613 <div id="methods"> |
|
614 <h2 class="top-header">Methods</h2> |
|
615 <ul class="methods-list"> |
|
616 |
|
617 <li class="method" id="method-destroy"> |
|
618 <div class="method-header"> |
|
619 <h3 class="method-name"><a href="#method-destroy">destroy</a></h3> |
|
620 <dl> |
|
621 <dt class="method-signature-label">Signature:</dt> |
|
622 <dd class="method-signature">.slider( "destroy" |
|
623 |
|
624 |
|
625 |
|
626 |
|
627 |
|
628 |
|
629 |
|
630 )</dd> |
|
631 </dl> |
|
632 </div> |
|
633 <div class="method-description"> |
|
634 <p>Remove the slider functionality completely. This will return the element back to its pre-init state.</p> |
|
635 </div> |
|
636 </li> |
|
637 |
|
638 |
|
639 <li class="method" id="method-disable"> |
|
640 <div class="method-header"> |
|
641 <h3 class="method-name"><a href="#method-disable">disable</a></h3> |
|
642 <dl> |
|
643 <dt class="method-signature-label">Signature:</dt> |
|
644 <dd class="method-signature">.slider( "disable" |
|
645 |
|
646 |
|
647 |
|
648 |
|
649 |
|
650 |
|
651 |
|
652 )</dd> |
|
653 </dl> |
|
654 </div> |
|
655 <div class="method-description"> |
|
656 <p>Disable the slider.</p> |
|
657 </div> |
|
658 </li> |
|
659 |
|
660 |
|
661 <li class="method" id="method-enable"> |
|
662 <div class="method-header"> |
|
663 <h3 class="method-name"><a href="#method-enable">enable</a></h3> |
|
664 <dl> |
|
665 <dt class="method-signature-label">Signature:</dt> |
|
666 <dd class="method-signature">.slider( "enable" |
|
667 |
|
668 |
|
669 |
|
670 |
|
671 |
|
672 |
|
673 |
|
674 )</dd> |
|
675 </dl> |
|
676 </div> |
|
677 <div class="method-description"> |
|
678 <p>Enable the slider.</p> |
|
679 </div> |
|
680 </li> |
|
681 |
|
682 |
|
683 <li class="method" id="method-option"> |
|
684 <div class="method-header"> |
|
685 <h3 class="method-name"><a href="#method-option">option</a></h3> |
|
686 <dl> |
|
687 <dt class="method-signature-label">Signature:</dt> |
|
688 <dd class="method-signature">.slider( "option" |
|
689 |
|
690 , optionName |
|
691 |
|
692 , <span class="optional">[</span>value<span class="optional">] </span> |
|
693 |
|
694 |
|
695 |
|
696 )</dd> |
|
697 </dl> |
|
698 </div> |
|
699 <div class="method-description"> |
|
700 <p>Get or set any slider option. If no value is specified, will act as a getter.</p> |
|
701 </div> |
|
702 </li> |
|
703 |
|
704 |
|
705 <li class="method" id="method-option"> |
|
706 <div class="method-header"> |
|
707 <h3 class="method-name"><a href="#method-option">option</a></h3> |
|
708 <dl> |
|
709 <dt class="method-signature-label">Signature:</dt> |
|
710 <dd class="method-signature">.slider( "option" |
|
711 |
|
712 , options |
|
713 |
|
714 |
|
715 |
|
716 |
|
717 |
|
718 )</dd> |
|
719 </dl> |
|
720 </div> |
|
721 <div class="method-description"> |
|
722 <p>Set multiple slider options at once by providing an options object.</p> |
|
723 </div> |
|
724 </li> |
|
725 |
|
726 |
|
727 <li class="method" id="method-widget"> |
|
728 <div class="method-header"> |
|
729 <h3 class="method-name"><a href="#method-widget">widget</a></h3> |
|
730 <dl> |
|
731 <dt class="method-signature-label">Signature:</dt> |
|
732 <dd class="method-signature">.slider( "widget" |
|
733 |
|
734 |
|
735 |
|
736 |
|
737 |
|
738 |
|
739 |
|
740 )</dd> |
|
741 </dl> |
|
742 </div> |
|
743 <div class="method-description"> |
|
744 <p>Returns the .ui-slider element.</p> |
|
745 </div> |
|
746 </li> |
|
747 |
|
748 |
|
749 <li class="method" id="method-value"> |
|
750 <div class="method-header"> |
|
751 <h3 class="method-name"><a href="#method-value">value</a></h3> |
|
752 <dl> |
|
753 <dt class="method-signature-label">Signature:</dt> |
|
754 <dd class="method-signature">.slider( "value" |
|
755 |
|
756 , <span class="optional">[</span>value<span class="optional">] </span> |
|
757 |
|
758 |
|
759 |
|
760 |
|
761 |
|
762 )</dd> |
|
763 </dl> |
|
764 </div> |
|
765 <div class="method-description"> |
|
766 <p>Gets or sets the value of the slider. For single handle sliders.</p> |
|
767 </div> |
|
768 </li> |
|
769 |
|
770 |
|
771 <li class="method" id="method-values"> |
|
772 <div class="method-header"> |
|
773 <h3 class="method-name"><a href="#method-values">values</a></h3> |
|
774 <dl> |
|
775 <dt class="method-signature-label">Signature:</dt> |
|
776 <dd class="method-signature">.slider( "values" |
|
777 |
|
778 , index |
|
779 |
|
780 , <span class="optional">[</span>value<span class="optional">] </span> |
|
781 |
|
782 |
|
783 |
|
784 )</dd> |
|
785 </dl> |
|
786 </div> |
|
787 <div class="method-description"> |
|
788 <p>Gets or sets the values of the slider. For multiple handle or range sliders.</p> |
|
789 </div> |
|
790 </li> |
|
791 |
|
792 </ul> |
|
793 </div> |
|
794 <div id="theming"> |
|
795 <h2 class="top-header">Theming</h2> |
|
796 <p>The jQuery UI Slider 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. |
|
797 </p> |
|
798 <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below. |
|
799 </p> |
|
800 |
|
801 <h3>Sample markup with jQuery UI CSS Framework classes</h3> |
|
802 <div class="ui-slider<strong> ui-slider-horizontal</strong> ui-widget ui-widget-content ui-corner-all"><br /> |
|
803 <a style="left: 0%;" class="<strong>ui-slider-handle</strong> ui-state-default ui-corner-all" href="#"></a><br /> |
|
804 </div><br /> |
|
805 <p class="theme-note"> |
|
806 <strong> |
|
807 Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is <div><div>. |
|
808 </strong> |
|
809 </p> |
|
810 |
|
811 </div> |
|
812 </div> |
|
813 |
|
814 </p><!-- |
|
815 Pre-expand include size: 34930 bytes |
|
816 Post-expand include size: 52896 bytes |
|
817 Template argument size: 27114 bytes |
|
818 Maximum: 2097152 bytes |
|
819 --> |
|
820 |
|
821 <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3776-1!1!0!!en!2 and timestamp 20100421144758 --> |