jquery's selection component

1: Select (selectable) component can make the user page of some elements can be selected, users can click the element or drag to select them, you can

Hold down the CTRL key to select discontinuous elements

$ ('. Selector '). selectable (options);

However, the style of the ui-selecting and ui-selected classes is not provided in the theme packs in the jquery UI library, so you also need to create them yourself when you use the selection components

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  


2: Filter Selection

You can filter on the child elements and specify which subelements are optional, so you can set the Filter property to a jquery selector when the selectable () method is invoked, only if the selector matches the

element to become a Select item




<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Effect Chart:



3: Select Event callback function

Select Event provides 6 events

Selected, the event type is selectableseleted, when an element is added to an option and the selection action is terminated.

Selecting: Event Type is selectableselecting, in the selection process, when an element is selected to trigger

Start: Event type is Selectablestart, triggered when the select operation is started

Stop: Event type is selectablestop, triggered when end selection operation

Unselected: Event type is selectableunselected, when each element is removed from the selected item and triggered after the selection operation is completed

Unselecting: Event Type is selectableunselecting, in the selection process, when each element is removed from the selected item, triggered




<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

 

 
The effect is the same as the previous example