1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div class="selection-container"><div class="select-box left"> <div class="select-box-title">未选择 - 告警规则 <input type="checkbox" class="checkbox-all" /> </div> <div class="select-content"> <ul class="unselect-ul"> <li> <input type="checkbox" class="checkboxs" /> <span>磁盘使用率普通告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>磁盘使用率严重告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>内存使用率普通告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>内存使用率严重告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>CPU使用率普通告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>CPU使用率严重告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>设备故障告警</span> </li> <li> <input type="checkbox" class="checkboxs" /> <span>维护到期告警</span> </li> </ul> </div></div><div class="arrows-box"> <div class="arrow-btns"> <div class="arrow-btn right"><i></i></div> <div class="arrow-btn left"><i></i></div> </div></div><div class="select-box right"> <div class="select-box-title">已选择 - 告警规则 <input type="checkbox" class="checkbox-all" /> </div> <div class="select-content"> <ul class="selected-ul"> </ul> </div></div></div>
4、书写css代码。<style type="text/css">* { padding: 0; margin: 0; }li { list-style: none; cursor: pointer; }.selection-container { height: 350px; margin: 10px; }.select-box { width: 250px; height: 100%; border: 1px solid #ccc; float: left; }.arrows-box { width: 50px; height: 100%; float: left; position: relative; }.select-content { width: 100%; height: 320px; overflow-y: auto; overflow-x: hidden; }.select-box-title { width: 90%; height: 30px; line-height: 30px; font-size: 12px; font-family: "微软雅黑"; padding: 0 5%; border-bottom: 1px solid #ccc; }.select-box-title input { margin: 8px 0; }.checkbox-all { float: right; }.checkboxs { vertical-align: middle; }.unselect-ul { padding: 10px 0; }.select-content li { padding: 5px 15px; font-size: 12px; font-family: "微软雅黑"; }.arrow-btns { width: 100%; height: 90px; position: absolute; top: 50%; margin-top: -45px; }.arrow-btn { width: 20px; height: 12px; padding: 18px 10px; background: #eee; border: 1px solid #ccc; margin: 0 auto 5px; cursor: pointer; }.arrow-btn i { display: inline-block; width: 100%; height: 100%; background: url("images/arrow-left.png") no-repeat center center; }.arrow-btn.right i { background: url("images/arrow-right.png") no-repeat center center; }</style>
5、书写并添加js代码。<script src="js/jquery-1.11.1.min.js" ></script><script> $(function(){ //全选函数 $('.checkbox-all').click(function(){ if($(this).prop('checked')){ $(this).parent().next().find('.checkboxs').prop('checked',true); }else{ $(this).parent().next().find('.checkboxs').prop('checked',false); } }) //单个checkbox与全选的关系函数 $('.select-content').on('click','.checkboxs',function(e){ var checkedAll = $(this).parents('.select-content').prev().find('.checkbox-all'); var checkboxs = $(this).prop('checked'); if(!checkboxs&&checkedAll.prop('checked')){ checkedAll.prop('checked',false); }else if(checkboxs&&!checkedAll.prop('checked')){ var lis = $(this).parents('ul').children(); for(var i=0;i<lis.length;i++){ if($(lis[i]).find('.checkboxs').prop('checked')){ if(i==lis.length-1){ checkedAll.prop('checked',true) } }else{ break; } } } stopFunc(e); }); $('.select-content').on('click','li',function(){ $(this).children('.checkboxs').click(); }) //左右移按钮点击事件 $('.arrow-btn').click(function(){ var checkboxs,origin,target,num=0; if($(this).hasClass('right')){ origin = $('.unselect-ul'); target = $('.selected-ul'); }else{ origin = $('.selected-ul'); target = $('.unselect-ul'); } checkboxs = origin.find('.checkboxs'); for(var i=0;i<checkboxs.length;i++){ if($(checkboxs[i]).prop('checked')){ var that = $(checkboxs[i]).parent().clone(); that.children('input').prop('checked',false); target.append(that); $(checkboxs[i]).parent().remove(); }else{ num++; } } if(checkboxs.length == num){ alert('未选中任何告警规则！'); }else{ origin.parent().prev().find('.checkbox-all').prop('checked',false); } }) }) function stopFunc(e){ e.stopPropagation?e.stopPropagation():e.cancelBubble=true; }</script>
6、代码整体结构。
7、查看效果。
