Subversion Repositories Sites.obs-saisons.fr

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
40 aurelien 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>$(&quot;#selectable&quot;).selectable();
30
</pre>
31
<p></div><div id="source" class="tabs-container">
32
</p>
33
<pre>&lt;!DOCTYPE html&gt;
34
&lt;html&gt;
35
&lt;head&gt;
36
  &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;
37
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
38
  &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
39
  &lt;style type=&quot;text/css&quot;&gt;
40
#selectable .ui-selecting {
41
	background: silver;
42
}
43
#selectable .ui-selected {
44
	background: gray;
45
}
46
&lt;/style&gt;
47
 
48
  &lt;script&gt;
49
  $(document).ready(function() {
50
    $(&quot;#selectable&quot;).selectable();
51
  });
52
  &lt;/script&gt;
53
&lt;/head&gt;
54
&lt;body style="font-size:62.5%;"&gt;
55
 
56
&lt;ul id=&quot;selectable&quot;&gt;
57
&lt;li&gt;Item 1&lt;/li&gt;
58
&lt;li&gt;Item 2&lt;/li&gt;
59
&lt;li&gt;Item 3&lt;/li&gt;
60
&lt;li&gt;Item 4&lt;/li&gt;
61
&lt;li&gt;Item 5&lt;/li&gt;
62
&lt;/ul&gt;
63
 
64
&lt;/body&gt;
65
&lt;/html&gt;
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">selectableselected</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>$( &quot;.selector&quot; ).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>selectableselected</code>.
407
</dt>
408
<dd>
409
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableselected&quot;, 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">selectableselecting</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>$( &quot;.selector&quot; ).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>selectableselecting</code>.
446
</dt>
447
<dd>
448
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableselecting&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;selectablestart&quot;, 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>$( &quot;.selector&quot; ).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>$( &quot;.selector&quot; ).bind( &quot;selectablestop&quot;, 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">selectableunselected</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>$( &quot;.selector&quot; ).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>selectableunselected</code>.
563
</dt>
564
<dd>
565
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableunselected&quot;, 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">selectableunselecting</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>$( &quot;.selector&quot; ).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>selectableunselecting</code>.
602
</dt>
603
<dd>
604
<pre><code>$( &quot;.selector&quot; ).bind( &quot;selectableunselecting&quot;, 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
  &lt;ul class=&quot;<strong>ui-selectable</strong>&quot;&gt;<br />
783
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
784
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
785
&#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
786
&lt;/ul&gt;
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 />&lt;ul&gt;<br />
790
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
791
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
792
&#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
793
&lt;/ul&gt;.
794
    </strong>
795
  </p>
796
 
797
  </div>
798
</div>
799
 
800
</p><!--
801
Pre-expand include size: 33182 bytes
802
Post-expand include size: 51437 bytes
803
Template argument size: 26605 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 20100910074919 -->