appendTo |
Type : Selector
Default : 'body'
Element to appendTo
$( '#my_selectable' ).selectable({
appendTo: '#my_element'
});
To read appendTo
var my_var = $( "#my_selectable" ).selectable( "option", "appendTo" );
To set appendTo
$( "#my_selectable" ).selectable( "option", "appendTo", sel );// sel is the variable
|
autoRefresh |
Type : Boolean
Default : True
$( "#my_selectable" ).selectable({
autoRefresh: false
});
To get the autoRefresh option and set the value
var auto_ref = $( "#my_selectable" ).selectable( "option", "autoRefresh" );
To Set the option
$("#my_selectable").selectable("option","autoRefresh", false);
|
cancel |
Type : selector
Default : "textarea , button, id, option"
Elements which we don't want to be selected. ( or excluded from selection)
$( "#my_selectable" ).selectable({
cancel: "a,.no_select,#i5"
});
To get value of cancel option
var status = $( "#my_selectable" ).selectable( "option", "cancel" );
To Set the cancel option
$( "#my_selectable" ).my_selectable( "option", "cancel", "a,#i5" );
|
classes |
Type : Object
Default : {}
Specify additional classes to be added
$( "#my_selectable" ).my_selectable({
classes: {
"ui-selectable": "ui-state-error"
}
});
Getting the value of class
var class = $( "#my_selectable" ).my_selectable( "option", "classes.ui-selectable" )
To Set the classes option
$( "#my_selectable" ).my_selectable( "option", "classes.ui-selectable","highlight" )
|
delay |
Type : integer
Default : 0
Time in millseconds
$( "#my_selectable" ).selectable({
delay: 30
});
Delay in selection of element.
deprecated : This is deprecated in version 1.12
Getting delay option value
var my_delay = $( "#my_selectable" ).selectable( "option", "delay")
To Set the delay option value
$( "#my_selectable" ).selectable( "option", "delay", 100);
|
disabled |
Type : Boolean
Default : false
Desables the selectable ( if set to true )
$( "#my_selectable" ).my_selectable({
disabled:true
});
Specify the event to activate the tab
Getting disabled option value
var status = $( "#my_selectable" ).my_selectable( "option", "disabled")
To Set the disabled option value
$( "#my_selectable" ).my_selectable( "option", "disabled", true );;
|
distance |
Type : Number
Default : 0
$( "#my_selectable" ).my_selectable({
distance : 20
});
deprecated : This is deprecated in version 1.12
Getting distance option value
var distance = $( "#my_selectable" ).my_selectable("option", "distance");
To Set the distance option value
$("#my_selectable").my_selectable( "option", "distance", 40 );
|
filter |
Type : selector
Default : '*' ( All )
The child elements which can be selected.
$( "#my_selectable" ).my_selectable({
filter : 'li'
});
Getting the filter option value
var filter = $( "#my_selectable" ).my_selectable("option", "filter");
To Set the filter option value
$("#my_selectable").my_selectable("option","filter",'#l1');
|
tolerance |
Type : string
Possible values : 'touch', 'fit'
While selecting the element through Lasso, which mode to use.
$( "#my_selectable" ).my_selectable({
tolerance: "fit"
});
Getting the tolerance option value
var tolerance = $( "#my_selectable" ).my_selectable("option", "tolerance");
To Set the tolerrance option value
$("#my_selectable").my_selectable("option","tolerance",'touch');
|
Methods |
Destroy() |
Removes the functinality
$( "#my_selectable" ).selectable( "destroy" );
|
disable() |
Disable the selectable
$("#my_selectable").my_selectable( "disable" );
|
enable() |
Enable the selectable
$( "#my_selectable" ).selectable( "enable" );
|
instance() |
Retrive selectable instance object
$( "#my_selectable" ).selectable( "instance" );
|
option() |
Get the value of the given Option name
var p_enable = $( "#my_selectable" ).selectable( "option", "enable" )
We can get all the options with value by using an object containing key value pairs.
|
refresh() |
Refresh the position and size of elements
$( "#my_selectable" ).selectable( "refresh" );
|
widget() |
Returns JQuery object containing selectable elements
var tab_obj = $( "#my_selectable" ).selectable( "widget" )
|
Events |
create() |
Triggered when the selectable is created
$( "#my_selectable" ).selectable({
create: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectablecreate", function( event, ui ) {})
|
selected() |
Triggered at the end of the select option of each element.
$( "#my_selectable" ).selectable({
selected: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectableselected", function( event, ui ) {})
|
selecting() |
Triggered during the select option of each element.
$( "#my_selectable" ).selectable({
selecting: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectableselecting", function( event, ui ) {})
|
start() |
Triggered at begining of the select.
$( "#my_selectable" ).selectable({
start: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectablestart", function( event, ui ) {})
|
stop() |
Triggered at the end of the selection
$( "#my_selectable" ).selectable({
stop: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectablestop", function( event, ui ) {})
|
unselected() |
Triggered at the end of the selection when element is removed from selection.
$( "#my_selectable" ).selectable({
unselected: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectableunselected", function( event, ui ) {})
|
unselecting() |
Triggered at the end of the selection when element is removed from selection.
$( "#my_selectable" ).selectable({
unselecting: function( event, ui ) {}
});
We can bind one event listener to this event
$( "#my_selectable" ).on( "selectableunselecting", function( event, ui ) {})
|