首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery双向列表选择器DIV模拟版

Posted in Javascript onNovember 01, 2016

jQuery双向列表选择器DIV模拟版

前段时间项目需要用到双向列表选择，想直接用select，结果发现某些样式不支持，只好用div模拟了以下，功能基本实现能用了，需要其他功能自己加上，譬如列表里展示多列数据等。

select版链接：http://www.cnblogs.com/tie123abc/p/6018912.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双向列表选择器DIV模拟</title>
<script type="text/javascript" src="../public/jquery-1.8.2.js"></script>
<script type="text/javascript">
/**
* two_way_list_selector.js - v1.0.0 (2016/7/26)
*
* Allows you to easily page layout!
* by tie. qq：2185987263
*
* Copyright (C) 2016, tie.
* All rights reserved.
*
**/
var two_way_list_selector=function(o){
var obj=o;
var btn_a=o.find(".btn_a");
var btn_b=o.find(".btn_b");
var btn_c=o.find(".btn_remove_all");
var btn_d=o.find(".btn_add_all");
var select_a=o.find(".select_a");
var select_b=o.find(".select_b");
//是否按下了shift
var is_shift=false;
//是否按下了ctrl
var is_ctrl=false;
document.addEventListener("keydown",function(e){
is_shift=e.shiftKey;
is_ctrl=e.ctrlKey;
},false);
document.addEventListener("keyup",function(e){
is_shift = is_ctrl = false;
},false);
//进行排序
var option_sort=function(o){
o.html(o.find("div").toArray().sort(function(a, b){
return parseInt($(a).attr("data-index")) - parseInt($(b).attr("data-index"));
}));
obj.find(".item").removeClass("is_select");
obj.find(".item").unbind("dblclick").dblclick(function(){
_dblclick($(this));
});
obj.find(".item").unbind("click").click(function(){
_click($(this));
});
}
//在列表中双击时
var _dblclick=function(o){
var flag = o.parent().attr("class");
var a ;
if(flag == "select_a"){
a = o.clone(true);
select_b.append(a);
o.remove();
option_sort(select_b);
} else {
a = o.clone(true);
select_a.append(a);
o.remove();
option_sort(select_a);
}
}
//在列表中单击时
var temp_index=0;
var _click=function(o){
var flag=o.parent().attr("class");
if(is_shift){
var this_index=o.index();
if(temp_index!=this_index){
obj.find("."+flag+" .item").each(function(index, element) {
if(this_index>temp_index && index<this_index && index>=temp_index){
$(this).addClass("is_select");
}
if(this_index<temp_index && index>this_index && index<=temp_index){
$(this).addClass("is_select");
}
});
}
}
if(!is_ctrl && !is_shift){
obj.find("."+flag+" .item").each(function() {
$(this).removeClass("is_select");
});
}
if(o.hasClass("is_select")){
o.removeClass("is_select");
}else{
o.addClass("is_select");
}
temp_index=o.index();
}
//选项单击时
obj.find(".item").click(function(){
_click($(this));
});
//选项双击时
obj.find(".item").dblclick(function(){
_dblclick($(this));
});
//加入选中
btn_a.click(function(){
var a = select_a.find(".is_select").clone(true);
if(a.size() == 0){
return false;
}
select_b.append(a);
select_a.find(".is_select").remove();
option_sort(select_b);
});
//删除选中
btn_b.click(function(){
var a = select_b.find(".is_select").clone(true);
if(a.size() == 0){
return false;
}
select_a.append(a);
select_b.find(".is_select").remove();
option_sort(select_a);
});
//删除全部
btn_c.click(function(){
select_a.append(select_b.find("div"));
option_sort(select_a);
});
//加入全部
btn_d.click(function(){
select_b.append(select_a.find("div"));
option_sort(select_b);
});
}
//页面加载完毕后
$(document).ready(function(e) {
two_way_list_selector($("#two_way_list_selector_a"));
two_way_list_selector($("#two_way_list_selector_b"));
});
</script>
<style type="text/css">
@charset "utf-8";
.two_way_list_selector {
width: 100%;
height: 250px;
}
.two_way_list_selector .select_l, .two_way_list_selector .select_r {
width: 40%;
height: 250px;
float: left;
border: 1px solid #CCC;
}
.two_way_list_selector .select_l .option {
height: 29px;
line-height: 29px;
border-bottom: 1px solid #ddd;
}
.two_way_list_selector .select_l .option .l {
width: 30%;
float: left;
text-indent: 10px;
}
.two_way_list_selector .select_l .option .r {
width: 70%;
float: right;
text-align: center;
}
.two_way_list_selector .select_l .select_a, .two_way_list_selector .select_r .select_b {
width: 100%;
height: 220px;
overflow: auto;
}
.two_way_list_selector .select_r .select_b {
height: 250px;
}
.two_way_list_selector .select_l .select_a div, .two_way_list_selector .select_r .select_b div {
padding: 10px;
height: 25px;
line-height: 25px;
border-bottom: 1px solid #ddd;
background: #FFF;
}
.two_way_list_selector .select_l .select_a div:last-child, .two_way_list_selector .select_r .select_b div:last-child {
border-bottom: none;
}
.two_way_list_selector .select_btn {
width: 10%;
height: 250px;
float: left;
display: table;
text-align: center;
}
.two_way_list_selector .select_btn div {
height: 250px;
display: table-cell;
vertical-align: middle;
}
.two_way_list_selector .select_btn div input {
width: 90%;
margin: 1px;
text-align: center;
font-weight: 100;
color: #999;
}
.two_way_list_selector .select_l .select_a .is_select, .two_way_list_selector .select_r .select_b .is_select {
color: #FFF;
background: #3399FF;
}
</style>
</head>
<body>
<div id="two_way_list_selector_a" class="two_way_list_selector margin_top_10">
<div class="select_l">
<div class="option">
<div class="l">名称</div>
<div class="r"><a>数量</a></div>
</div>
<div class="select_a">
<div data-value="1" data-index="0" class="item">1</div>
<div data-value="2" data-index="1" class="item">2</div>
<div data-value="3" data-index="2" class="item">3</div>
<div data-value="4" data-index="3" class="item">4</div>
<div data-value="5" data-index="4" class="item">5</div>
<div data-value="6" data-index="5" class="item">6</div>
<div data-value="7" data-index="6" class="item">7</div>
</div>
</div>
<div class="select_btn">
<div>
<input type="button" value=">" class="button btn_a">
<input type="button" value=">>" class="button btn_add_all">
<input type="button" value="<<" class="button btn_remove_all">
<input type="button" value="<" class="button btn_b">
</div>
</div>
<div class="select_r">
<div class="select_b"></div>
</div>
</div>
<br>
<div id="two_way_list_selector_b" class="two_way_list_selector margin_top_10">
<div class="select_l">
<div class="option">
<div class="l">名称</div>
<div class="r"><a>数量</a></div>
</div>
<div class="select_a">
<div data-value="a" data-index="0" class="item">a</div>
<div data-value="b" data-index="1" class="item">b</div>
<div data-value="c" data-index="2" class="item">c</div>
<div data-value="d" data-index="3" class="item">d</div>
<div data-value="e" data-index="4" class="item">e</div>
<div data-value="f" data-index="5" class="item">f</div>
<div data-value="g" data-index="6" class="item">g</div>
</div>
</div>
<div class="select_btn">
<div>
<input type="button" value=">" class="button btn_a">
<input type="button" value=">>" class="button btn_add_all">
<input type="button" value="<<" class="button btn_remove_all">
<input type="button" value="<" class="button btn_b">
</div>
</div>
<div class="select_r">
<div class="select_b"></div>
</div>
</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery双向列表选择器DIV模拟版，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

