样式可控的左右选择组件

先看基本效果图：

因为是使用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

样式可控的左右选择组件

推荐阅读