Search within TutorialsPark

jQuery UI : Selectable Events


Learn how to use jQuery UI Selectable Event Callbacks.


jQuery UI Selectable Interaction : Events

The jQuery UI Selectable Interaction also provides a set of event callback options which are used to specify callback functions that are executed at the occurence of specific event during the course of an selectable Interaction

The table below has list events for the Selectable Interaction.

Table: jQuery UI Selectable Interactions Configurations

Settings Description
create Event is triggered when any iteraction is applied to selectable element.
selected Event is triggerd when an item gets selected. For multiple items the event is triggered for each element.
selecting Event is triggered when the user begins the selection process.
unselected Event is triggered when an item gets unselected. For multiple elements getting unselected, the event is triggered for each item.
unselecting Event is triggered when the user begins the unselection process pushing the mouse button downwards.

Addition Information for most of these events is provided using jQuery UI ui object. For the events of selected and selecting, the ui object's property of selected contains HTMLElement corresponding to the element that is about to be or has been selected.

For the events the unselected and selected, the ui object has a property unselected which performs the same purpose.


jQuery UI Selectable Interaction : Using Callback Events

In the demo below, we have used events of selected , unselected , start and stop with their callback functions.

When the div element is selected, the inner text are changed as well to reflect the selection using the selected event callback, and when the element is deselected the change is reflected as well.At the end of selection the notification tooltip is removed using stop property.

Example: jQuery UI Selectable Interaction - Using Callback Events

Give it a TRY! » Note:For stop and start event the ui object is not used, since it will be empty.


jQuery UI Selectable Interaction : Selecting and UnSelecting Event.

The jQuery UI Selectable Interaction Events of selecting and unselecting are fired during the selection process when elements are added to removed from the selection.

In the demo, we use the events of selecting and unselecting to specify callback functions, inorder to alter the text contents of the tooltip at specific Interactions.

Example: jQuery UI Selectable Interaction - Selecting and UnSelecting Events

Give it a TRY! » Note:All procedures are same as last event, just the trigger event is different.