Selectable Widgetversion 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.
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:
$( ".selector" ).selectable({ appendTo: "#someElem" }); |
Get or set the appendTo option, after initialization:
// gettervar appendTo = $( ".selector" ).selectable( "option", "appendTo" );// setter$( ".selector" ).selectable( "option", "appendTo", "#someElem" ); |
autoRefreshType: Boolean
true
refresh() method manually.Initialize the selectable with the autoRefresh option specified:
$( ".selector" ).selectable({ autoRefresh: false }); |
Get or set the autoRefresh option, after initialization:
// gettervar autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );// setter$( ".selector" ).selectable( "option", "autoRefresh", false ); |
cancelType: Selector
"input,textarea,button,select,option"
Initialize the selectable with the cancel option specified:
$( ".selector" ).selectable({ cancel: a,.cancel }); |
Get or set the cancel option, after initialization:
// gettervar cancel = $( ".selector" ).selectable( "option", "cancel" );// setter$( ".selector" ).selectable( "option", "cancel", a,.cancel ); |
delayType: Integer
0
Initialize the selectable with the delay option specified:
$( ".selector" ).selectable({ delay: 150 }); |
Get or set the delay option, after initialization:
// gettervar delay = $( ".selector" ).selectable( "option", "delay" );// setter$( ".selector" ).selectable( "option", "delay", 150 ); |
disabledType: Boolean
false
true.Initialize the selectable with the disabled option specified:
$( ".selector" ).selectable({ disabled: true }); |
Get or set the disabled option, after initialization:
// gettervar disabled = $( ".selector" ).selectable( "option", "disabled" );// setter$( ".selector" ).selectable( "option", "disabled", true ); |
distanceType: Number
0
Initialize the selectable with the distance option specified:
$( ".selector" ).selectable({ distance: 30 }); |
Get or set the distance option, after initialization:
// gettervar distance = $( ".selector" ).selectable( "option", "distance" );// setter$( ".selector" ).selectable( "option", "distance", 30 ); |
filterType: Selector
"*"
Initialize the selectable with the filter option specified:
$( ".selector" ).selectable({ filter: li }); |
Get or set the filter option, after initialization:
// gettervar filter = $( ".selector" ).selectable( "option", "filter" );// setter$( ".selector" ).selectable( "option", "filter", li ); |
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:
$( ".selector" ).selectable({ tolerance: "fit" }); |
Get or set the tolerance option, after initialization:
// gettervar tolerance = $( ".selector" ).selectable( "option", "tolerance" );// setter$( ".selector" ).selectable( "option", "tolerance", "fit" ); |
Methods
destroy()
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).selectable( "destroy" ); |
disable()
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).selectable( "disable" ); |
enable()
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).selectable( "enable" ); |
option( optionName )Returns: Object
optionName.-
optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).selectable( "option", "disabled" ); |
option()Returns: PlainObject
- This method does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).selectable( "option" ); |
option( optionName, value )
optionName.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).selectable( "option", "disabled", true ); |
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).selectable( "option", { disabled: true } ); |
refresh()
autoRefresh option is set to false.- This method does not accept any arguments.
Invoke the refresh method:
$( ".selector" ).selectable( "refresh" ); |
widget()Returns: jQuery
jQuery object containing the selectable element.
- This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).selectable( "widget" ); |
Events
create( event, ui )Type: selectablecreate
Initialize the selectable with the create callback specified:
$( ".selector" ).selectable({ create: function( event, ui ) {}}); |
Bind an event listener to the selectablecreate event:
$( ".selector" ).on( "selectablecreate", function( event, ui ) {} ); |
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:
$( ".selector" ).selectable({ selected: function( event, ui ) {}}); |
Bind an event listener to the selectableselected event:
$( ".selector" ).on( "selectableselected", function( event, ui ) {} ); |
selecting( event, ui )Type: selectableselecting
-
eventType: Event
-
uiType: Object
-
selectingType: ElementThe current selectable item being selected.
-
Initialize the selectable with the selecting callback specified:
$( ".selector" ).selectable({ selecting: function( event, ui ) {}}); |
Bind an event listener to the selectableselecting event:
$( ".selector" ).on( "selectableselecting", function( event, ui ) {} ); |
start( event, ui )Type: selectablestart
Initialize the selectable with the start callback specified:
$( ".selector" ).selectable({ start: function( event, ui ) {}}); |
Bind an event listener to the selectablestart event:
$( ".selector" ).on( "selectablestart", function( event, ui ) {} ); |
stop( event, ui )Type: selectablestop
Initialize the selectable with the stop callback specified:
$( ".selector" ).selectable({ stop: function( event, ui ) {}}); |
Bind an event listener to the selectablestop event:
$( ".selector" ).on( "selectablestop", function( event, ui ) {} ); |
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:
$( ".selector" ).selectable({ unselected: function( event, ui ) {}}); |
Bind an event listener to the selectableunselected event:
$( ".selector" ).on( "selectableunselected", function( event, ui ) {} ); |
unselecting( event, ui )Type: selectableunselecting
-
eventType: Event
-
uiType: Object
-
unselectingType: ElementThe current selectable item being unselected.
-
Initialize the selectable with the unselecting callback specified:
$( ".selector" ).selectable({ unselecting: function( event, ui ) {}}); |
Bind an event listener to the selectableunselecting event:
$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} ); |
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 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>selectable demo</title> <style> #selectable .ui-selecting { background: #ccc; } #selectable .ui-selected { background: #999; } </style></head><body><ul id="selectable"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li></ul><script>$( "#selectable" ).selectable();</script></body></html> |