Style controllable left and right selection components_html/css_WEB-ITnose

Let’s take a look at the basic renderings first:

Because it is implemented using div css, the style can be changed at will~~

Here comes the following Briefly explain the implementation process:

1. Define the structure of 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>

It should be clear at a glance.

2. Let’s take a look at the CSS style part

            .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) part

       $(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");        }

From the definition of Class, we can basically understand the functions of each function.

Attached is the executable file address: http://www.zhaojz.com.cn/demo/select.html