帝王谷资源网 Design By www.wdxyy.com
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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.core.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.mouse.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.selectable.js"><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>
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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.core.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.mouse.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.selectable.js"><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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.core.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.mouse.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.selectable.js"><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>
效果和上例相同
按住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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.core.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.mouse.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.selectable.js"><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>
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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.core.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.mouse.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.selectable.js"><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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.core.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.widget.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.mouse.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.ui.selectable.js"><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,选择组件
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月25日
2024年10月25日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]