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

2024-12-23 23:01:06

前段时间项目需要用到双向列表选择，想直接用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双向select控件Bootstrap Dual Listbox

本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <
jquery 列表双向选择器之改进版

记得之前发表过一篇<Jquery简单应用总结>,最后有一个自己做的列表双向选择器,感觉有点挫,昨天闲着没事改进了一下,把元素改成了select option这样就支持shift多选,代码量也精简了些. 我的双向选择器支持批量修改角色,支持关键字查询角色信息.下面奉上源码: html页面: 复制代码代码如下: <link href="@{'/public/stylesheets/ui-lightness/jquery-ui-1.9.1.custom.css'}" r
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
jQuery双向列表选择器DIV模拟版

前段时间项目需要用到双向列表选择,想直接用select,结果发现某些样式不支持,只好用div模拟了以下,功能基本实现能用了,需要其他功能自己加上,譬如列表里展示多列数据等. select版链接:http://www.cnblogs.com/tie123abc/p/6018912.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器DIV
jQuery双向列表选择器select版

在上篇文章给大家介绍了div模拟版链接:http://www.jb51.net/article/96211.htm,如果大家感兴趣可以参考下. 这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. <!doctype html> <html> <head> <meta charset="utf-8"> <title>双向列表选择器select版</title
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器

手机端网页版app在使用下拉列表时,传统的下拉列表使用起来体验非常不好,一般做的稍好一点的交互功能界面都不会直接使用下拉列表,所以app的原生下拉列表都是弹窗列表选择,网页型app从使用体验上来当然也应该做成那样,前段时间在开发网页版app时就遇到这种需求,不仅是日期选择器,数据列表.变量列表选择等等下拉列表型需求都需要,网上找来找去只找到一款比较好的mobiscroll,不过下载比较麻烦,感觉比较奇怪的是jquery.mobile.jeasyui.mobile都没有提供这种控件,不知道为什么?
jQuery四种选择器使用及示例

jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/
jQuery中:lt选择器用法实例

本文实例讲述了jQuery中:lt选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有小于给定索引值的元素. 索引值最小是从0开始的. 语法结构: 复制代码代码如下: $(":lt(index)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等. 例如: 复制代码代码如下: $("li:lt(3)").css("color","blue") 以上代码能够将索引小于3的li元素中的字体颜色
jQuery中:has选择器用法实例

本文实例讲述了jQuery中has选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配含有选择器所匹配的元素的元素. 语法结构: 复制代码代码如下: $(":has(selector)") 关于此选择器的定义可能有点拗口,通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素,那么此元素将被匹配.例如: 复制代码代码如下: $("div:has(p)") 以上选择器将匹配含有p元素的div元素. 此选择器一般也要和其他选择器配合使用,比如类
jQuery中element选择器用法实例

本文实例讲述了jQuery中element选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配具有指定标签名的元素.例如: 复制代码代码如下: $("div") 以上代码能够选取所有的div元素. 语法结构: 复制代码代码如下: $(element) 参数列表: 参数描述 element 一个用于搜索的元素.指向DOM节点的标签名. 实例代码: 复制代码代码如下: <!DOCTYPE HTML> <html> <head> &l
jQuery中:gt选择器用法实例

本文实例讲述了jQuery中:gt选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有索引值大于给定索引值的元素. 索引值最小是从0开始的. 语法结构: 复制代码代码如下: $(":gt(index)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码代码如下: $("li:gt(0)").css("color","blue") 以上代码能够将索引大于0的li元素中的字体
jQuery中:eq()选择器用法实例

本文实例讲述了jQuery中:eq()选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配一个给定索引值的元素. 元素的位置索引从0算起. 语法结构: 复制代码代码如下: $(":eq(index)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码代码如下: $("li:eq(1)").css("color","green") 以上代码是将li元素集合中索引为1(也就是第二
jQuery中:not选择器用法实例

本文实例讲述了jQuery中not选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够移除元素集合中与给定选择器匹配的元素. 语法结构: 复制代码代码如下: $(":not(selector)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码代码如下: $("li:not(.second)").css("color","green") 以上代码是将li元素集合中,类名不为s

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

相关推荐

随机推荐