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双向列表选择器select版
这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. div模拟版链接:http://www.cnblogs.com/tie123abc ...
jQuery实现列表框双向选择操作
对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...
jquery用div模拟一个下拉列表框
原文 jquery用div模拟一个下拉列表框今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...
jQuery使用（一）：jQuery对象与选择器
一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...
用jquery写循环播放div -2
前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace" 在 ...
用jquery写循环播放div的相关笔记珍贵的总结 -1
用jquery写循环播放div line-height应用的元素的层次? line-heig字ht, 叫行高, 仅仅是指文/文本, 而不管图片. line-height是容器中文本行与文本行 ...
JQuery————基础&&基础选择器
环境搭建搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
JQuery的可见性选择器
1. <div id="test" style="width:400px;height:200; background:#0000ff;display:block; ...

随机推荐

扑面而来的碎片--图片3D炸裂效果初体验
之前逛园子的时候看到 ChokCoco 的爆炸效果作品:[BOOM]一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←),觉得蛮有意思的,效果如下: 不过觉得这个爆炸效果还是偏软了一 ...
C#与C++的发展历程第二 - C#4.0再接再厉
系列文章目录 1. C#与C++的发展历程第一 - 由C#3.0起 2. C#与C++的发展历程第二 - C#4.0再接再厉开始本系列的第二篇,这篇文章中将介绍C#4.0中一些变化,如C++有类似功 ...
.NET基础拾遗（6）ADO.NET与数据库开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开发基 ...
ASP.NET Web API Model-ModelMetadata
ASP.NET Web API Model-ModelMetadata 前言前面的几个篇幅主要围绕控制器的执行过程,奈何执行过程中包含的知识点太庞大了,只能一部分一部分的去讲解,在上两篇中我们看到在 ...
[Javascript] 爬虫模拟新浪微博登陆
概述: 由于业务需要,要编写爬虫代码去爬去新浪微博用户的信息. 虽然在网上能找到不少信息,但由于新浪微博改版,其登陆机制进行了修改,故很多老的文章就不适合用了. 经过一番摸索,成功模拟新浪微博的登陆 ...
out和ref详解
要想充分理解C# out和ref,必须先明确如下两个概念(对值类型与引用类型掌握比较好的,可以跳过"一.明确两个基本概念") 一.明确两个基本概念值类型: 定义:通过值的方式来传 ...
C#设计模式-状态者模式
一. 状态者(State)模式每个对象都有其对应的状态,而每个状态又对应一些相应的行为,如果某个对象有多个状态时,那么就会对应很多的行为.那么对这些状态的判断和根据状态完成的行为,就会导致多重条件语 ...
SubSonic3.0使用存储过程查询时，不能使用output参数返回值的问题修改
有个群友问SubSonic3.0执行存储过程时能不能使用output参数返回值,说测试过后获取不到返回值,早上有些时间所以就尝试修改了一下首先在数据库中创建一个存储过程 CREATE PROCEDU ...
TortoiseGIT创建及合并分支
一.创建分支项目右键 => TortoiseGit(T) => 创建分支,然后右键切换到刚刚创建的分支,新增/修改一个文件,提交分支到远端服务器,推送成功之后分支就创建好了. 二.合并分 ...
总结个关于MySQL数据库的问题
问题概括:MySQL Server has gone away? 遇到这个问题还得追溯到这次前往南通软件园出差.当天下午下班之前,主管说可能明天出差,把项目和最新的数据库备份一下,备份完成之后,也没在 ...

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

jquery双向列表选择器DIV模拟版的更多相关文章

随机推荐

热门专题