首页
所有分类
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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
最全正则表达式总结：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
javascript实现评分功能
Jun 24 Javascript
antd design table更改某行数据的样式操作
Oct 31 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
静态压缩(1) 抽象类(1) 乱码(3) 分区(2) 驱动模型(1) Date(1) 自动播放(1) 接口(1) router(1) 路由(1)
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP设计模式之建造者模式（Builder）原理与用法案例详解
2019/12/12 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JS array 数组详解
2009/03/22 Javascript
javascript测试题练习代码
2012/10/10 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）
2017/01/12 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python任务调度实例分析
2015/05/19 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
django跳转页面传参的实现
2020/09/17 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
英国打印机墨盒销售网站：Ink Factory
2019/10/07 全球购物
财政局长自荐信范文
2013/12/22 职场文书
继承公证书样本
2014/04/04 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
销售开票员岗位职责
2015/04/15 职场文书
如何写新闻稿
2015/07/18 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python