Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

122 lines (121 sloc) 5.715 kB
<?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>
</longdesc>
<note id="functional-css"/>
<added>1.0</added>
<options>
<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" type="selectableselected">
<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" type="selectableselecting">
<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" type="selectablestart">
<desc>Triggered at the beginning of the select operation.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="stop" type="selectablestop">
<desc>Triggered at the end of the select operation.</desc>
<argument name="event" type="Event"/>
<argument name="ui" type="Object"/>
</event>
<event name="unselected" type="selectableunselected">
<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" type="selectableunselecting">
<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>
Jump to Line
Something went wrong with that request. Please try again.