jQuery之选择组件的深入解析

2024-04-05 21:36:52

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>

</body>
</html>

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>

效果图：

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循环动画与获取组件尺寸的方法

本文实例讲述了jQuery循环动画与获取组件尺寸的方法.分享给大家供大家参考.具体分析如下: 一.前言 1.jQuery中的animate()方法允许您创建自定义的动画. animate() 方法几乎可以操作所有 CSS 属性,不过当使用 animate() 时,必须使用Camel标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等.同时,色彩动画并不包含在核心 jQuery 库中.如果需要生成
基于jQuery实现的美观星级评论打分组件代码

本文实例讲述了基于jQuery实现的美观星级评论打分组件代码.分享给大家供大家参考,具体如下: 这款jquery星级评论打分组件,是通用打分组件,callBack打分后执行的回调,this.Index:获取当前选中值. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-rate-dfzj-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset
jQuery之按钮组件的深入解析

按钮组件: $(selector).button([options]); 复制代码代码如下: <!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"&
基于jquery的图片轮播 tab切换组件

目前只添加了scroll和none的效果,scroll即滑动的效果,可以支持x和y方向的滑动:none就是没有任何效果,只是显示和隐藏,后续需要添加其他效果再做扩展,写的有点水,呵呵,在此留笔,防止丢失. Demo Address:http://demo.jb51.net/js/2012/sinaapp/ 复制代码代码如下: /** * 巨无霸轮播 */ $.fn.loopSlider = function(option) { var setting = { // 默认显示的顺序 initIn
使用jquery组件qrcode生成二维码及应用指南

有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. 复制代码代码如下: <script type="text/javasc
jQuery进行组件开发完整实例

本文实例讲述了jQuery进行组件开发的方法,分享给大家供大家参考,具体如下: 前面的<JavaScript组件开发>分析了JavaScript进行组件开发的技巧,这里分析使用jQuery进行组件开发的方法. 使用jQuery进行组件开发和使用纯JavaScript脚本(不使用框架)原理基本类似,特别是公共方法的组织是一样的. 不同点是,jQuery使用了插件机制,通过$()直接进行操作对象(DOM元素)绑定,然后对DOM元素或HTML代码进行绑定事件等的操作. 另一个不同点则是把jQuery
jQuery之排序组件的深入解析

1:排序(Sortable)组件可以将页面上的一组元素变成可排序的,可用于定义一个可排序的元素列表,然后,通过拖动鼠标可以调整元素在列表中的位置$('.selector').sortable(options); 简单实例: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
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=&
JavaScript组件开发完整示例

本文实例讲述了JavaScript组件开发的技巧.分享给大家供大家参考,具体如下: 使用JavaScript,按照面向对象的思想来构建组件. 现以构建一个TAB组件为例. 从功能上讲,组件包括可视部分和逻辑控制部分:从代码结构上讲,组件包括代码部分和资源部分(样式.图片等). 组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含):封装性(隐藏私有方法和变量):可重用性(可反复多次使用,用来组装更复杂的应用). <html> <head> <meta http-e
jQuery表格排序组件-tablesorter使用示例

一.引入文件复制代码代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script>  <
如何使用jquery easyui创建标签组件

jQuery EasyUI v1.4.4 下载网址:http://www.jb51.net/codes/70218.html 本教程将展示如何使用easyui创建一个标签组件.标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体. 标签一次只能显示一个面板,每个面板都有标题.图表和关闭按钮.当标签被选中之后,会显示相应面板的内容. 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板. < div class="easyui-tabs" sty

jQuery之选择组件的深入解析

相关推荐

随机推荐