communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jQuery之选择组件的深入解析_基础知识

jQuery之选择组件的深入解析_基础知识

WBOY
Libérer： 2016-05-16 17:32:01
original
1046 Les gens l'ont consulté
1：选择(Selectable)组件可以让用户页面上的一些元素变成可选择的，用户可以通过单击元素或者拖动的方式来选择它们，也可以
按住Ctrl键来选择不连续的元素
$('.selector').selectable(options);
但是在jQuery UI库中的主题包中并未提供ui-selecting和ui-selected类的样式，因此在使用选择组件时，还需要自己来创建这些样式
复制代码 代码如下:





selectable组件











 

新手上路


 

       
  1. 开通网银，百付宝为您一路护航

    2.    
  2. 认准标识，精选实力卖家任您选择

    3.    
  3. 收藏 + 购物车，逛街搜店更便捷

    4.    
  4. 先验货再付款，交易更安全

    5.    
  5. 信用诚实可靠，品质有保障

    6.    
  6. 精选诚信商户，卖家可信赖

    7.    
  7. 强大客服支持，购物更放心

    8.  








2：过滤选择项
可以对子元素进行过滤，已指定哪些子元素是能够可选的，为此，可以在调用selectable()方法时将filter属性设置为一个jQuery选择器，此时只有与选择器相匹配的
元素才能够成为选择项
复制代码 代码如下:





selectable组件











 

城市列表


 

       
  • 重庆

    •    
  • 北京

    •    
  • 上海

    •    
  • 广州

    •    
  • 深圳

    •    
  • 成都

    •    
  • 天津

    •    
  • 南京

    •    
  • 杭州

    •    
  • 武汉

    •    
  • 西安

    •    
  • 长沙

    •    
  • 厦门

    •    
  • 郑州

    •    
  • 太原

    •    
  • 青岛

    •  

 





效果图：


3：选择事件回调函数
选择事件提供了6个事件
selected, 事件类型为selectableseleted, 当把某个元素添加到选项中并且结束选择操作后触发
selecting: 事件类型为selectableselecting, 在选择过程中，当选定某个元素时触发
start: 事件类型为selectablestart, 当开始选择操作时触发
stop: 事件类型为selectablestop，当结束选择操作时触发
unselected: 事件类型为selectableunselected, 当从选定项中移除每个元素，并且结束选择操作后触发
unselecting: 事件类型为selectableunselecting, 在选择过程中，当从选定项中移除每个元素时触发
复制代码 代码如下:





selectable组件











 

城市列表


 

       
  • 重庆

    •    
  • 北京

    •    
  • 上海

    •    
  • 广州

    •    
  • 深圳

    •    
  • 成都

    •    
  • 天津

    •    
  • 南京

    •    
  • 杭州

    •    
  • 武汉

    •    
  • 西安

    •    
  • 长沙

    •    
  • 厦门

    •    
  • 郑州

    •    
  • 太原

    •    
  • 青岛

    •  

 





效果和上例相同

Étiquettes associées：
jquery
source：php.cn
Article précédent：JS验证控制输入中英文字节长度(input、textarea等)具体实例_javascript技巧 Article suivant：js实现的切换面板实例代码_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Comment récupérer les valeurs des lignes non sélectionnées dans un tableau de données HTML à l'aide de jquery J'essaie d'obtenir la valeur de toutes les lignes sur lesquelles le bouton n'a pas été cli...
Depuis 2024-04-05 09:26:49
0
1
1418
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
J'ai créé un élément en CSS pur via des signets. Il est créé mais n'est pas visible Mon code est le suivant : g=document.createElement('div');g.setAttribute("id",&q...
Depuis 2024-04-04 17:27:27
0
1
417
Impossible d'envoyer les données du formulaire sur Safari/Firefox iOS Cela fonctionne sur toutes les plateformes sauf Safari/Firefox sur iOS : jQuery("#gfo...
Depuis 2024-04-04 12:53:48
0
1
303
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal