Controllable style selection components, controllable style selection components

Controllable style selection components, controllable style selection components

First look at the basics:

Because it is implemented using div + css, you can change the style as needed ~~

The following describes the implementation process:

1. Define the HTML Structure

 

<Div class = "selection"> <! -- Control button --> <div class = "mid-box"> <div style = "padding-top: 89px;"> <a href = "javascript: void (0 ); "class =" moveAllToLeft "onclick =" moveAllToLeft (); "> all left </a> <a href =" javascript: void (0 ); "class =" moveToLeft "onclick =" moveToLeft (); "> left </a> <a href =" javascript: void (0 ); "class =" moveToRight "onclick =" moveToRight (); "> right </a> <a href =" javascript: void (0 ); "class =" moveAllToRight "onclick =" moveAllToRight (); "> All Right </a> </div> <! -- Left --> <div class = "left-box"> 
It should be clear at a glance.
2. Let's take a look at the CSS style section.
            .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");        }
 
From the definition of Class, you can basically understand the functions of each function.
Attached execution file address: http://www.zhaojz.com.cn/demo/select.html