Mercurial > hg > MPIWGThesaurus

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

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