jQuery UI : Selectable Methods
Learn how to use jQuery UI Selectable Methods to Control and Manipulate Selectable Interactions
jQuery UI Selectable Interaction : Methods
The jQuery UI Selectable Interaction provides a set of methods to control and manipulate selectable Interactions, most of these method are similar to other interaction methods, only unique one being refresh method.
Table: jQuery UI Selectable Interactions Methods
|selectable("destroy")||To Remove interaction from the element.|
|selectable("disable")||To Disable the selectable Interaction.|
|selectable("enable")||To enable the selectable Interaction|
|selectable("option")||To alter one or multiple Interactions settings|
|unselecting||To Refresh the selectable Interaction. It is an alternative to setting a value of false for autoRefresh setting.|
jQuery UI Selectable Interaction : Refresh Methods
The jQuery UI Setting of refresh method is used to manually refresh the position and size of all selectables. It should be used when the setting autoRefresh is set to false.
In the demo, we use click handler and attach it to button element, which simply calls the method refresh manually on the elements of the selectable container.
Example: jQuery UI Selectable Interaction - Refresh MethodGive it a TRY! » Note:If we click the refresh button, the selection status is update.
jQuery UI Selectable Interaction : Create Selectable Image Viewer.
The jQuery UI Selectable Interaction methods can be used to create a basic kind of Image Viewer, where the user can choose to view the image by selecting the related thumbnail of the image.
In the demo, we used a div element with
Example: jQuery UI Selectable Interaction - Selecting and UnSelecting EventsGive it a TRY! » Note:All procedures are same as last event, just the trigger event is different.
jQuery UI Selectable Interaction : Configuration of Selectable Interaction
The jQuery UI Selectable Interaction provides a set of setting options to Configure the Selectables.
Table: jQuery UI Selectable Interactions Configurations
|disabled||When set to true, the interaction is initially disabled. Default value is false|
|autoRefresh||When set to true, the size and position of the every selectable is refreshed at the start of each select operation. Default value is true|
|cancel||To prevent the specified elements from being selected using a click.|
|delay||To specify the delay in milliseconds before the element gets selected|
|distance||To set the distance the mouse pointer must move, with button pressed, before selection begins.|
|filter||A Selector to filter child element.|
jQuery UI Selectable Interaction : Cancel Setting
The jQuery UI Selectable Interaction setting of cancel can be used to make element unselectable by the user.
In the demo, a selector is used to prevent the element with id value of earth from being selected, but it can be selected by using a click.
Example: jQuery UI Selectable Interaction - cancel SettingGive it a TRY! » Note: Selecting Elements by Clicking on them cannot be cancelled using this setting.
jQuery UI Selectable Interaction : Filtering Selectables
While triggering jQuery UI Selectable Interaction can be used to restrict element within the selectable container that we do not want to be selectable, for that purpose the setting available is filter
In the demo, we have assigned class to each item except for the second, the element without the class name selectable is filter out.