样式可控的左右选择组件_html/css_WEB-ITnose

先看基本效果图：

因为是使用div+css来实现，所以样式随便改~~

下面就来大概说明一下实现过程：

1、定义HTML的结构

        
                        
                
                    全左                    向左                    向右                    全右                                    
            
                        
                
待选列表
                

张三
                    
李四
                    
王五
                
                        
                
已选列表
                

赵六
                    
郭八
                
        

应该是一目了然吧。

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