Moving Items（jQuery扩展）

haiyupeter

浏览: 427611 次
性别:
来自: 广州

最近访客更多访客>>

chenyanfei

Jaakko

justplayoop1

zhaobin87

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery JavaScript CSS HTML

        列表移动例子，对比过网上的很多实例，当前组件突出的特点是：页面尽可能简单，代码量少。
        代码moveingItems方法，返回this实例，该对象不支持jQuery的连写操作，只能当对象使用，作为jQuery的控件来说，这种直接操作对象的方法是较流行的写法。
        控件示意图：

(function($){
    $.extend($.fn, {
        // 生成随机UUID数，用于唯一标识节点
        randomUUID : function () {
          var s = [], itoh = '0123456789ABCDEF';
        
          // Make array of random hex digits. The UUID only has 32 digits in it, but we
          // allocate an extra items to make room for the '-'s we'll be inserting.
          for (var i = 0; i < 36; i++) s[i] = Math.floor(Math.random()*0x10);
        
          // Conform to RFC-4122, section 4.4
          s[14] = 4;  // Set 4 high bits of time_high field to version
          s[19] = (s[19] & 0x3) | 0x8;  // Specify 2 high bits of clock sequence
        
          // Convert to hex chars
          for (var i = 0; i < 36; i++) s[i] = itoh[s[i]];
        
          // Insert '-'s
          s[8] = s[13] = s[18] = s[23] = '-';
        
          return s.join('');
        },
        movingitems : function(settings) {
            /*---------------------------------------- attribute ----------------------------------------*/
            // leftitems, rightitems, id, leftListStyle, rightListStyle
            settings = $.extend(settings);
            
            function _getLeftList() {
                return $("#" + id + "_SelectLeft");
            }
            
            function _getRightList() {
                return $("#" + id + "_SelectRight");
            }
            /*---------------------------------------- api ----------------------------------------*/
            this.leftitems = function (datas) {
                var selectLeft = _getLeftList();
                if(typeof datas != 'undefined') {
                    selectLeft.empty();
                    $.each(datas, function(i, data){
                        var option = $("<option>")
                            .attr("value",data.id)
                            .append(data.label);
                        option.appendTo(selectLeft);
                    });
                    buildLeftListCss();
                    settings.leftItems = datas;
                }
                var selectedItems = selectLeft.children("option");
                var selectValues = [];
                $.each(selectedItems, function(i, selectedItem){
                    selectValues[i] = $(selectedItem).attr("value");
                });
                return selectValues.join(",");
            };
            
            this.rightitems = function (datas) {
                var selectRight = _getRightList();
                if(typeof datas != 'undefined') {
                    selectRight.empty();
                    $.each(datas, function(i, data){
                        var option = $("<option>")
                            .attr("value",data.id)
                            .append(data.label);
                        option.appendTo(selectRight);
                    });
                    buildRightListCss();
                    settings.rightItems = datas;
                }
                var selectedItems = selectRight.children("option");
                var selectValues = [];
                $.each(selectedItems, function(i, selectedItem){
                    selectValues[i] = $(selectedItem).attr("value");
                });
                return selectValues.join(",");
            };
            
            /*---------------------------------------- opt ----------------------------------------*/
            function _moveLeft(event) {
                _getRightList().children(":selected").remove();
                buildRightListCss();
            }
            
            function _moveLeftAll(event) {
                _getRightList().empty();
            }
            
            function _moveRight(event) {
                _move(_getLeftList().children(":selected"));
                buildRightListCss();
            }
            
            function _moveRightAll(event) {
                _move(_getLeftList().children());
                buildRightListCss();
            }
            
            function _move(selectedItems) {
                var selectRight = _getRightList();
                $.each(selectedItems, function(i, selectedItem) {
                    var isContained = false;
                    $.each(selectRight.children(), function(j,moveToItem){
                        if($(selectedItem).attr("value") == $(moveToItem).attr('value')) {
                            isContained = true;
                        }
                    });
                    if(!isContained) {
                        selectRight.append($("<option>")
                                .attr("value",($(selectedItem).attr("value")))
                                .append($(selectedItem).text())
                                );
                    }
                });
            }
            
            /*---------------------------------------- define the css ----------------------------------------*/
            function buildLeftListCss() {
                var selectLeft = _getLeftList();
                $(":even", selectLeft).css({"background-color":"#ffffff"});
                $(":odd", selectLeft).css({"background-color":"#e9f0f8"});
            }
            function buildRightListCss() {
                var selectRight = _getRightList();
                $(":even", selectRight).css({"background-color":"#ffffff"});
                $(":odd", selectRight).css({"background-color":"#e9f0f8"});
            }
            
            /*---------------------------------------- build the html ----------------------------------------*/
            // init the id, if the attribute "id" of settings doesn't exist, try to get the attribute "id" of container,
            // else try to create a random id
            var id = null;
            if(settings.id){
                id = settings.id;
            } else if($(this).attr("id")){
                id = $(this).attr("id");
            } else {
                id = $(this).randomUUID();
            }
            
            // init the html, use template
            var template = "<table>" 
                + "<tr><td align='left' style='font-size:12px;'>&nbsp;待添加</td><td></td><td align='left' style='font-size:12px;'>&nbsp;已添加</td></tr>" 
                + "<tr><td>"
                + "<div class='movingitems-list-wrapper'><select multiple='multiple' class='movingitems-list' id='@id_SelectLeft'></select></div>"
                + "</td><td>"
                + "<div class='movingitems-btn-container'>"
                + "<br/>"
                + "<button id='@id_MoveLeft' class='i-item-remove'></button><br/><br/>"
                + "<button id='@id_MoveRight' class='i-item-addselect'></button><br/><br/>"
                + "<button id='@id_MoveLeftAll' class='i-item-removeall'></button><br/><br/>"
                + "<button id='@id_MoveRightAll' class='i-item-addall'></button><br/><br/>"
                + "</div>"
                + "</td><td>"
                + "<div class='movingitems-list-wrapper'><select multiple='multiple' id='@id_SelectRight' class='movingitems-list'></select></div>"
                + "</td></tr>"
                + "</table>";
            template = template.replace(new RegExp("@id","gm"), id);
            
            $(template).appendTo($(this));
            $("#" + id + "_MoveLeft").click(_moveLeft);
            $("#" + id + "_MoveRight").click(_moveRight);
            $("#" + id + "_MoveLeftAll").click(_moveLeftAll);
            $("#" + id + "_MoveRightAll").click(_moveRightAll);
            
            // init left list
            if(settings.leftitems) {
                leftitems(settings.leftitems);
            }
            
            // init right list
            if(settings.rightitems) {
                rightitems(settings.rightitems);
            }
            return this;
        }
    });
})(jQuery);

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>moving items</title>
        <script language="javascript" type="text/javascript" src="/aps-res/js/jquery/jquery.js"></script>
        <script language="javascript" type="text/javascript" src="../js/jquery.movingitems.js"></script>
        <script language="javascript" type="text/javascript">
            var mi;
            $(function(){
                // the other way to init the items
                //$("#itemsContainer").movingitems({"leftitems":[{"value":"001","text":"中国"},{"value":"003","text":"美国"}],"rightitems":[{"value":"002","text":"澳大利亚"},{"value":"004","text":"英国"}]});
                // init the items
                mi = $("#itemsContainer").movingitems(jQuery);
                mi.leftitems([{"id":"001","label":"中国"},{"id":"003","label":"美国"},{"id":"005","label":"俄国"},{"id":"006","label":"法国"},{"id":"007","label":"德国"},{"id":"008","label":"朝鲜"},{"id":"009","label":"新加坡"},{"id":"010","label":"马来"}]);
                mi.rightitems([{"id":"002","label":"澳大利亚"},{"id":"004","label":"英国"}]);
            });
            function getitems () {
                alert("左边数据：" + mi.leftitems());
                alert("右边数据：" + mi.rightitems());
            }
        </script>
        <style type="text/css">
            button.i-item-addselect {
                background-color: transparent;
                background-image: url("../images/add-selected.gif");
                background-repeat: no-repeat;
                border: 0 none;
                cursor: pointer;
                height: 16px;
                width: 16px;
            }
            
            button.i-item-addall {
                background-color: transparent;
                background-image: url("../images/add-all.gif");
                background-repeat: no-repeat;
                border: 0 none;
                cursor: pointer;
                height: 16px;
                width: 16px;
            }
            
            button.i-item-remove {
                background-color: transparent;
                background-image: url("../images/remove-selected.gif");
                background-repeat: no-repeat;
                border: 0 none;
                cursor: pointer;
                height: 16px;
                width: 16px;
            }
            
            button.i-item-removeall {
                background-color: transparent;
                background-image: url("../images/remove-all.gif");
                background-repeat: no-repeat;
                border: 0 none;
                cursor: pointer;
                height: 16px;
                width: 16px;
            }
        </style>
    </head>
    <body>
        <div id="itemsContainer"></div>
        <div style="cursor:pointer;" onclick="getitems();">
                                测试获取数据
        </div> 
    </body>
</html>