<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>

　　

分享一个jquery实现的双向选择组件的更多相关文章

  1. 利用jmSlip写一个移动端顶部日历选择组件

    可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...

  2. 分享一个jQuery动态网格布局插件：Masonry(转)

    在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...

  3. 分享一个jquery插件,弥补一下hover事件的小小不足

    hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...

  4. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  5. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  6. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  7. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

  8. 分享一个 jquery serializeArray()序列化方法

    http://www.365mini.com/page/jquery-serializearray.htm http://www.365mini.com/diy.php?f=jquery-serial ...

  9. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

随机推荐

  1. js thousand separator and change td content

    js thousand seprator and change TD content // integer function addCommas(n){ })/; return String(n).r ...

  2. CDH5.14操作指南

    1.Cdh 5.14介绍 2.版本发布概要 3.安装要求 4.Cloudera Manager介绍 5.Cloudera 安装 6.Cloudera 管理 7.Cloudera Navigator C ...

  3. PL/SQL Developer 关闭Sql窗口快捷键

    preferences->keyconfigration->file/close然后设置你喜欢的按键就行了.(ps:这个close是关闭当前活动的那一个页面)

  4. javascript--记忆函数

    function memory(val) { if(!memory.cached) {//判断是否创建了缓存 memory.cached = {}; } if(memory.cached[val] ! ...

  5. bzoj1612 Usaco08 Jan 牛大赛

    水题模拟 建一个图,每两个牛进行比赛就连一条边,然后两遍dfs求出比他弱和比他强的牛,最后如果相加数量等于n,说明他能与全部的牛进行比较,排名确定. #include<bits/stdc++.h ...

  6. Linux中常用命令（文件与目录）

    1.pwd 查看当前目录(Print Working Directory) 2.cd 切换工作目录(Change Directory) (1)格式:cd [目录位置] 特殊目录: .当前目录 ..上一 ...

  7. python学习---【__all__】

    python包中都会有一个__init__.py的模块,这个模块是区分该父文件是一个python包,或是一个文件目录.这个__init__.py可以是空,也可以添加内容,最常见的就是其中的__all_ ...

  8. ECNUOJ 2573 Hub Connection plan

    Hub Connection plan Time Limit:1000MS Memory Limit:65536KB Total Submit:743 Accepted:180 Description ...

  9. LocalDateTime在spring boot中的格式化配置

    在项目中日期格式化是最常见的问题,之前涉及的 java.util.Date 和 java.util.Calendar 类易用性差,不支持时区,非线程安全,对日期的计算方式繁琐,而且容易出错,因为月份是 ...

  10. 关于Github Pages

    迁移Github Pages 我稍微有一点强迫症,实在是忍受不了整洁的界面有一些推广的广告.正所谓博客平台不重要,重要的是要有干货,CSDN首页满屏的广告也就忍受了,但是自己的文章的页面有广告看着实在 ...