您的位置：首页 > Web前端 > JQuery

分享一个jquery实现的双向选择组件

2016-12-26 16:10 543 查看

<html><head>
<meta charset="utf-8">
<title>数据删选组件</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
html,body{width: 100%;height: 100%;font-family: "微软雅黑";background: #b1b1b1;}
ul,li{list-style: none;}
.container{
width:560px;
height: 400px;
padding: 40px 20px;
background: #fff;
border-radius: 4px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -280px;
margin-top: -200px;
}
.container ul.data-list{width: 40%;height: 100%;border: 1px solid #e5e5e5;float: left;}
.container ul.data-list li{line-height: 32px;padding: 0px 10px;}
.container ul.data-list li:hover{ background-color: #C5EFFF; color: #252525; cursor: pointer; font-weight: bold; }
.container ul.data-list li.selected{ background-color: #0095E8; color: #fff; }
.button-box{float: left;width: 19%;height: 50%;margin-top: 20%;}
.button-box button{
background: none;
font-size: 16px;
border: 1px solid #818181;
color: #359bf5;height: 36px;
line-height: 36px;width: 80%;
margin: 10px auto;
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">

<ul class="data-list" id="lList">
<li>第一行选择文字1</li>
<li>第二行选择文字2</li>
<li>第三行选择文字3</li>
<li>第四行选择文字4</li>
<li>第五行选择文字5</li>
<li>第六行选择文字6</li>
<li>第一行选择文字7</li>
<li>第二行选择文字8</li>
</ul>

<div class="button-box">
<button type="button" name="button" id="add">添 加</button>
<button type="button" name="button" id="remove">删 除</button>
</div>
<ul class="data-list" id="rList">

</ul>

</div>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var lList = $("#lList");
var llList = document.getElementById("lList");
var rList = $("#rList");
var items = $(".data-list li");
for(var i = 0;i<items.length;i++){
items[i].onclick = itemsclick;
items[i].ondblclick = itemsdblclick;
}
function itemsdblclick(){
if (this.parentNode === llList) {
rList.append(this);
}else{
lList.append(this);
}
}
function itemsclick(){
var classname = this.className;
if(classname === "selected"){
this.className = "";
}else{
this.className="selected";
}
}
function itemsMove(){
var items = $(".data-list li.selected");
for(var i = 0;i<items.length;i++){
if(this.id === "add"){
rList.append(items[i]);
}else{
lList.append(items[i]);
}
}
}
$("#add").on("click",itemsMove);
$("#remove").on("click",itemsMove);
});

</script>

</body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航