快捷導(dǎo)航

jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果

更新時(shí)間：2015年12月01日 08:54:23 作者：奔跑的Man

開(kāi)發(fā)一個(gè)jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果，實(shí)現(xiàn)步驟很詳細(xì)，感興趣的小伙伴們可以參考一下

開(kāi)發(fā)中，有好多地方用到聯(lián)動(dòng)菜單，以前每次遇到聯(lián)動(dòng)菜單的時(shí)候都去重新寫(xiě)，代碼重用率很低，前幾天又遇到聯(lián)動(dòng)菜單的問(wèn)題，總結(jié)了下，發(fā)現(xiàn)可以開(kāi)發(fā)一個(gè)聯(lián)動(dòng)菜單的功能，以后想用的時(shí)候就方便多了。項(xiàng)目中每個(gè)頁(yè)面都有引用jQuery，，開(kāi)發(fā)個(gè)jQuery聯(lián)動(dòng)菜單插件，說(shuō)動(dòng)手就動(dòng)手，下面跟大家分享分享。

我用的jQuery插件方式

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

其中jQuery傳入的是jquery對(duì)象，需要在擴(kuò)展之前引用。在擴(kuò)展中同樣使用jQuery的短格式$。

$.fn是指jquery的命名空間，加在fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效，看看下面的jquery源碼101行左右：

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

比如說(shuō)后面要開(kāi)發(fā)的$.fn.casmenu()，定義之后，在后面的jquery對(duì)象都可以使用該方法。

這里還有一種擴(kuò)展的方法：

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

這種擴(kuò)展方法和上面的是有區(qū)別的，要是拿類(lèi)做類(lèi)比的話，$.extend這種方法相當(dāng)于類(lèi)中的靜態(tài)方法，上面的一種方式相當(dāng)于非靜態(tài)方法，必須有對(duì)象才可以使用。簡(jiǎn)單的理解，是下面這樣的：

//$.fn.casemenu 方式擴(kuò)展的方法，必須在有jquery對(duì)象的時(shí)候才可以使用
$("#mydiv").casmenu();

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

設(shè)計(jì)思路
首先是層級(jí)菜單的數(shù)據(jù)保存方式，看看下面的數(shù)據(jù)：

var levels={
 //內(nèi)容中有引號(hào)，必須使用單引號(hào)，外引號(hào)必須用雙引號(hào)
 //name => value
 1:{
  退出應(yīng)用: "code1003",
  登錄界面:"code1004",
  跳轉(zhuǎn)至個(gè)人資料界面:"code1005",
 },
 2:{
  退出應(yīng)用:{
   應(yīng)用1:"gameid1",
   應(yīng)用2:"gameid2",
   應(yīng)用3:"gameid3",
   應(yīng)用4:"gameid4",
   應(yīng)用5:"gameid5",   
  },
  跳轉(zhuǎn)至個(gè)人資料界面:{
   主界面:"main interface",
  }
 },
 3:{
  應(yīng)用1:{
   中級(jí)場(chǎng):"12",
   高級(jí)場(chǎng):"13",
   職業(yè)場(chǎng):"14",
   比賽場(chǎng):"15",
  }
 }
}

對(duì)象levels中的直接鍵值1、2、3代表菜單的層級(jí)，沒(méi)有就不用些，每一項(xiàng)name=>value代表select中option的名稱(chēng)和value。

層級(jí)有規(guī)律，某一層級(jí)中的某一項(xiàng)要是有下一級(jí)菜單，在下一層及有該項(xiàng)的名稱(chēng)，就像levels[1]['退出應(yīng)用']在有下級(jí)菜單，就有l(wèi)evels[2]['退出應(yīng)用']，要是繼續(xù)有下級(jí)菜單，就像levels[2]['退出應(yīng)用']['應(yīng)用1']，會(huì)在下一層及中繼續(xù)有l(wèi)evels[3]['應(yīng)用1']。這樣一來(lái)，就實(shí)現(xiàn)了無(wú)限級(jí)聯(lián)動(dòng)菜單，不同的聯(lián)動(dòng)菜單只需要修改菜單配置文件就可以了。

但是這么做又有一個(gè)遺憾，就是如果level2[2]中的子項(xiàng)有兩個(gè)名稱(chēng)相同的，都有下級(jí)菜單，而且下級(jí)菜單內(nèi)容還不一樣，就會(huì)有問(wèn)題，因此在設(shè)置的時(shí)候，有下級(jí)菜單的項(xiàng)要取不同的名稱(chēng)，這里要注意下。就目前這種來(lái)說(shuō)，簡(jiǎn)單，好理解，也夠用了。

代碼實(shí)現(xiàn)
在代碼中也用到了$.extend，用來(lái)擴(kuò)展默認(rèn)配置。

還有一個(gè)點(diǎn)要注意，在聯(lián)動(dòng)的時(shí)候會(huì)將實(shí)事的菜單值放入一個(gè)屬性為hidden的input中，用默認(rèn)逗號(hào)分割每個(gè)層級(jí)之間的值，可以很輕松的獲取到聯(lián)動(dòng)菜單所有項(xiàng)的值

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", //是否將結(jié)果保存至input
   levels:{},
   ulObj:{},//保存生成好的ul列表
   length:0, //層級(jí)菜單的層級(jí)
   divide:",",//默認(rèn)各個(gè)層級(jí)菜單之間的分隔符
  }
 };

 $.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">請(qǐng)選擇</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++;
   //移除當(dāng)前觸發(fā)菜單之后的菜單
   for(var num=level;num<=AI.opts.length;num++){
    $(".casmenu[level="+num+"]").remove();
   }

   //設(shè)置input的值，級(jí)聯(lián)菜單的值
   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對(duì)象中不存在下一級(jí)別目錄
   if(typeof(AI.opts.levels[level]) == "undefined") return;

   //獲取下一級(jí)別目錄的鍵值，值不存在的話返回
   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">請(qǐng)選擇</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);

運(yùn)行效果：