首页
所有分类
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 页面只自动刷新一次
Jul 10 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
微信小程序自定义头部导航栏（组件化）
Nov 15 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) Carbon(1) 数据合并(1) element-ui(1) pongo2(1) 优先队列(1) 复合索引(1) 动态代理(1) 模板引擎(1)
You might like
php简单实现多语言切换的方法
2016/05/09 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JavaScript基础篇（6）之函数表达式闭包
2015/12/11 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python中的异常处理简明介绍
2015/04/13 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
详解Django之auth模块（用户认证）
2018/04/17 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
详解python 注释、变量、类型
2018/08/10 Python
python中的json总结
2018/10/11 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
Harman Audio官方商店：购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
一套C++笔试题面试题
2012/06/06 面试题
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
单位绩效考核方案
2014/05/11 职场文书
单位工作证明范本
2015/06/15 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS