/
selectable.xml
131 lines (130 loc) · 5.81 KB
/
selectable.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<?xml version="1.0"?>
<entry name="selectable" type="widget" widget-element="selectable element">
<title>Selectable Widget</title>
<desc>Use the mouse to select elements, individually or in a group.</desc>
<longdesc>
<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>
<h3>Dependencies</h3>
<ul>
<li><a href="/category/ui-core/">UI Core</a></li>
<li><a href="/jQuery.widget/">Widget Factory</a></li>
<li><a href="/mouse/">Mouse Interaction</a></li>
</ul>
</longdesc>
<note id="functional-css"/>
<added>1.0</added>
<options>
<option name="appendTo" type="Selector" default='"body"' example-value='"#someElem"'>
<desc>Which element the selection helper (the lasso) should be appended to.</desc>
</option>
<option name="autoRefresh" type="Boolean" default="true" example-value='false'>
<desc>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.</desc>
</option>
<option name="cancel" type="Selector" default='"input,textarea,button,select,option"' example-value='"a,.cancel"'>
<desc>Prevents selecting if you start on elements matching the selector.</desc>
</option>
<option name="delay" type="Integer" default="0" example-value='150'>
<desc>Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element.</desc>
</option>
<xi:include href="../includes/widget-option-disabled.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<option name="distance" type="Number" default="0" example-value='30'>
<desc>Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.</desc>
</option>
<option name="filter" type="Selector" default='"*"' example-value='"li"'>
<desc>The matching child elements will be made selectees (able to be selected).</desc>
</option>
<option name="tolerance" type="String" default='"touch"' example-value='"fit"'>
<desc>
Specifies which mode to use for testing whether the lasso should select an item. Possible values:
<ul>
<li><code>"fit"</code>: Lasso overlaps the item entirely.</li>
<li><code>"touch"</code>: Lasso overlaps the item by any amount.</li>
</ul>
</desc>
</option>
</options>
<events>
<xi:include href="../includes/widget-event-create.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<event name="selected">
<desc>Triggered at the end of the select operation, on each element added to the selection.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="selected" type="Element">
<desc>The selectable item that has been selected.</desc>
</property>
</argument>
</event>
<event name="selecting">
<desc>Triggered during the select operation, on each element added to the selection.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="selecting" type="Element">
<desc>The current selectable item being selected.</desc>
</property>
</argument>
</event>
<event name="start">
<desc>Triggered at the beginning of the select operation.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="stop">
<desc>Triggered at the end of the select operation.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="unselected">
<desc>Triggered at the end of the select operation, on each element removed from the selection.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="unselected" type="Element">
<desc>The selectable item that has been unselected.</desc>
</property>
</argument>
</event>
<event name="unselecting">
<desc>Triggered during the select operation, on each element removed from the selection.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object">
<property name="unselecting" type="Element">
<desc>The current selectable item being unselected.</desc>
</property>
</argument>
</event>
</events>
<methods>
<xi:include href="../includes/widget-method-destroy.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-disable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-enable.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<method name="refresh">
<desc>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>.</desc>
</method>
<xi:include href="../includes/widget-method-option.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/widget-method-widget.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</methods>
<example>
<height>150</height>
<desc>A simple jQuery UI Selectable.</desc>
<css><![CDATA[
#selectable .ui-selecting {
background: #ccc;
}
#selectable .ui-selected {
background: #999;
}
]]></css>
<code><![CDATA[
$( "#selectable" ).selectable();
]]></code>
<html><![CDATA[
<ul id="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
]]></html>
</example>
<category slug="interactions"/>
</entry>