開發一個jQuery插件——多級聯動菜單

引言

開發中，有好多地方用到聯動菜單，之前每次遇到聯動菜單的時候都去從新寫，代碼重用率很低，前幾天又遇到聯動菜單的問題，總結了下，發現能夠開發一個聯動菜單的功能，之後想用的時候就方便多了。項目中每一個頁面都有引用jQuery，，開發個jQuery聯動菜單插件，說動手就動手，下面跟你們分享分享。

我用的jQuery插件方式

(function($){
    $.fn.casmenu=function(argvs){
         //your code
    }
})(jQuery);

其中jQuery傳入的是jquery對象，須要在擴展以前引用。在擴展中一樣使用jQuery的短格式$。

$.fn是指jquery的命名空間，加在fn上的方法及屬性，會對jquery實例每個有效，看看下面的jquery源碼101行左右：

jQuery.fn = jQuery.prototype = {
    ......
}

好比說後面要開發的$.fn.casmenu()，定義以後，在後面的jquery對象均可以使用該方法。

這裏還有一種擴展的方法：

$.extend({
    funName: function(){
        //your code
   },
});

這種擴展方法和上面的是有區別的，要是拿類作類比的話，$.extend這種方法至關於類中的靜態方法，上面的一種方式至關於非靜態方法，必須有對象纔可使用。簡單的理解，是下面這樣的：

//$.fn.casemenu 方式擴展的方法，必須在有jquery對象的時候纔可使用
$("#mydiv").casmenu();

//$.extend({}) 方式擴展的方法，能夠直接使用
$.add(2,3);

設計思路

首先是層級菜單的數據保存方式，看看下面的數據：

var levels={
    //內容中有引號，必須使用單引號，外引號必須用雙引號
    //name => value
    1:{
        退出應用: "code1003",
        登陸界面:"code1004",
        跳轉至我的資料界面:"code1005",
    },
    2:{
        退出應用:{
            應用1:"gameid1",
            應用2:"gameid2",
            應用3:"gameid3",
            應用4:"gameid4",
            應用5:"gameid5",            
        },
        跳轉至我的資料界面:{
            主界面:"main interface",
        }
    },
    3:{
        應用1:{
            中級場:"12",
            高級場:"13",
            職業場:"14",
            比賽場:"15",
        }
    }
}

對象levels中的直接鍵值一、二、3表明菜單的層級，沒有就不用些，每一項name=>value表明select中option的名稱和value。

層級有規律，某一層級中的某一項要是有下一級菜單，在下一層及有該項的名稱，就像levels[1]['退出應用']在有下級菜單，就有levels[2]['退出應用']，要是繼續有下級菜單，就像levels[2]['退出應用']['應用1']，會在下一層及中繼續有levels[3]['應用1']。這樣一來，就實現了無限級聯動菜單，不一樣的聯動菜單隻須要修改菜單配置文件就能夠了。

可是這麼作又有一個遺憾，就是若是level2[2]中的子項有兩個名稱相同的，都有下級菜單，並且下級菜單內容還不同，就會有問題，所以在設置的時候，有下級菜單的項要取不一樣的名稱，這裏要注意下。就目前這種來講，簡單，好理解，也夠用了。

代碼實現

在代碼中也用到了$.extend，用來擴展默認配置。

還有一個點要注意，在聯動的時候會將實事的菜單值放入一個屬性爲hidden的input中，用默認逗號分割每一個層級之間的值，能夠很輕鬆的獲取到聯動菜單全部項的值

if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){
            $("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body'));
        }

(function($){
    //配置
    var AI={
        opts:{
            saveinput:"jumpcode", //是否將結果保存至input
            levels:{},
            ulObj:{},//保存生成好的ul列表
            length:0, //層級菜單的層級
            divide:",",//默認各個層級菜單之間的分隔符
        }
    };

    $.fn.casmenu=function(opts){
        AI.opts = $.extend(AI.opts, opts);

        if((AI.opts.length = Object.keys(AI.opts.levels).length) <= 0){
            throw "levels arr must not be empty";
            return;
        }

        var _levels = AI.opts.levels;
        if(_levels[1] == undefined){
            throw "menu level 1 must not be empty";
            return;
        }
        var _levels_1 = _levels[1];

        if(typeof(AI.opts.saveinput) != "undefined" && (AI.opts.saveinput = AI.opts.saveinput.toString()) != ''){
            $("<input type='hidden' value='' name='"+AI.opts.saveinput+"' id='"+AI.opts.saveinput+"' />").appendTo($('body'));
        }

        AI.opts.ulObj['level_1'] = '<select class="casmenu" level="1">';
        AI.opts.ulObj['level_1'] += '<option value="null">請選擇</option>';
        $("#"+AI.opts.saveinput).val('null');
        for(var i in _levels_1){
            AI.opts.ulObj['level_1'] += '<option name="'+i+'" value="'+_levels_1[i]+'">'+i+'</option>';
        }
        AI.opts.ulObj['level_1'] += '</select>';

        $(AI.opts.ulObj['level_1']).appendTo(this);

        $("body").on("change", ".casmenu", function(){
            var level = $(this).attr("level");
            if(level > AI.opts.length) return;
            level++;
            //移除當前觸發菜單以後的菜單
            for(var num=level;num<=AI.opts.length;num++){
                $(".casmenu[level="+num+"]").remove();
            }

            //設置input的值，級聯菜單的值
            var _val = '';
            for(var val=1;val<=AI.opts.length;val++){
                var __val = $("select[level="+val+"]");
                if(__val.length <= 0)
                    continue;

                _val += __val.val()+AI.opts.divide;
            }
            $("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1));

            //levels對象中不存在下一級別目錄
            if(typeof(AI.opts.levels[level]) == "undefined") return;

            //獲取下一級別目錄的鍵值，值不存在的話返回
            var name = $(this).find("option:selected").attr("name");
            if(typeof(AI.opts.levels[level][name]) == "undefined") return;

            if(typeof(AI.opts.ulObj['level_'+level]) == "undefined" || typeof(AI.opts.ulObj['level_'+level][name]) == "undefined"){
                if(typeof(AI.opts.ulObj['level_'+level]) == "undefined")
                    AI.opts.ulObj['level_'+level] = {};

                AI.opts.ulObj['level_'+level][name] = '<select class="casmenu" level="'+level+'">';
                AI.opts.ulObj['level_'+level][name] += '<option value="null">請選擇</option>';
                var levelinfo = AI.opts.levels[level][name];
                for(var i in levelinfo){
                    AI.opts.ulObj['level_'+level][name] += '<option name="'+i+'" value="'+levelinfo[i]+'" >'+i+'</option>';
                }
                AI.opts.ulObj['level_'+level][name] += '</select>';
            }
            $(AI.opts.ulObj['level_'+level][name]).appendTo($(this).parent());
            var _val = '';
            for(var val=1;val<=AI.opts.length;val++){
                var __val = $("select[level="+val+"]");
                if(__val.length <= 0)
                    continue;

                _val += __val.val()+AI.opts.divide;
            }
            $("#"+AI.opts.saveinput).val(_val.substr(0, _val.length-1));
        });
    }
})(jQuery);

效果

下面看看效果

 

 

例子：http://aizuyan.github.io/casmenu.html

我把完整的代碼放在github上：https://github.com/aizuyan/jquery.plugin

 

本文版權歸做者iforever(luluyrt@163.com)全部，未經做者本人贊成禁止任何形式的轉載，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利。