使用jquery制作动态加载型菜单

　　为了提升后台管理系统的加载。决定对后台的菜单进行动态加载。具体实现方式和我上一篇文章差不多。不过我把js代码进行了封装。

css:

.menu {position:relative;}   
.menu ul {position:absolute; margin:0; padding:0; list-style:none; white-space:nowrap; background:#f1f8fe; border:1px solid #fff; padding:10px 0;
-o-border-radius: 8px;
-ms-border-radius: 8px; 
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); 
-ms-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); 
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); 
}
.menu ul ul {display:none; left:100%; margin-top:-33px; margin-left:-5px;}
.menu li {margin:0; padding:0; list-style:none; display:inline-block; display:inline;line-height:20px;}
.menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none; padding:0 20px 0 10px;}
.menu li a.fly {background: url(/static/images/widget/arrow-right.gif) no-repeat right top;}
.menu li:hover > a {background-color:#c60; color:#fff;}

js:

/*
 * 添加channel_tree
 * 害怕影响后面代码，添加作用域，保证模块的单独性。
 * 在页面dom加载完之后再执行代码。
 * */
window.onload = function() {
    (function() {
        var data,
            uniqueName;
        //添加元素唯一标识，解耦。主要是为了兼容添加碎片的代码
        if($("[name='channel_select_django_btn']").length != 0)
            uniqueName = "[name = 'channel_select_django_btn']";
        else
            uniqueName = "span[name = 'channel_select_btn']";
        //因为在添加模板的时候需要添加无父对象的字段。
        var hastemplate = document.location.pathname.match(/template/);
        var url = "/api/channel_tree/";
        $.getJSON(url, function(json) {
            data = eval('(' + json.data + ')');
            if(hastemplate)
                data = [{"id": "","name": "无父对象","have_children": false}].concat(data);
        })
        $(uniqueName).bind("click", function() {
            if($(uniqueName + " > .menu").length == 0)
                Menu.init();
            else
               $(uniqueName + " > .menu").show();
        })
        //绑定document点击事件
        $(document).click(function(e) {
            var element = event.target;
            if($(uniqueName + " > .menu").length && jQuery.contains($(uniqueName)[0],element)){}else
                $(uniqueName + " > .menu").hide();
        })
        var Menu = {
            init: function() {
                var menuNode = $("<div class='menu' style='position: absolute; height: 440px;'></div>"),
                    ul = $("<ul></ul>");
                _this = this;
                this.arr = [0];
                $(uniqueName).append(menuNode);
                menuNode.append(ul);
                for(var i=0; i<data.length; i++){
                    $(".menu > ul").append(this.createANode(data[i]))
                }
            },
            createANode: function(nodeInfo, rootNode) {
                var icon_name,
                    nodeId;
                if (nodeInfo.have_children == false) {
                    var parentNode = $('<li class=""></li>');
                    var html = '<a sid = ' + nodeInfo.id + '>' + nodeInfo.name + '</a>';
                    parentNode.append(html);
                } else {
                    var parentNode = $('<li class=""></li>'),
                        html = '<a sid = ' + nodeInfo.id + ' class="fly">'+ nodeInfo.name + '</a><ul style="display: none;"></ul>';
                    parentNode.append(html);
                }
                $("a", parentNode).hover(
                    function(e) {
                        e.stopPropagation();
                        nodeId = parseInt(e.target.getAttribute("sid"));
                        var dataUrl = "/api/channel_tree/" + nodeId + "/";
                        if(!_this.contains(nodeId, _this.arr) && nodeId)
//                    if(localStorage.getItem(dataUrl)) {
//                        var obj = eval('(' + localStorage.getItem(dataUrl) + ')');
//                        var nodes = eval('(' + obj.data + ')');
//                        for(var j=0; j<nodes[0].children.length; j++) {
//                            _this.createANode(nodes[0].children[j], parentNode);
//                        }
//                    }
                            $.ajax({
                                type: "get",
                                url: dataUrl,
                                success: function(json) {
                                    localStorage.setItem(dataUrl, json);
                                    var obj = eval('(' + json + ')');
                                    var nodes = eval('(' + obj.data + ')');
                                    for(var j=0; j<nodes[0].children.length; j++) {
                                        _this.createANode(nodes[0].children[j], parentNode);
                                    }
                                }
                            })
                        if($(this).parent().children('ul'))
                            $(this).parent().children('ul').show();
                        $(this).parent().siblings().find('ul').hide();
                    },
                    function() {
                        $(this).siblings().children().find('ul').hide();
                        $(this).parent().siblings().find('ul').hide();
                    }
                )
                $("a", parentNode).click(function(e) {
                    e.stopPropagation();
                    var val = $(this).html();
                    $(uniqueName).find(".menu").hide();
                    $(uniqueName + " > input").val(val);
                    $("[name = 'channel']").val(nodeId);
                    if(uniqueName == "[name = 'channel_select_django_btn']") {
                        var sid = $(this).attr("sid")
                        alert(sid);
                        $(uniqueName).attr("sid", sid);
                    }
                })
                if(rootNode) {
                    rootNode.children().last().append(parentNode);
                } else
                    return parentNode;
            },
            contains: function(nodeId, arr) {
                for(var key in arr)
                    if(nodeId == arr[key])
                        return true;
                _this.arr.push(nodeId);
                return false;
            }
        }
     })()
}

 

第一份数据：

{
"status": 0,
"data": "[{\"children\": [], \"name\": \"\\u72d0\\u9996\", \"parent\": -1, \"have_children\": true, \"desc\": \"\", \"type\": 0, \"id\": 1, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u65b0\\u95fb\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 2, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u4f53\\u80b2\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 3, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u5a31\\u4e50\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 4, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u8d22\\u7ecf\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 5, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u79d1\\u6280\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 7, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u519b\\u4e8b\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 8, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u661f\\u5ea7\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 9, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u56fe\\u5e93\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 10, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u6d4b\\u8bd5\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 11, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u5973\\u4eba\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 326, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u5176\\u5b83\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 328, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u6e20\\u9053\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 561, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u65e0\\u7ebf\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 564, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u5fae\\u535a\", \"parent\": -1, \"have_children\": false, \"desc\": null, \"type\": 0, \"id\": 565, \"is_subject\": false}, {\"children\": [], \"name\": \"\\u5e7f\\u544a\", \"parent\": -1, \"have_children\": true, \"desc\": null, \"type\": 0, \"id\": 577, \"is_subject\": false}]"
}

第一个菜单栏的子数据

{
"status": 0,
"data": "[{\"children\": [{\"children\": [], \"name\": \"\\u6b63\\u6587\\u9875\\u63a8\\u8350\", \"parent\": 1, \"have_children\": false, \"desc\": \"\", \"type\": 1, \"id\": 465, \"is_subject\": false}, {\"children\": [], \"name\": \"UC\", \"parent\": 1, \"have_children\": false, \"desc\": \"\", \"type\": 1, \"id\": 588, \"is_subject\": false}], \"name\": \"\\u72d0\\u9996\", \"parent\": -1, \"have_children\": true, \"desc\": \"\", \"type\": 0, \"id\": 1, \"is_subject\": false}]"
}