Web Development with jQuery (2015)
Part IV. Appendices
Appendix L. Selectable
|
Method |
Description |
Return Value |
|
Sortable Methods |
||
|
selectable(options) |
Turns the children of selected element(s) into selectable elements. Options can be specified by passing an object literal as the first argument using key, value pairs. For a complete list of options, see the “Selectable Options” section later in this appendix. |
jQuery |
|
selectable('option') |
Returns an object containing key value pairs representing the current selection of options. |
Object |
|
selectable(optionName) |
Returns the current value of the specified option. |
Mixed |
|
selectable(optionName, value) |
Sets the value of the specified option. |
jQuery |
|
selectable('disable') |
Disables selectable functionality on the selected element(s). |
jQuery |
|
selectable('destroy') |
Completely removes the selectable functionality. |
jQuery |
|
selectable('enable') |
Enables selectable functionality on the selected element(s). |
jQuery |
|
selectable('refresh') |
Refreshes the position and size of each selected element. |
jQuery |
|
selectable('widget') |
Returns a jQuery object containing the selectable element. |
jQuery |
|
Selectable Options |
||
|
Option |
Description |
Type |
|
appendTo |
This option determines what element the selection box will be appended to. |
Selector |
|
autoRefresh |
This option determines whether to refresh (the cached) the position and size of each selectable element at the beginning of a select operation. If you have experienced performance degradation (as you would if you have a lot of selectable elements), you might want to set this option to false and refresh positions manually, as needed. |
Boolean |
|
cancel |
The cancel option provides a selector of elements that are omitted from the action of beginning a selection. If the user clicks and drags on one of the specified elements, no selection occurs. |
Selector |
|
delay |
Allows you the option of specifying the number of milliseconds that should pass before a selection is allowed to take place. The default is zero (no delay). |
Integer |
|
disabled |
Determines whether the selectable is disabled. |
Boolean |
|
distance |
Specifies the number of pixels the mouse cursor should move before a selection begins. |
Number |
|
filter |
The matching child elements will be made into selectable elements. |
Selector |
|
tolerance |
Defines how a selection should occur. The two options at the time of this writing are "fit" and "touch". The value "fit" means that the selection box should completely contain the item being selected before a selection takes place. The option "touch" means that merely coming into contact with the item makes the item selected. |
String |
|
create |
This function is executed when the selectable is created. |
function(event, ui) |
|
selected |
This function is executed at the end of a select operation (when the mouse button has been released), on each element added to the selection. Selected elements are available in the ui argument as ui.selected. The thiskeyword refers to the parent selectable element. |
function(event, ui) |
|
selecting |
This function is executed as elements are selected during a select operation (while the selection box is being drawn). Selected elements are available in the ui argument as ui.selecting. The this keyword refers to the parent selectable element. |
function(event, ui) |
|
start |
This function is executed at the beginning of a select operation (when the mouse button is first pressed down). The this keyword refers to the parent selectable element. |
function(event, ui) |
|
stop |
This function is executed at the end of a select operation (when the mouse button is released). The this keyword refers to the parent selectable element. |
function(event, ui) |
|
unselected |
This function is executed at the end of a select operation (when the mouse button has been released), for each element removed from the selection. The element removed from the selection is available in the uiargument as ui.unselected. The this keyword refers to the parent selectable element. |
function(event, ui) |
|
unselecting |
This function is executed during a select operation (while the selection box is being drawn). Selected elements are available in the ui argument as ui.unselecting. The this keyword refers to the parent selectable element. |
function(event, ui) |
Notes
In the ui argument of each of the callback functions documented here, the parent selectable element is also available as ui.selectable.
The Selectable plugin currently does not provide a way to customize the box being drawn—for example, by adding a class name to it via a Selectable option. Despite this limitation, you do have the ability to customize the selection box, and you can do that by adding a rule to your style sheet that references the selector, div.ui-selectable-helper.
All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)
If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.
© 2016-2026 All site design rights belong to S.Y.A.