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