首页 > web前端 > js教程 > 正文

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

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





selectable组件











 

新手上路


 

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

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

  4.    
  5. 收藏 + 购物车,逛街搜店更便捷

  6.    
  7. 先验货再付款,交易更安全

  8.    
  9. 信用诚实可靠,品质有保障

  10.    
  11. 精选诚信商户,卖家可信赖

  12.    
  13. 强大客服支持,购物更放心

  14.  








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





selectable组件











 

城市列表


 

       
  • 重庆

  •    
  • 北京

  •    
  • 上海

  •    
  • 广州

  •    
  • 深圳

  •    
  • 成都

  •    
  • 天津

  •    
  • 南京

  •    
  • 杭州

  •    
  • 武汉

  •    
  • 西安

  •    
  • 长沙

  •    
  • 厦门

  •    
  • 郑州

  •    
  • 太原

  •    
  • 青岛

  •  

 





效果图:


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





selectable组件











 

城市列表


 

       
  • 重庆

  •    
  • 北京

  •    
  • 上海

  •    
  • 广州

  •    
  • 深圳

  •    
  • 成都

  •    
  • 天津

  •    
  • 南京

  •    
  • 杭州

  •    
  • 武汉

  •    
  • 西安

  •    
  • 长沙

  •    
  • 厦门

  •    
  • 郑州

  •    
  • 太原

  •    
  • 青岛

  •  

 





效果和上例相同

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板