HTML编程 双向列表,jquery双向列表选择器DIV模拟版(示例代码)

双向列表选择器DIV模拟

/**

* 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.

*

**/

vartwo_way_list_selector=function(o){varobj=o;varbtn_a=o.find(".btn_a");varbtn_b=o.find(".btn_b");varbtn_c=o.find(".btn_remove_all");varbtn_d=o.find(".btn_add_all");varselect_a=o.find(".select_a");varselect_b=o.find(".select_b");//是否按下了shift

varis_shift=false;//是否按下了ctrl

varis_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);//进行排序

varoption_sort=function(o){

o.html(o.find("div").toArray().sort(function(a, b){returnparseInt($(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){varflag=o.parent().attr("class");vara ;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);

}

}//在列表中单击时

vartemp_index=0;var_click=function(o){varflag=o.parent().attr("class");if(is_shift){varthis_index=o.index();if(temp_index!=this_index){

obj.find("."+flag+".item").each(function(index, element) {if(this_index>temp_index&&index=temp_index){

$(this).addClass("is_select");

}if(this_indexthis_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(){vara=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(){vara=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"));

});

@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;

}

名称