-
Notifications
You must be signed in to change notification settings - Fork 74
Expand file tree
/
Copy pathselectable.xml
More file actions
executable file
·156 lines (153 loc) · 7.19 KB
/
selectable.xml
File metadata and controls
executable file
·156 lines (153 loc) · 7.19 KB
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<?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>
<xi:include href="../includes/widget-theming.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<ul>
<li>
<code>ui-selectable</code>: The selectable element.
<ul>
<li><code>ui-selectee</code>: One of the selectable elements, as specified through the <a href="#option-filter"><code>filter</code> option</a>. This element can also receive one of the following classes: <code>ui-selecting</code> (when the lasso includes this element), <code>ui-selected</code> (after a successful selection), <code>ui-unselecting</code> (when the lasso lost this element).</li>
</ul>
</li>
<li><code>ui-selectable-helper</code>: The "lasso" element used to visualize the ongoing selection.</li>
</ul>
<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" default='"input,textarea,button,select,option"' example-value='"a,.cancel"'>
<desc>Prevents selecting if you start on elements matching the selector.</desc>
<type name="Selector">
<desc>A selector specifying elements for which selecting is canceled.</desc>
</type>
<type name="Function">
<desc>A function that can return true to cancel selecting. The function receives the event object.</desc>
</type>
</option>
<option name="classes" type="Object" default="{}">
<xi:include href="../includes/classes-option-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
<xi:include href="../includes/classes-option-example.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
</option>
<option name="delay" type="Integer" default="0" example-value='150'>
<deprecated>1.12</deprecated>
<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'>
<deprecated>1.12</deprecated>
<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"/>
<xi:include href="../includes/widget-method-instance.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>