Selectables

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
Press and hold Ctrl key for multiple selections
Draw a box holding Left Mouse key to select multiple items. ( Lasso tool )
$( '#my_selectable' ).selectable();
<ul id="my_selectable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>


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 Selectable tolerance fit option>
<br>
Default :
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 ) {})


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer