分享一个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好 ...
随机推荐
- Linux FTP客户端
1.File Zilla File Zilla是一个开源的,跨平台的Linux FTP客户端.File Zilla有一个标签式的用户界面,允许用户查看正在传输的文件的所有细节.File Zilla是通 ...
- Percona Monitoring and Management (PMM)安装使用
一.docker安装 参考:http://www.cnblogs.com/liuyongsheng/articles/6595353.html 二.Percona Monitoring and Man ...
- python常用函数库收集。
学习过Python都知道python中有很多库.python本身就是万能胶水,众多强大的库/模块正是它的优势. 收集一些Python常用的函数库,方便大家选择要学习的库,也方便自己学习收集,熟悉运用好 ...
- 第一章、zabbix安装
前言: 注意:本文不涉及性能测试.性能优化中的监控,所有文字的出发点都是日常运维监控. 在开始之前,我们还是先统一下认识:要监控一个对象,需要掌握哪些东西呢? 监控对象的理解:要监控的对象你是否了解呢 ...
- Chrome发布73 beta版:增强Linux用户体验
Google开发者周五推动Chrome 73进入他们的测试频道,因为他们准备在3月12日左右推出这款网页浏览器更新,以便稳定推出.除非另有说明,否则下面描述的更改适用于Android,Chrome O ...
- Python爬虫基础示例
使用pip安装相关依赖: pip install requests pip install bs4 安装成功提示:Successfully installed *... 爬取中国天气网数据示例代码: ...
- mesg---设置当前终端的写权限
mesg命令用于设置当前终端的写权限,即是否让其他用户向本终端发信息.将mesg设置y时,其他用户可利用write命令将信息直接显示在您的屏幕上. 语法 mesg(参数) 参数 y/n:y表示运行向当 ...
- 紫书 习题 10-14 UVa 10886(暴力+数据范围)
开始的时候一看这题感觉很难,觉得肯定有什么很快的办法 不能暴力做(受了上一题10-13的影响) 然后一看那个函数感觉无从下手. 然后看了博客发现,原来这道题就是直接暴力-- 因为n的范围为10的7次方 ...
- [NOIP1999]进制位(搜索)
P1013 进制位 题目描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: + L K V E L L K V E K K V E KL V V E ...
- JVM调优系列:(四)GC垃圾回收
跟踪收集算法: 复制(copying): 将堆内分成两个同样空间,从根(ThreadLocal的对象.静态对象)開始訪问每个关联的活跃对象,将空间A的活跃对象所有拷贝到空间B,然后一次性回收整个空间A ...