jQuery双向列表选择器DIV模拟版

- Author -

你好像很美味

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
函数式 JavaScript（一）简介
Jul 07 Javascript
javascript的push使用指南
Dec 05 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
Javascript中的 “&amp;” 和 “|” 详解
Feb 02 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vuex 的简单使用
Mar 22 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 #Javascript
javascript 内置对象及常见API详细介绍
Nov 01 #Javascript
Vue.js组件使用开发实例教程
Nov 01 #Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 #Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 #Javascript
Stater(1) csgo(1) sock(2) XPathParser(1) CAD(1) 403(1) macos(1) protocol(1) 404(1) xps(1)
You might like
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
js读取本地excel文档数据的代码
2010/11/11 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript 回调函数详解
2014/11/11 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
js为什么不能正确处理小数运算？
2015/12/29 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
python的中异常处理机制
2018/08/30 Python
python获取中文字符串长度的方法
2018/11/14 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python实现图片识别加翻译功能
2019/12/26 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Keras loss函数剖析
2020/07/06 Python
python3 re返回形式总结
2020/11/20 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
中专生自我鉴定书范文
2013/12/28 职场文书
校园文明倡议书
2014/05/16 职场文书
留学生求职信
2014/06/03 职场文书
文体活动总结
2015/02/04 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书