首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery之选择组件的深入解析

Posted in Javascript onJune 19, 2013

1：选择(Selectable)组件可以让用户页面上的一些元素变成可选择的，用户可以通过单击元素或者拖动的方式来选择它们，也可以
按住Ctrl键来选择不连续的元素
$('.selector').selectable(options);
但是在jQuery UI库中的主题包中并未提供ui-selecting和ui-selected类的样式，因此在使用选择组件时，还需要自己来创建这些样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<style type="text/css">
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:0px;
}
#feedback {
 font-size: 1.4em;
}
#selectable .ui-selecting {
 background: #FECA40;
}
#selectable .ui-selected {
 background: #00BF00;
 color: white;
}
#selectable {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 85%;
}
#selectable li {
 margin: 3px;
 padding: 0.4em;
 font-size: 16px;
 height: 18px;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#selectable").selectable();
 });
 </script>
</head>
<body>
<div class="demo">
  <h1>新手上路</h1>
  <ol id="selectable">
    <li class="ui-widget-content">开通网银，百付宝为您一路护航</li>
    <li class="ui-widget-content">认准标识，精选实力卖家任您选择</li>
    <li class="ui-widget-content">收藏 + 购物车，逛街搜店更便捷</li>
    <li class="ui-widget-content">先验货再付款，交易更安全</li>
    <li class="ui-widget-content">信用诚实可靠，品质有保障</li>
    <li class="ui-widget-content">精选诚信商户，卖家可信赖</li>
    <li class="ui-widget-content">强大客服支持，购物更放心 </li>
  </ol>
</div>
<!-- End demo -->
</body>
</html>

jQuery之选择组件的深入解析

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<style type="text/css">
* {
}
body {
 text-align:center;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 520px;
 height:220px;
 background: #fff;
 border: 5px solid #000;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:0px;
 text-align:center;
}
#feedback {
 font-size: 1.4em;
}
#selectable .ui-selecting {
 background: #FECA40;
}
#selectable .ui-selected {
 background: #F39814;
 color: white;
}
#selectable {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#selectable li {
 margin: 5px;
 padding:2px;
 font-size: 16px;
 height: 20px;
 cursor:pointer;
 border: 1px solid #aaaaaa;
 background: #ffffff;
 color: #222222;
 width:114px;
 float:left;
}
#result {
 clear:both;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#wrap").selectable({
   filter:"li",   //定义li元素为可选项
   stop: function (e, ui) {  //处理选择事件
    var selection = [];
    $("li.ui-selected", this).each(function () {
     selection.push($(this).text());
    });
    //显示结果
    $("#result").text("您选择了 " + selection.length + " 项：" + selection.join("，"));
   }
  });
 });
 </script>
</head>
<body>
<div id="wrap">
  <h1>城市列表</h1>
  <ul id="selectable">
    <li>重庆</li>
    <li >北京</li>
    <li >上海</li>
    <li >广州</li>
    <li >深圳</li>
    <li >成都</li>
    <li >天津</li>
    <li >南京</li>
    <li >杭州</li>
    <li >武汉</li>
    <li >西安</li>
    <li >长沙</li>
    <li >厦门</li>
    <li >郑州</li>
    <li >太原</li>
    <li >青岛</li>
  </ul>
  <div id="result"></div>
</div>
</body>
</html>

效果图：
jQuery之选择组件的深入解析

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selectable组件</title>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectable.js"></script>
<style type="text/css">
* {
}
body {
 text-align:center;
 margin:0 auto;
 padding:0;
}
#wrap {
 margin: 10px auto 10px auto;
 padding: 5px;
 width: 520px;
 height:220px;
 background: #fff;
 border: 5px solid #000;
}
h1 {
 color:#006;
 font-size:24px;
 font-weight:bold;
 margin-bottom:0px;
 text-align:center;
}
#feedback {
 font-size: 1.4em;
}
#selectable .ui-selecting {
 background: #FECA40;
}
#selectable .ui-selected {
 background: #F39814;
 color: white;
}
#selectable {
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#selectable li {
 margin: 5px;
 padding:2px;
 font-size: 16px;
 height: 20px;
 cursor:pointer;
 border: 1px solid #aaaaaa;
 background: #ffffff;
 color: #222222;
 width:114px;
 float:left;
}
#result {
 clear:both;
}
</style>
<link href="CSS/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#wrap").selectable({
   filter:"li",
   selected: eventCallback,
   stop: eventCallback,
   start: eventCallback,
   selecting: eventCallback,
   unselecting: eventCallback 
  });
  var selection;
  function eventCallback(e, ui) {
   if (e.type == "selectableselected") {
    selection = [];
    $(".ui-selected", this).each(function () {
     selection.push($(this).text());
    });    
   } else if (e.type == "selectablestop") {
    $("#result").text("您选择了 " + selection.length + " 项：" + selection.join("，"));
   }
  }
 });
 </script>
</head>
<body>
<div id="wrap">
  <h1>城市列表</h1>
  <ul id="selectable">
    <li>重庆</li>
    <li >北京</li>
    <li >上海</li>
    <li >广州</li>
    <li >深圳</li>
    <li >成都</li>
    <li >天津</li>
    <li >南京</li>
    <li >杭州</li>
    <li >武汉</li>
    <li >西安</li>
    <li >长沙</li>
    <li >厦门</li>
    <li >郑州</li>
    <li >太原</li>
    <li >青岛</li>
  </ul>
  <div id="result"></div>
</div>
</body>
</html>

效果和上例相同

jQuery之选择组件的深入解析

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
微信小程序自定义弹窗实现详解(可通用）
Jul 04 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 #Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 #Javascript
解析JavaScript中的标签语句
Jun 19 #Javascript
解析window.open的使用方法总结
Jun 19 #Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 #Javascript
Js,alert出现乱码问题的解决方法
Jun 19 #Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 #Javascript
into outfile(1) 轮询锁(1) 全表扫描(1) 远程连接(2) 索引树扫描(1) sql模式(1) 限流器(1) 异步机制(1) 逻辑备份(1) springCloud(6)
You might like
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
HTML上传控件取消选择
2013/03/06 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
在Anaconda3下使用清华镜像源安装TensorFlow（CPU版）
2020/04/19 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
Love, Bonito国际官网：新加坡女装品牌
2021/03/13 全球购物
大学生入党思想汇报
2014/01/14 职场文书
元旦晚会策划方案
2014/02/18 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
婚礼新人答谢词
2015/01/04 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android