In-depth analysis of jQuery's selection component_Basic knowledge

1: The Selectable component can make some elements on the user page selectable . The user can select them by clicking on the elements or dragging them, or they can
Hold Ctrl key to select non-contiguous elements
$('.selector').selectable(options);
But in jQuery UI library The ui-selecting and ui-selected class styles are not provided in the theme package, so when using the selection component, you need to create these styles yourself

Copy code The code is as follows:

Newbie

1. Open online banking, Baifu Bao will escort you all the way


2. Look for the logo and select powerful sellers for you to choose

< li class="ui-widget-content">Collect the shopping cart to make shopping and searching for stores more convenient

3. Inspect the goods first and then pay, and make the transaction More secure


4. Honest and reliable, quality guaranteed


5. 
   

2: Filter selection item
can filter sub-elements, and has specified which sub-elements are optional. For this purpose, You can set the filter attribute to a jQuery selector when calling the selectable() method. At this time, only elements that match the selector can become selection items

Copy code The code is as follows:

 

城市列表

 

   
• 重庆

   
• 北京

   
• 上海

   
• 广州

   
• 深圳

   
• 成都

   
• 天津

   
• 南京

   
• 杭州

   
• 武汉

   
• 西安

   
• 长沙

   
• 厦门

   
• 郑州

   
• 太原

   
• 青岛

 

 

Rendering:


3: Select event callback function
The selection event provides 6 events
selected, the event type is selectableseleted, it is triggered when an element is added to the selection and the selection operation is completed
selecting: The event type is selectableselecting, it is triggered when an element is selected during the selection process
start: The event type is selectablestart, which is triggered when the selection operation starts.
stop: The event type is selectablestop, which is triggered when the selection operation ends.
unselected: The event type is selectableunselected, when each element is removed from the selected item. , and is triggered after the selection operation is completed
unselecting: The event type is selectableunselecting, which is triggered when each element is removed from the selected item during the selection process

Copy code The code is as follows:

 

城市列表

 

   
• 重庆

   
• 北京

   
• 上海

   
• 广州

   
• 深圳

   
• 成都

   
• 天津

   
• 南京

   
• 杭州

   
• 武汉

   
• 西安

   
• 长沙

   
• 厦门

   
• 郑州

   
• 太原

   
• 青岛

 

 

效果和上例相同