分享一个jquery实现的双向选择组件
<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实现的双向选择组件的更多相关文章
- 利用jmSlip写一个移动端顶部日历选择组件
可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...
- 分享一个jQuery动态网格布局插件:Masonry(转)
在线演示 Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排 ...
- 分享一个jquery插件,弥补一下hover事件的小小不足
hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...
- 分享一个JQuery弹出层插件
JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...
- 给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)
需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...
- 分享一个 jquery serializeArray()序列化方法
http://www.365mini.com/page/jquery-serializearray.htm http://www.365mini.com/diy.php?f=jquery-serial ...
- jQuery实现列表框双向选择操作
对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...
随机推荐
- 关于Mantle使用个人的一些见解
前一个月,我接触到了Mantle,由于项目采用的是MVC的设计模式,选用好的model也是至关重要的.先介绍下Mantle的使用吧. 首先定义好数据模型: @property (nonatomic, ...
- 排序算法(Apex 语言)
/* Code function : 冒泡排序算法 冒泡排序的优点:每进行一趟排序,就会少比较一次,因为每进行一趟排序都会找出一个较大值 时间复杂度:O(n*n) 空间复杂度:1 */ List< ...
- 设置多行文本框不能拓展大小和span标签边框设置
resize: none;/*设置多行文本框,不能拓展大小*/ #span { display: block; border: 1px solid RGB(169,169,169); /* span标 ...
- Git学习笔记 2,GitHub常用命令
廖雪峰Git教程 莫烦Git教程 莫烦Git视频教程 文件三个状态,add之后从工作区(原始状态)到暂存区,commit之后从暂存区到版本库 工作区 暂存区 版本库 unstage stage mas ...
- Configure Tomcat 7 to run Python CGI scripts in windows(Win7系统配置tomcat服务器,使用python进行cgi编程)
Pre-installation requirements1. Java2. Python steps1. Download latest version of Tomcat (Tomcat 7) f ...
- [WC2011]最大XOR和路径(线性基)
P4151 [WC2011]最大XOR和路径 题目描述 XOR(异或)是一种二元逻辑运算,其运算结果当且仅当两个输入的布尔值不相等时才为真,否则为假. XOR 运算的真值表如下( 1 表示真, 0 表 ...
- Fans同学已死,终年24岁
亲爱的同学们,朋友们,QQ好友. 告诉大家一个悲剧:Fans同学已死,终年24岁. 马甲变迁 正式告诉大家一个消息,我的ID"Fans同学"正在退出"历史舞台" ...
- ArcGIS api for javascript——地图配置-
描述 本例展示了如果删除缩放等级滑动器的刻度线.通过设置esriConfig里的sliderLabel为null来实现: esriConfig.defaults.map.sliderLabel = n ...
- [Python] Pandas load DataFrames
Create an empty Data frame with date index: import pandas as pd def test_run(): start_date='2017-11- ...
- 封装html代码块到js函数中
有时候想把公共的html封装起来,怎么处理呢? 好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理. 那就用js来重构html吧. 代码案例如下: <footer class= ...