/**
* 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;
}
名称