|
0
|
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>$("#selectable").selectable();
|
|
|
32 </pre>
|
|
|
33 <p></div><div id="source" class="tabs-container">
|
|
|
34 </p>
|
|
|
35 <pre><!DOCTYPE html>
|
|
|
36 <html>
|
|
|
37 <head>
|
|
|
38 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
|
|
39 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
|
|
40 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
|
|
41 <style type="text/css">
|
|
|
42 #selectable .ui-selecting {
|
|
|
43 background: silver;
|
|
|
44 }
|
|
|
45 #selectable .ui-selected {
|
|
|
46 background: gray;
|
|
|
47 }
|
|
|
48 </style>
|
|
|
49
|
|
|
50 <script>
|
|
|
51 $(document).ready(function() {
|
|
|
52 $("#selectable").selectable();
|
|
|
53 });
|
|
|
54 </script>
|
|
|
55 </head>
|
|
|
56 <body style="font-size:62.5%;">
|
|
|
57
|
|
|
58 <ul id="selectable">
|
|
|
59 <li>Item 1</li>
|
|
|
60 <li>Item 2</li>
|
|
|
61 <li>Item 3</li>
|
|
|
62 <li>Item 4</li>
|
|
|
63 <li>Item 5</li>
|
|
|
64 </ul>
|
|
|
65
|
|
|
66 </body>
|
|
|
67 </html>
|
|
|
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>$( ".selector" ).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>$( ".selector" ).bind( "selectablecreate", 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>$( ".selector" ).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>$( ".selector" ).bind( "selectableselected", 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>$( ".selector" ).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>$( ".selector" ).bind( "selectableselecting", 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>$( ".selector" ).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>$( ".selector" ).bind( "selectablestart", 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>$( ".selector" ).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>$( ".selector" ).bind( "selectablestop", 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>$( ".selector" ).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>$( ".selector" ).bind( "selectableunselected", 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>$( ".selector" ).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>$( ".selector" ).bind( "selectableunselecting", 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 <ul class="<strong>ui-selectable</strong>"><br />
|
|
|
824    <li class="<strong>ui-selectee</strong>"></li><br />
|
|
|
825    <li class="<strong>ui-selectee</strong>"></li><br />
|
|
|
826    <li class="<strong>ui-selectee</strong>"></li><br />
|
|
|
827 </ul>
|
|
|
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 /><ul><br />
|
|
|
831    <li></li><br />
|
|
|
832    <li></li><br />
|
|
|
833    <li></li><br />
|
|
|
834 </ul>.
|
|
|
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 -->
|
