jQuery UI : Selectable Interaction
Learn how to use jQuery UI Selectable Interaction to Select one or multiple Element.
jQuery UI Selectable Interaction : Applying Selectable Interaction
The jQuery UI Selectable Interaction provides enables the used to select one or multiple element, simply by dragging the mouse over them, or clicking on individual items.To apply this Interaction use method selectable.
In the demo, we use the selectable interaction on the element which contains a list of elements from which the user can select.To create visual effect of selection we use CSS classes.
Example: jQuery UI Selectable Interaction - Applying Selectable InteractionGive it a TRY! » Note:The class ui.selected is applied when the selection is in progress, and ui.selected when selected.
jQuery UI Selectable Interaction : Enable Multiple Selection
The jQuery UI Selectable Interaction can be used to select elements by simply clicking on them.Multiple Elements can be selected, and for non-contiguous selection use Control/Meta Keys
Example: jQuery UI Selectable Interaction - Enable Multiple SelectionGive it a TRY! » Note:The class ui.selected is applied when the selection is in progress, and ui.selected when selected.
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 india from being selected, but it can be selected by using a click.
Example: jQuery UI Selectable Interaction - cancel SettingGive it a TRY! » Note:Cancel Setting is not applicable when the element is selected by dragging.
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, elements belonging to class europe are selected only.