<!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="https://www.jb51.net/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="https://www.jb51.net/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="https://www.jb51.net/CSS/base/jquery.ui.all.css" 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>
<h1>城市列表</h1>
<ul>
<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></div>
</div>
</body>
</html>
效果和上例相同
您可能感兴趣的文章: