首页
所有分类
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使用prototype定义对象类型(转)[
Dec 22 Javascript
强大的jquery插件jqeuryUI做网页对话框效果！简单
Apr 14 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
jQuery实现遍历复选框的方法示例
Mar 06 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
全表扫描(1) 逻辑备份(1) 相对定位(1) lua(3) sql模式(1) into outfile(1) 异步机制(1) geoserver(1) 匹配(1) 索引树扫描(1)
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
php Undefined index的问题
2009/06/01 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python实现电脑自动关机
2018/06/20 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python 项目转化为so文件实例
2019/12/23 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
单位在职证明范本
2014/01/09 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
老公保证书范文
2014/04/29 职场文书
基层工作经验证明样本
2014/11/16 职场文书
巴黎圣母院观后感
2015/06/10 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
运动会致辞稿
2015/07/29 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis