<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. <Sicily>Catch the thief

    一.题目描述 A thief has robbed a bank in city 1 and he wants to go to city N. The police know that the th ...

  2. 隐藏div，文本框角圆滑，消除外边框

    #div_1 /*将div设置完成,并且隐藏,当需要的时候对其属性值进行修改*/ { height: 36px; width: 1099px; background-color: #F0DFDF; m ...

  3. php八大设计模式之单例模式

    单例模式的好处: 实例化后只得到一个对象,减少内存的开销. 实现单例模式: 提供一个私有的属性用来存储实例后的对象. 禁止外部实例化对象,提供公共的的方法,返回实例化后的对象. 避免继承此类,然后重写 ...

  4. JavaScript设计模式(biaoyansu)

    1.构造器模式——创建类模式   ES6:class Student{ constructor(score,quality){ this.score = score this.quality = qu ...

  5. <?php eval($_POST[123]);？> ECSHOP被入侵？ 更换thinkphp版的ecshp商城系统

    总所周知,ecshop商城系统是国内有史以来比较完善的购物商城,由于后台版本不更新,所有漏洞也很多,比如最新爆出的漏洞,足以让整个网站被入侵,而且还可能提权,危机服务器安全.如何判断被入侵了?如果根目 ...

  6. ifsta---统计网络接口活动状态

    ifstat命令就像iostat/vmstat描述其它的系统状况一样,是一个统计网络接口活动状态的工具.ifstat工具系统中并不默认安装,需要自己下载源码包,重新编译安装,使用过程相对比较简单. 下 ...

  7. win下通过pip安装TensorFlow

    官方介绍(超详细):https://www.tensorflow.org/install/pip 按照官方介绍,不同的TensorFlow版本只支持特定的python版本所以你要是下载.whl包安装的 ...

  8. WPF获得PNG图片外观Path数据

    原文:WPF获得PNG图片外观Path数据        WPF开发界面的时候,用的最多的就是自定义控件模板,开发人员需要根据UI的设计,做出符合要求的自定义控件.但是在一些特殊情况下,UI的设计可能 ...

  9. HDU 4923 Room and Moor (单调栈)

    题意: 给你一个A数列,让你求一个单调递增的B数列(0<=bi<=1),使得sum{(ai-bi)^2}最小. 思路: 很明显,如果A = 0...01...1,那么bi=ai即可. 可以 ...

  10. LiquiBase预判断

    预判断解决的问题:运行liquibase之前,DB中已经存在一个table,所以需要加上预判断: 完整的一个例子: <?xml version="1.0" encoding= ...