Selectable Widget version added: 1.0
Description: Use the mouse to select elements, individually or in a group.
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.
Dependencies
Additional Notes:
- 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.
Options
appendToType: Selector
"body"
Initialize the selectable with the appendTo option specified:
1
|
|
Get or set the appendTo option, after initialization:
1
2
3
4
5
|
|
autoRefreshType: Boolean
true
refresh()
method manually.Initialize the selectable with the autoRefresh option specified:
1
|
|
Get or set the autoRefresh option, after initialization:
1
2
3
4
5
|
|
cancelType: Selector
"input,textarea,button,select,option"
Initialize the selectable with the cancel option specified:
1
|
|
Get or set the cancel option, after initialization:
1
2
3
4
5
|
|
delayType: Integer
0
Initialize the selectable with the delay option specified:
1
|
|
Get or set the delay option, after initialization:
1
2
3
4
5
|
|
disabledType: Boolean
false
true
.Initialize the selectable with the disabled option specified:
1
|
|
Get or set the disabled option, after initialization:
1
2
3
4
5
|
|
distanceType: Number
0
Initialize the selectable with the distance option specified:
1
|
|
Get or set the distance option, after initialization:
1
2
3
4
5
|
|
filterType: Selector
"*"
Initialize the selectable with the filter option specified:
1
|
|
Get or set the filter option, after initialization:
1
2
3
4
5
|
|
toleranceType: String
"touch"
"fit"
: Lasso overlaps the item entirely."touch"
: Lasso overlaps the item by any amount.
Initialize the selectable with the tolerance option specified:
1
|
|
Get or set the tolerance option, after initialization:
1
2
3
4
5
|
|
Methods
destroy()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()
-
This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()
-
This method does not accept any arguments.
Invoke the enable method:
1
|
|
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
-
This method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
refresh()
autoRefresh
option is set to false
.-
This method does not accept any arguments.
Invoke the refresh method:
1
|
|
widget()Returns: jQuery
jQuery
object containing the selectable element.-
This method does not accept any arguments.
Invoke the widget method:
1
|
|
Events
create( event, ui )Type: selectablecreate
Initialize the selectable with the create callback specified:
1
2
3
|
|
Bind an event listener to the selectablecreate event:
1
|
|
selected( event, ui )Type: selectableselected
-
eventType: Event
-
uiType: Object
-
selectedType: ElementThe selectable item that has been selected.
-
Initialize the selectable with the selected callback specified:
1
2
3
|
|
Bind an event listener to the selectableselected event:
1
|
|
selecting( event, ui )Type: selectableselecting
-
eventType: Event
-
uiType: Object
-
selectingType: ElementThe current selectable item being selected.
-
Initialize the selectable with the selecting callback specified:
1
2
3
|
|
Bind an event listener to the selectableselecting event:
1
|
|
start( event, ui )Type: selectablestart
Initialize the selectable with the start callback specified:
1
2
3
|
|
Bind an event listener to the selectablestart event:
1
|
|
stop( event, ui )Type: selectablestop
Initialize the selectable with the stop callback specified:
1
2
3
|
|
Bind an event listener to the selectablestop event:
1
|
|
unselected( event, ui )Type: selectableunselected
-
eventType: Event
-
uiType: Object
-
unselectedType: ElementThe selectable item that has been unselected.
-
Initialize the selectable with the unselected callback specified:
1
2
3
|
|
Bind an event listener to the selectableunselected event:
1
|
|
unselecting( event, ui )Type: selectableunselecting
-
eventType: Event
-
uiType: Object
-
unselectingType: ElementThe current selectable item being unselected.
-
Initialize the selectable with the unselecting callback specified:
1
2
3
|
|
Bind an event listener to the selectableunselecting event:
1
|
|
Example:
A simple jQuery UI Selectable.
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
|
|