Home > Web Front-end > JS Tutorial > In-depth analysis of jQuery's selection component_Basic knowledge

In-depth analysis of jQuery's selection component_Basic knowledge

WBOY
Release: 2016-05-16 17:32:01
Original
1047 people have browsed it
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:





selectable component











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

  3. < li class="ui-widget-content">Collect the shopping cart to make shopping and searching for stores more convenient
  4. Inspect the goods first and then pay, and make the transaction More secure

  5. Honest and reliable, quality guaranteed











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:





selectable组件











 

城市列表


 

       
  • 重庆

  •    
  • 北京

  •    
  • 上海

  •    
  • 广州

  •    
  • 深圳

  •    
  • 成都

  •    
  • 天津

  •    
  • 南京

  •    
  • 杭州

  •    
  • 武汉

  •    
  • 西安

  •    
  • 长沙

  •    
  • 厦门

  •    
  • 郑州

  •    
  • 太原

  •    
  • 青岛

  •  

 





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:





selectable组件











 

城市列表


 

       
  • 重庆

  •    
  • 北京

  •    
  • 上海

  •    
  • 广州

  •    
  • 深圳

  •    
  • 成都

  •    
  • 天津

  •    
  • 南京

  •    
  • 杭州

  •    
  • 武汉

  •    
  • 西安

  •    
  • 长沙

  •    
  • 厦门

  •    
  • 郑州

  •    
  • 太原

  •    
  • 青岛

  •  

 





效果和上例相同

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template