首页 > 代码库 > 样式可控的左右选择组件
样式可控的左右选择组件
先看基本效果图：
因为是使用div+css来实现，所以样式随便改~~
下面就来大概说明一下实现过程：
1、定义HTML的结构
<div class="selection"> <!-- 控制按钮 --> <div class="mid-box"> <div style="padding-top: 89px;"> <a href="javascript: void(0);" class="moveAllToLeft" onclick="moveAllToLeft();">全左</a> <a href="javascript: void(0);" class="moveToLeft" onclick="moveToLeft();">向左</a> <a href="javascript: void(0);" class="moveToRight" onclick="moveToRight();">向右</a> <a href="javascript: void(0);" class="moveAllToRight" onclick="moveAllToRight();">全右</a> </div> </div> <!-- 左侧 --> <div class="left-box"> <h3>待选列表</h3> <ul id="left-select"> <li>张三</li> <li>李四</li> <li>王五</li> </ul> </div> <!-- 右侧 --> <div class="right-box"> <h3>已选列表</h3> <ul id="right-select"> <li>赵六</li> <li>郭八</li> </ul> </div> </div>
应该是一目了然吧。
2、来看看CSS样式部分
.selection{ width: 686px; position: relative; } .selection .left-box{ background-color: #FFDEAD; height: 320px; width: 300px; position: absolute; left: 0; overflow: auto; } .selection .right-box{ background-color: yellow; height: 320px; width: 300px; position: absolute; right: 0; overflow: auto; } .selection .mid-box{ background-color: orange; height: 320px; width: 70px; position: absolute; left: 308px; } #left-select, #right-select{ overflow: auto; list-style-type: none; } .selection ul{ padding: 0 15px; margin:15px 0; } .selection ul li{ height: 27px; line-height: 27px; margin: 2px 0; padding-left: 15px; cursor: pointer; background-color: orange; } .selected{ background-color: black; } .selection .mid-box a{ display: block; font-size: 16px; text-align: center; margin-top: 10px; font-weight: bold; } .selection h3{ background-color: #DC143C; margin: 0; padding: 10px 5px; color: white; }
3、Javascript（jQuery）部分
$(function(){ $(".selection ul li").live("click", function(){ if($(this).hasClass("selected")){ $(this).removeClass("selected").css("background-color","orange"); }else{ $(this).addClass("selected").css("background-color","white"); } }); $(".selection .moveToRight").click(function(){ var $lSeleted = $(".left-box .selected"); if($lSeleted.length > 0){ $("#right-select").append($lSeleted.remove()); resetBgColor("right-select"); } }); $(".selection .moveAllToRight").click(function(){ var $lAllSeleted = $(".left-box li"); if($lAllSeleted.length > 0){ $("#right-select").append($lAllSeleted.remove()); resetBgColor("right-select"); } }); $(".selection .moveAllToLeft").click(function(){ var $rAllSeleted = $(".right-box li"); if($rAllSeleted.length > 0){ $("#left-select").append($rAllSeleted.remove()); resetBgColor("left-select"); } }); $(".selection .moveToLeft").click(function(){ var $rSeleted = $(".right-box .selected"); if($rSeleted.length > 0){ $("#left-select").append($rSeleted.remove()); resetBgColor("left-select"); } }); }) function resetBgColor(leftOrRight){ $("#"+leftOrRight+" li").removeClass("selected").css("background-color","orange"); }
从Class的定义上基本可以了解各函数的功能。
附上执行档地址：http://www.zhaojz.com.cn/demo/select.html
样式可控的左右选择组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。