Context Navigation

selectable.html @ 786

Last change on this file since 786 was 786, checked in by cbipsl, 10 years ago
commit temp bug libraries
File size: 49.3 KB

Line
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<meta charset="utf-8">
5	<title>jQuery UI selectable documentation</title>
6
7	<style>
8	body {
9	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
10	}
11	.gutter {
12	display: none;
13	}
14	</style>
15	</head>
16	<body>
17
18	<script>{
19	"title":
20	"Selectable Widget",
21	"excerpt":
22	"Use the mouse to select elements, individually or in a group.",
23	"termSlugs": {
24	"category": [
25	"interactions"
26	]
27	}
28	}</script><article id="selectable1" class="entry widget"><h2 class="section-title">
29	<span>Selectable Widget</span><span class="version-details">version added: 1.0</span>
30	</h2>
31	<div class="entry-wrapper">
32	<p class="desc"><strong>Description: </strong>Use the mouse to select elements, individually or in a group.</p>
33	<section id="quick-nav"><header><h2>QuickNav<a href="#entry-examples">Examples</a>
34	</h2></header><div class="quick-nav-section">
35	<h3>Options</h3>
36	<div><a href="#option-appendTo">appendTo</a></div>
37	<div><a href="#option-autoRefresh">autoRefresh</a></div>
38	<div><a href="#option-cancel">cancel</a></div>
39	<div><a href="#option-delay">delay</a></div>
40	<div><a href="#option-disabled">disabled</a></div>
41	<div><a href="#option-distance">distance</a></div>
42	<div><a href="#option-filter">filter</a></div>
43	<div><a href="#option-tolerance">tolerance</a></div>
44	</div>
45	<div class="quick-nav-section">
46	<h3>Methods</h3>
47	<div><a href="#method-destroy">destroy</a></div>
48	<div><a href="#method-disable">disable</a></div>
49	<div><a href="#method-enable">enable</a></div>
50	<div><a href="#method-option">option</a></div>
51	<div><a href="#method-refresh">refresh</a></div>
52	<div><a href="#method-widget">widget</a></div>
53	</div>
54	<div class="quick-nav-section">
55	<h3>Events</h3>
56	<div><a href="#event-create">create</a></div>
57	<div><a href="#event-selected">selected</a></div>
58	<div><a href="#event-selecting">selecting</a></div>
59	<div><a href="#event-start">start</a></div>
60	<div><a href="#event-stop">stop</a></div>
61	<div><a href="#event-unselected">unselected</a></div>
62	<div><a href="#event-unselecting">unselecting</a></div>
63	</div></section><div class="longdesc" id="entry-longdesc">
64	<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. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections.</p>
65
66	<h3>Dependencies</h3>
67	<ul>
68	<li><a href="/category/ui-core/">UI Core</a></li>
69	<li><a href="/jQuery.widget/">Widget Factory</a></li>
70	<li><a href="/mouse/">Mouse Interaction</a></li>
71	</ul>
72	</div>
73	<h3>Additional Notes:</h3>
74	<div class="longdesc"><ul><li>
75	This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
76	</li></ul></div>
77	<section id="options"><header><h2>Options</h2></header><div id="option-appendTo" class="api-item first-item">
78	<h3>appendTo<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
79	</h3>
80	<div class="default">
81	<strong>Default: </strong><code>"body"</code>
82	</div>
83	<div>Which element the selection helper (the lasso) should be appended to.</div>
84	<strong>Code examples:</strong><p>Initialize the selectable with the <code>appendTo</code> option specified:</p>
85	<div class="syntaxhighlighter javascript nogutter">
86	<table>
87	<tbody>
88	<tr>
89	<td class="gutter">
90
91	<div class="line n1">1</div>
92
93	</td>
94	<td class="code">
95	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ appendTo: <span class="string">"#someElem"</span> });</code></div></div></pre>
96	</td>
97	</tr>
98	</tbody>
99	</table>
100	</div>
101
102	<p>Get or set the <code>appendTo</code> option, after initialization:</p>
103	<div class="syntaxhighlighter javascript nogutter">
104	<table>
105	<tbody>
106	<tr>
107	<td class="gutter">
108
109	<div class="line n1">1</div>
110
111	<div class="line n2">2</div>
112
113	<div class="line n3">3</div>
114
115	<div class="line n4">4</div>
116
117	<div class="line n5">5</div>
118
119	</td>
120	<td class="code">
121	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> appendTo = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"appendTo"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"appendTo"</span>, <span class="string">"#someElem"</span> );</code></div></div></pre>
122	</td>
123	</tr>
124	</tbody>
125	</table>
126	</div>
127
128	</div>
129	<div id="option-autoRefresh" class="api-item">
130	<h3>autoRefresh<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
131	</h3>
132	<div class="default">
133	<strong>Default: </strong><code>true</code>
134	</div>
135	<div>This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many items, you may want to set this to false and call the <a href="#method-refresh"><code>refresh()</code></a> method manually.</div>
136	<strong>Code examples:</strong><p>Initialize the selectable with the <code>autoRefresh</code> option specified:</p>
137	<div class="syntaxhighlighter javascript nogutter">
138	<table>
139	<tbody>
140	<tr>
141	<td class="gutter">
142
143	<div class="line n1">1</div>
144
145	</td>
146	<td class="code">
147	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ autoRefresh: <span class="literal">false</span> });</code></div></div></pre>
148	</td>
149	</tr>
150	</tbody>
151	</table>
152	</div>
153
154	<p>Get or set the <code>autoRefresh</code> option, after initialization:</p>
155	<div class="syntaxhighlighter javascript nogutter">
156	<table>
157	<tbody>
158	<tr>
159	<td class="gutter">
160
161	<div class="line n1">1</div>
162
163	<div class="line n2">2</div>
164
165	<div class="line n3">3</div>
166
167	<div class="line n4">4</div>
168
169	<div class="line n5">5</div>
170
171	</td>
172	<td class="code">
173	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> autoRefresh = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"autoRefresh"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"autoRefresh"</span>, <span class="literal">false</span> );</code></div></div></pre>
174	</td>
175	</tr>
176	</tbody>
177	</table>
178	</div>
179
180	</div>
181	<div id="option-cancel" class="api-item">
182	<h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
183	</h3>
184	<div class="default">
185	<strong>Default: </strong><code>"input,textarea,button,select,option"</code>
186	</div>
187	<div>Prevents selecting if you start on elements matching the selector.</div>
188	<strong>Code examples:</strong><p>Initialize the selectable with the <code>cancel</code> option specified:</p>
189	<div class="syntaxhighlighter javascript nogutter">
190	<table>
191	<tbody>
192	<tr>
193	<td class="gutter">
194
195	<div class="line n1">1</div>
196
197	</td>
198	<td class="code">
199	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ cancel: a,.cancel });</code></div></div></pre>
200	</td>
201	</tr>
202	</tbody>
203	</table>
204	</div>
205
206	<p>Get or set the <code>cancel</code> option, after initialization:</p>
207	<div class="syntaxhighlighter javascript nogutter">
208	<table>
209	<tbody>
210	<tr>
211	<td class="gutter">
212
213	<div class="line n1">1</div>
214
215	<div class="line n2">2</div>
216
217	<div class="line n3">3</div>
218
219	<div class="line n4">4</div>
220
221	<div class="line n5">5</div>
222
223	</td>
224	<td class="code">
225	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cancel = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"cancel"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"cancel"</span>, a,.cancel );</code></div></div></pre>
226	</td>
227	</tr>
228	</tbody>
229	</table>
230	</div>
231
232	</div>
233	<div id="option-delay" class="api-item">
234	<h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Integer">Integer</a></span>
235	</h3>
236	<div class="default">
237	<strong>Default: </strong><code>0</code>
238	</div>
239	<div>Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element.</div>
240	<strong>Code examples:</strong><p>Initialize the selectable with the <code>delay</code> option specified:</p>
241	<div class="syntaxhighlighter javascript nogutter">
242	<table>
243	<tbody>
244	<tr>
245	<td class="gutter">
246
247	<div class="line n1">1</div>
248
249	</td>
250	<td class="code">
251	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ delay: <span class="number">150</span> });</code></div></div></pre>
252	</td>
253	</tr>
254	</tbody>
255	</table>
256	</div>
257
258	<p>Get or set the <code>delay</code> option, after initialization:</p>
259	<div class="syntaxhighlighter javascript nogutter">
260	<table>
261	<tbody>
262	<tr>
263	<td class="gutter">
264
265	<div class="line n1">1</div>
266
267	<div class="line n2">2</div>
268
269	<div class="line n3">3</div>
270
271	<div class="line n4">4</div>
272
273	<div class="line n5">5</div>
274
275	</td>
276	<td class="code">
277	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> delay = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"delay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"delay"</span>, <span class="number">150</span> );</code></div></div></pre>
278	</td>
279	</tr>
280	</tbody>
281	</table>
282	</div>
283
284	</div>
285	<div id="option-disabled" class="api-item">
286	<h3>disabled<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
287	</h3>
288	<div class="default">
289	<strong>Default: </strong><code>false</code>
290	</div>
291	<div>Disables the selectable if set to <code>true</code>.</div>
292	<strong>Code examples:</strong><p>Initialize the selectable with the <code>disabled</code> option specified:</p>
293	<div class="syntaxhighlighter javascript nogutter">
294	<table>
295	<tbody>
296	<tr>
297	<td class="gutter">
298
299	<div class="line n1">1</div>
300
301	</td>
302	<td class="code">
303	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ disabled: <span class="literal">true</span> });</code></div></div></pre>
304	</td>
305	</tr>
306	</tbody>
307	</table>
308	</div>
309
310	<p>Get or set the <code>disabled</code> option, after initialization:</p>
311	<div class="syntaxhighlighter javascript nogutter">
312	<table>
313	<tbody>
314	<tr>
315	<td class="gutter">
316
317	<div class="line n1">1</div>
318
319	<div class="line n2">2</div>
320
321	<div class="line n3">3</div>
322
323	<div class="line n4">4</div>
324
325	<div class="line n5">5</div>
326
327	</td>
328	<td class="code">
329	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> disabled = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
330	</td>
331	</tr>
332	</tbody>
333	</table>
334	</div>
335
336	</div>
337	<div id="option-distance" class="api-item">
338	<h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
339	</h3>
340	<div class="default">
341	<strong>Default: </strong><code>0</code>
342	</div>
343	<div>Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.</div>
344	<strong>Code examples:</strong><p>Initialize the selectable with the <code>distance</code> option specified:</p>
345	<div class="syntaxhighlighter javascript nogutter">
346	<table>
347	<tbody>
348	<tr>
349	<td class="gutter">
350
351	<div class="line n1">1</div>
352
353	</td>
354	<td class="code">
355	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ distance: <span class="number">30</span> });</code></div></div></pre>
356	</td>
357	</tr>
358	</tbody>
359	</table>
360	</div>
361
362	<p>Get or set the <code>distance</code> option, after initialization:</p>
363	<div class="syntaxhighlighter javascript nogutter">
364	<table>
365	<tbody>
366	<tr>
367	<td class="gutter">
368
369	<div class="line n1">1</div>
370
371	<div class="line n2">2</div>
372
373	<div class="line n3">3</div>
374
375	<div class="line n4">4</div>
376
377	<div class="line n5">5</div>
378
379	</td>
380	<td class="code">
381	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> distance = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"distance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"distance"</span>, <span class="number">30</span> );</code></div></div></pre>
382	</td>
383	</tr>
384	</tbody>
385	</table>
386	</div>
387
388	</div>
389	<div id="option-filter" class="api-item">
390	<h3>filter<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
391	</h3>
392	<div class="default">
393	<strong>Default: </strong><code>"*"</code>
394	</div>
395	<div>The matching child elements will be made selectees (able to be selected).</div>
396	<strong>Code examples:</strong><p>Initialize the selectable with the <code>filter</code> option specified:</p>
397	<div class="syntaxhighlighter javascript nogutter">
398	<table>
399	<tbody>
400	<tr>
401	<td class="gutter">
402
403	<div class="line n1">1</div>
404
405	</td>
406	<td class="code">
407	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ filter: li });</code></div></div></pre>
408	</td>
409	</tr>
410	</tbody>
411	</table>
412	</div>
413
414	<p>Get or set the <code>filter</code> option, after initialization:</p>
415	<div class="syntaxhighlighter javascript nogutter">
416	<table>
417	<tbody>
418	<tr>
419	<td class="gutter">
420
421	<div class="line n1">1</div>
422
423	<div class="line n2">2</div>
424
425	<div class="line n3">3</div>
426
427	<div class="line n4">4</div>
428
429	<div class="line n5">5</div>
430
431	</td>
432	<td class="code">
433	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> filter = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"filter"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"filter"</span>, li );</code></div></div></pre>
434	</td>
435	</tr>
436	</tbody>
437	</table>
438	</div>
439
440	</div>
441	<div id="option-tolerance" class="api-item">
442	<h3>tolerance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#String">String</a></span>
443	</h3>
444	<div class="default">
445	<strong>Default: </strong><code>"touch"</code>
446	</div>
447	<div>
448	Specifies which mode to use for testing whether the lasso should select an item. Possible values:
449	<ul>
450	<li>
451	<code>"fit"</code>: Lasso overlaps the item entirely.</li>
452	<li>
453	<code>"touch"</code>: Lasso overlaps the item by any amount.</li>
454	</ul>
455	</div>
456	<strong>Code examples:</strong><p>Initialize the selectable with the <code>tolerance</code> option specified:</p>
457	<div class="syntaxhighlighter javascript nogutter">
458	<table>
459	<tbody>
460	<tr>
461	<td class="gutter">
462
463	<div class="line n1">1</div>
464
465	</td>
466	<td class="code">
467	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({ tolerance: <span class="string">"fit"</span> });</code></div></div></pre>
468	</td>
469	</tr>
470	</tbody>
471	</table>
472	</div>
473
474	<p>Get or set the <code>tolerance</code> option, after initialization:</p>
475	<div class="syntaxhighlighter javascript nogutter">
476	<table>
477	<tbody>
478	<tr>
479	<td class="gutter">
480
481	<div class="line n1">1</div>
482
483	<div class="line n2">2</div>
484
485	<div class="line n3">3</div>
486
487	<div class="line n4">4</div>
488
489	<div class="line n5">5</div>
490
491	</td>
492	<td class="code">
493	<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> tolerance = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"tolerance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"tolerance"</span>, <span class="string">"fit"</span> );</code></div></div></pre>
494	</td>
495	</tr>
496	</tbody>
497	</table>
498	</div>
499
500	</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-destroy"><div class="api-item first-item">
501	<h3>destroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
502	</h3>
503	<div>
504	Removes the selectable functionality completely. This will return the element back to its pre-init state.
505	</div>
506	<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
507	<div>
508	<strong>Code examples:</strong><p>Invoke the destroy method:</p>
509	<div class="syntaxhighlighter javascript nogutter">
510	<table>
511	<tbody>
512	<tr>
513	<td class="gutter">
514
515	<div class="line n1">1</div>
516
517	</td>
518	<td class="code">
519	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"destroy"</span> );</code></div></div></pre>
520	</td>
521	</tr>
522	</tbody>
523	</table>
524	</div>
525
526	</div>
527	</div></div>
528	<div id="method-disable"><div class="api-item">
529	<h3>disable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
530	</h3>
531	<div>
532	Disables the selectable.
533	</div>
534	<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
535	<div>
536	<strong>Code examples:</strong><p>Invoke the disable method:</p>
537	<div class="syntaxhighlighter javascript nogutter">
538	<table>
539	<tbody>
540	<tr>
541	<td class="gutter">
542
543	<div class="line n1">1</div>
544
545	</td>
546	<td class="code">
547	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"disable"</span> );</code></div></div></pre>
548	</td>
549	</tr>
550	</tbody>
551	</table>
552	</div>
553
554	</div>
555	</div></div>
556	<div id="method-enable"><div class="api-item">
557	<h3>enable()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
558	</h3>
559	<div>
560	Enables the selectable.
561	</div>
562	<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
563	<div>
564	<strong>Code examples:</strong><p>Invoke the enable method:</p>
565	<div class="syntaxhighlighter javascript nogutter">
566	<table>
567	<tbody>
568	<tr>
569	<td class="gutter">
570
571	<div class="line n1">1</div>
572
573	</td>
574	<td class="code">
575	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"enable"</span> );</code></div></div></pre>
576	</td>
577	</tr>
578	</tbody>
579	</table>
580	</div>
581
582	</div>
583	</div></div>
584	<div id="method-option">
585	<div class="api-item">
586	<h3>option( optionName )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Object">Object</a></span>
587	</h3>
588	<div>Gets the value currently associated with the specified <code>optionName</code>.</div>
589	<ul><li>
590	<div><strong>optionName</strong></div>
591	<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
592	</div>
593	<div>The name of the option to get.</div>
594	</li></ul>
595	<div>
596	<strong>Code examples:</strong><p>Invoke the method:</p>
597	<div class="syntaxhighlighter javascript nogutter">
598	<table>
599	<tbody>
600	<tr>
601	<td class="gutter">
602
603	<div class="line n1">1</div>
604
605	</td>
606	<td class="code">
607	<pre><div class="container"><div class="line"><code><span class="keyword">var</span> isDisabled = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"disabled"</span> );</code></div></div></pre>
608	</td>
609	</tr>
610	</tbody>
611	</table>
612	</div>
613
614	</div>
615	</div>
616	<div class="api-item">
617	<h3>option()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a></span>
618	</h3>
619	<div>Gets an object containing key/value pairs representing the current selectable options hash.</div>
620	<ul><li><div class="null-signature">This signature does not accept any arguments.</div></li></ul>
621	<div>
622	<strong>Code examples:</strong><p>Invoke the method:</p>
623	<div class="syntaxhighlighter javascript nogutter">
624	<table>
625	<tbody>
626	<tr>
627	<td class="gutter">
628
629	<div class="line n1">1</div>
630
631	</td>
632	<td class="code">
633	<pre><div class="container"><div class="line"><code><span class="keyword">var</span> options = $( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span> );</code></div></div></pre>
634	</td>
635	</tr>
636	</tbody>
637	</table>
638	</div>
639
640	</div>
641	</div>
642	<div class="api-item">
643	<h3>option( optionName, value )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
644	</h3>
645	<div>Sets the value of the selectable option associated with the specified <code>optionName</code>.</div>
646	<ul>
647	<li>
648	<div><strong>optionName</strong></div>
649	<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
650	</div>
651	<div>The name of the option to set.</div>
652	</li>
653	<li>
654	<div><strong>value</strong></div>
655	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
656	</div>
657	<div>A value to set for the option.</div>
658	</li>
659	</ul>
660	<div>
661	<strong>Code examples:</strong><p>Invoke the method:</p>
662	<div class="syntaxhighlighter javascript nogutter">
663	<table>
664	<tbody>
665	<tr>
666	<td class="gutter">
667
668	<div class="line n1">1</div>
669
670	</td>
671	<td class="code">
672	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, <span class="string">"disabled"</span>, <span class="literal">true</span> );</code></div></div></pre>
673	</td>
674	</tr>
675	</tbody>
676	</table>
677	</div>
678
679	</div>
680	</div>
681	<div class="api-item">
682	<h3>option( options )<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
683	</h3>
684	<div>Sets one or more options for the selectable.</div>
685	<ul><li>
686	<div><strong>options</strong></div>
687	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
688	</div>
689	<div>A map of option-value pairs to set.</div>
690	</li></ul>
691	<div>
692	<strong>Code examples:</strong><p>Invoke the method:</p>
693	<div class="syntaxhighlighter javascript nogutter">
694	<table>
695	<tbody>
696	<tr>
697	<td class="gutter">
698
699	<div class="line n1">1</div>
700
701	</td>
702	<td class="code">
703	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"option"</span>, { disabled: <span class="literal">true</span> } );</code></div></div></pre>
704	</td>
705	</tr>
706	</tbody>
707	</table>
708	</div>
709
710	</div>
711	</div>
712	</div>
713	<div id="method-refresh"><div class="api-item">
714	<h3>refresh()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
715	</h3>
716	<div>Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee when the <a href="#option-autoRefresh"><code>autoRefresh</code></a> option is set to <code>false</code>.</div>
717	<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
718	<div>
719	<strong>Code examples:</strong><p>Invoke the refresh method:</p>
720	<div class="syntaxhighlighter javascript nogutter">
721	<table>
722	<tbody>
723	<tr>
724	<td class="gutter">
725
726	<div class="line n1">1</div>
727
728	</td>
729	<td class="code">
730	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable( <span class="string">"refresh"</span> );</code></div></div></pre>
731	</td>
732	</tr>
733	</tbody>
734	</table>
735	</div>
736
737	</div>
738	</div></div>
739	<div id="method-widget"><div class="api-item">
740	<h3>widget()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
741	</h3>
742	<div>
743	Returns a <code>jQuery</code> object containing the selectable element.
744	</div>
745	<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
746	<div>
747	<strong>Code examples:</strong><p>Invoke the widget method:</p>
748	<div class="syntaxhighlighter javascript nogutter">
749	<table>
750	<tbody>
751	<tr>
752	<td class="gutter">
753
754	<div class="line n1">1</div>
755
756	</td>
757	<td class="code">
758	<pre><div class="container"><div class="line"><code><span class="keyword">var</span> widget = $( <span class="string">".selector"</span> ).selectable( <span class="string">"widget"</span> );</code></div></div></pre>
759	</td>
760	</tr>
761	</tbody>
762	</table>
763	</div>
764
765	</div>
766	</div></div></section><section id="events"><header><h2>Events</h2></header><div id="event-create" class="api-item first-item">
767	<h3>create( event, ui )<span class="returns">Type: <code>selectablecreate</code></span>
768	</h3>
769	<div>
770	Triggered when the selectable is created.
771	</div>
772	<ul>
773	<li>
774	<div><strong>event</strong></div>
775	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
776	</div>
777	<div></div>
778	</li>
779	<li>
780	<div><strong>ui</strong></div>
781	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
782	</div>
783	<div></div>
784	</li>
785	</ul>
786	<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
787	<div>
788	<strong>Code examples:</strong><p>Initialize the selectable with the create callback specified:</p>
789	<div class="syntaxhighlighter javascript nogutter">
790	<table>
791	<tbody>
792	<tr>
793	<td class="gutter">
794
795	<div class="line n1">1</div>
796
797	<div class="line n2">2</div>
798
799	<div class="line n3">3</div>
800
801	</td>
802	<td class="code">
803	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> create: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
804	</td>
805	</tr>
806	</tbody>
807	</table>
808	</div>
809
810	<p>Bind an event listener to the selectablecreate event:</p>
811	<div class="syntaxhighlighter javascript nogutter">
812	<table>
813	<tbody>
814	<tr>
815	<td class="gutter">
816
817	<div class="line n1">1</div>
818
819	</td>
820	<td class="code">
821	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectablecreate"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
822	</td>
823	</tr>
824	</tbody>
825	</table>
826	</div>
827
828	</div>
829	</div>
830	<div id="event-selected" class="api-item">
831	<h3>selected( event, ui )<span class="returns">Type: <code>selectableselected</code></span>
832	</h3>
833	<div>Triggered at the end of the select operation, on each element added to the selection.</div>
834	<ul>
835	<li>
836	<div><strong>event</strong></div>
837	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
838	</div>
839	<div></div>
840	</li>
841	<li>
842	<div><strong>ui</strong></div>
843	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
844	</div>
845	<div></div>
846	<ul><li>
847	<div><strong>selected</strong></div>
848	<div>Type: <a href="http://api.jquery.com/Types/#Element">Element</a>
849	</div>
850	<div>The selectable item that has been selected.</div>
851	</li></ul>
852	</li>
853	</ul>
854	<div>
855	<strong>Code examples:</strong><p>Initialize the selectable with the selected callback specified:</p>
856	<div class="syntaxhighlighter javascript nogutter">
857	<table>
858	<tbody>
859	<tr>
860	<td class="gutter">
861
862	<div class="line n1">1</div>
863
864	<div class="line n2">2</div>
865
866	<div class="line n3">3</div>
867
868	</td>
869	<td class="code">
870	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> selected: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
871	</td>
872	</tr>
873	</tbody>
874	</table>
875	</div>
876
877	<p>Bind an event listener to the selectableselected event:</p>
878	<div class="syntaxhighlighter javascript nogutter">
879	<table>
880	<tbody>
881	<tr>
882	<td class="gutter">
883
884	<div class="line n1">1</div>
885
886	</td>
887	<td class="code">
888	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectableselected"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
889	</td>
890	</tr>
891	</tbody>
892	</table>
893	</div>
894
895	</div>
896	</div>
897	<div id="event-selecting" class="api-item">
898	<h3>selecting( event, ui )<span class="returns">Type: <code>selectableselecting</code></span>
899	</h3>
900	<div>Triggered during the select operation, on each element added to the selection.</div>
901	<ul>
902	<li>
903	<div><strong>event</strong></div>
904	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
905	</div>
906	<div></div>
907	</li>
908	<li>
909	<div><strong>ui</strong></div>
910	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
911	</div>
912	<div></div>
913	<ul><li>
914	<div><strong>selecting</strong></div>
915	<div>Type: <a href="http://api.jquery.com/Types/#Element">Element</a>
916	</div>
917	<div>The current selectable item being selected.</div>
918	</li></ul>
919	</li>
920	</ul>
921	<div>
922	<strong>Code examples:</strong><p>Initialize the selectable with the selecting callback specified:</p>
923	<div class="syntaxhighlighter javascript nogutter">
924	<table>
925	<tbody>
926	<tr>
927	<td class="gutter">
928
929	<div class="line n1">1</div>
930
931	<div class="line n2">2</div>
932
933	<div class="line n3">3</div>
934
935	</td>
936	<td class="code">
937	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> selecting: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
938	</td>
939	</tr>
940	</tbody>
941	</table>
942	</div>
943
944	<p>Bind an event listener to the selectableselecting event:</p>
945	<div class="syntaxhighlighter javascript nogutter">
946	<table>
947	<tbody>
948	<tr>
949	<td class="gutter">
950
951	<div class="line n1">1</div>
952
953	</td>
954	<td class="code">
955	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectableselecting"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
956	</td>
957	</tr>
958	</tbody>
959	</table>
960	</div>
961
962	</div>
963	</div>
964	<div id="event-start" class="api-item">
965	<h3>start( event, ui )<span class="returns">Type: <code>selectablestart</code></span>
966	</h3>
967	<div>Triggered at the beginning of the select operation.</div>
968	<ul>
969	<li>
970	<div><strong>event</strong></div>
971	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
972	</div>
973	<div></div>
974	</li>
975	<li>
976	<div><strong>ui</strong></div>
977	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
978	</div>
979	<div></div>
980	</li>
981	</ul>
982	<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
983	<div>
984	<strong>Code examples:</strong><p>Initialize the selectable with the start callback specified:</p>
985	<div class="syntaxhighlighter javascript nogutter">
986	<table>
987	<tbody>
988	<tr>
989	<td class="gutter">
990
991	<div class="line n1">1</div>
992
993	<div class="line n2">2</div>
994
995	<div class="line n3">3</div>
996
997	</td>
998	<td class="code">
999	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> start: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1000	</td>
1001	</tr>
1002	</tbody>
1003	</table>
1004	</div>
1005
1006	<p>Bind an event listener to the selectablestart event:</p>
1007	<div class="syntaxhighlighter javascript nogutter">
1008	<table>
1009	<tbody>
1010	<tr>
1011	<td class="gutter">
1012
1013	<div class="line n1">1</div>
1014
1015	</td>
1016	<td class="code">
1017	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectablestart"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1018	</td>
1019	</tr>
1020	</tbody>
1021	</table>
1022	</div>
1023
1024	</div>
1025	</div>
1026	<div id="event-stop" class="api-item">
1027	<h3>stop( event, ui )<span class="returns">Type: <code>selectablestop</code></span>
1028	</h3>
1029	<div>Triggered at the end of the select operation.</div>
1030	<ul>
1031	<li>
1032	<div><strong>event</strong></div>
1033	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1034	</div>
1035	<div></div>
1036	</li>
1037	<li>
1038	<div><strong>ui</strong></div>
1039	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1040	</div>
1041	<div></div>
1042	</li>
1043	</ul>
1044	<p><em>Note: The <code>ui</code> object is empty but included for consistency with other events.</em></p>
1045	<div>
1046	<strong>Code examples:</strong><p>Initialize the selectable with the stop callback specified:</p>
1047	<div class="syntaxhighlighter javascript nogutter">
1048	<table>
1049	<tbody>
1050	<tr>
1051	<td class="gutter">
1052
1053	<div class="line n1">1</div>
1054
1055	<div class="line n2">2</div>
1056
1057	<div class="line n3">3</div>
1058
1059	</td>
1060	<td class="code">
1061	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> stop: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1062	</td>
1063	</tr>
1064	</tbody>
1065	</table>
1066	</div>
1067
1068	<p>Bind an event listener to the selectablestop event:</p>
1069	<div class="syntaxhighlighter javascript nogutter">
1070	<table>
1071	<tbody>
1072	<tr>
1073	<td class="gutter">
1074
1075	<div class="line n1">1</div>
1076
1077	</td>
1078	<td class="code">
1079	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectablestop"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1080	</td>
1081	</tr>
1082	</tbody>
1083	</table>
1084	</div>
1085
1086	</div>
1087	</div>
1088	<div id="event-unselected" class="api-item">
1089	<h3>unselected( event, ui )<span class="returns">Type: <code>selectableunselected</code></span>
1090	</h3>
1091	<div>Triggered at the end of the select operation, on each element removed from the selection.</div>
1092	<ul>
1093	<li>
1094	<div><strong>event</strong></div>
1095	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1096	</div>
1097	<div></div>
1098	</li>
1099	<li>
1100	<div><strong>ui</strong></div>
1101	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1102	</div>
1103	<div></div>
1104	<ul><li>
1105	<div><strong>unselected</strong></div>
1106	<div>Type: <a href="http://api.jquery.com/Types/#Element">Element</a>
1107	</div>
1108	<div>The selectable item that has been unselected.</div>
1109	</li></ul>
1110	</li>
1111	</ul>
1112	<div>
1113	<strong>Code examples:</strong><p>Initialize the selectable with the unselected callback specified:</p>
1114	<div class="syntaxhighlighter javascript nogutter">
1115	<table>
1116	<tbody>
1117	<tr>
1118	<td class="gutter">
1119
1120	<div class="line n1">1</div>
1121
1122	<div class="line n2">2</div>
1123
1124	<div class="line n3">3</div>
1125
1126	</td>
1127	<td class="code">
1128	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> unselected: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1129	</td>
1130	</tr>
1131	</tbody>
1132	</table>
1133	</div>
1134
1135	<p>Bind an event listener to the selectableunselected event:</p>
1136	<div class="syntaxhighlighter javascript nogutter">
1137	<table>
1138	<tbody>
1139	<tr>
1140	<td class="gutter">
1141
1142	<div class="line n1">1</div>
1143
1144	</td>
1145	<td class="code">
1146	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectableunselected"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1147	</td>
1148	</tr>
1149	</tbody>
1150	</table>
1151	</div>
1152
1153	</div>
1154	</div>
1155	<div id="event-unselecting" class="api-item">
1156	<h3>unselecting( event, ui )<span class="returns">Type: <code>selectableunselecting</code></span>
1157	</h3>
1158	<div>Triggered during the select operation, on each element removed from the selection.</div>
1159	<ul>
1160	<li>
1161	<div><strong>event</strong></div>
1162	<div>Type: <a href="http://api.jquery.com/Types/#Event">Event</a>
1163	</div>
1164	<div></div>
1165	</li>
1166	<li>
1167	<div><strong>ui</strong></div>
1168	<div>Type: <a href="http://api.jquery.com/Types/#Object">Object</a>
1169	</div>
1170	<div></div>
1171	<ul><li>
1172	<div><strong>unselecting</strong></div>
1173	<div>Type: <a href="http://api.jquery.com/Types/#Element">Element</a>
1174	</div>
1175	<div>The current selectable item being unselected.</div>
1176	</li></ul>
1177	</li>
1178	</ul>
1179	<div>
1180	<strong>Code examples:</strong><p>Initialize the selectable with the unselecting callback specified:</p>
1181	<div class="syntaxhighlighter javascript nogutter">
1182	<table>
1183	<tbody>
1184	<tr>
1185	<td class="gutter">
1186
1187	<div class="line n1">1</div>
1188
1189	<div class="line n2">2</div>
1190
1191	<div class="line n3">3</div>
1192
1193	</td>
1194	<td class="code">
1195	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).selectable({</code></div></div><div class="container"><div class="line"><code> unselecting: <span class="keyword">function</span>( event, ui ) {}</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
1196	</td>
1197	</tr>
1198	</tbody>
1199	</table>
1200	</div>
1201
1202	<p>Bind an event listener to the selectableunselecting event:</p>
1203	<div class="syntaxhighlighter javascript nogutter">
1204	<table>
1205	<tbody>
1206	<tr>
1207	<td class="gutter">
1208
1209	<div class="line n1">1</div>
1210
1211	</td>
1212	<td class="code">
1213	<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).on( <span class="string">"selectableunselecting"</span>, <span class="keyword">function</span>( event, ui ) {} );</code></div></div></pre>
1214	</td>
1215	</tr>
1216	</tbody>
1217	</table>
1218	</div>
1219
1220	</div>
1221	</div></section><section class="entry-examples" id="entry-examples"><header><h2>Example:</h2></header><div class="entry-example" id="example-0">
1222	<h4><span class="desc">A simple jQuery UI Selectable.</span></h4>
1223	<div class="syntaxhighlighter xml ">
1224	<table>
1225	<tbody>
1226	<tr>
1227	<td class="gutter">
1228
1229	<div class="line n1">1</div>
1230
1231	<div class="line n2">2</div>
1232
1233	<div class="line n3">3</div>
1234
1235	<div class="line n4">4</div>
1236
1237	<div class="line n5">5</div>
1238
1239	<div class="line n6">6</div>
1240
1241	<div class="line n7">7</div>
1242
1243	<div class="line n8">8</div>
1244
1245	<div class="line n9">9</div>
1246
1247	<div class="line n10">10</div>
1248
1249	<div class="line n11">11</div>
1250
1251	<div class="line n12">12</div>
1252
1253	<div class="line n13">13</div>
1254
1255	<div class="line n14">14</div>
1256
1257	<div class="line n15">15</div>
1258
1259	<div class="line n16">16</div>
1260
1261	<div class="line n17">17</div>
1262
1263	<div class="line n18">18</div>
1264
1265	<div class="line n19">19</div>
1266
1267	<div class="line n20">20</div>
1268
1269	<div class="line n21">21</div>
1270
1271	<div class="line n22">22</div>
1272
1273	<div class="line n23">23</div>
1274
1275	<div class="line n24">24</div>
1276
1277	<div class="line n25">25</div>
1278
1279	<div class="line n26">26</div>
1280
1281	<div class="line n27">27</div>
1282
1283	<div class="line n28">28</div>
1284
1285	<div class="line n29">29</div>
1286
1287	<div class="line n30">30</div>
1288
1289	<div class="line n31">31</div>
1290
1291	<div class="line n32">32</div>
1292
1293	<div class="line n33">33</div>
1294
1295	</td>
1296	<td class="code">
1297	<pre><div class="container"><div class="line"><code><span class="doctype"><!doctype html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span> <span class="attribute">lang</span>=<span class="value">"en"</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">meta</span> <span class="attribute">charset</span>=<span class="value">"utf-8"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">title</span>></span>selectable demo<span class="tag"></<span class="title">title</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">link</span> <span class="attribute">rel</span>=<span class="value">"stylesheet"</span> <span class="attribute">href</span>=<span class="value">"//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="id">#selectable</span> <span class="class">.ui-selecting</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#ccc</span>;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="id">#selectable</span> <span class="class">.ui-selected</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#999</span>;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/jquery-1.8.3.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"//code.jquery.com/ui/1.9.2/jquery-ui.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">ul</span> <span class="attribute">id</span>=<span class="value">"selectable"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">li</span>></span>Item 1<span class="tag"></<span class="title">li</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">li</span>></span>Item 2<span class="tag"></<span class="title">li</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">li</span>></span>Item 3<span class="tag"></<span class="title">li</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">li</span>></span>Item 4<span class="tag"></<span class="title">li</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">li</span>></span>Item 5<span class="tag"></<span class="title">li</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">ul</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#selectable"</span> ).selectable();</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
1298	</td>
1299	</tr>
1300	</tbody>
1301	</table>
1302	</div>
1303
1304	<h4>Demo:</h4>
1305	<div class="demo code-demo" data-height="150"></div>
1306	</div></section>
1307	</div></article>
1308
1309	</body>
1310	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: ether_iasi/trunk/web/resources/js/library/jquery-ui-1.9.2.custom/development-bundle/docs/selectable.html @ 786

Download in other formats: