jQuery plug-in realizes multi-level linkage menu effect

jQuery plug-in realizes multi-level linkage menu effect_jquery

WBOY

Release： 2016-05-16 15:28:34

Original

1206 people have browsed it

During development, linkage menus are used in many places. In the past, every time I encountered linkage menus, I had to rewrite them. The code reuse rate was very low. A few days ago, I encountered the problem of linkage menus again. After summarizing, I found that You can develop a linkage menu function, which will be much more convenient when you want to use it in the future. Every page in the project references jQuery, so I developed a jQuery linkage menu plug-in. I just started to do it. I will share it with you below.

The jQuery plug-in method I use

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

Copy after login

What jQuery passes in is the jquery object, which needs to be referenced before expansion. Also use jQuery's short form $ in extensions.

$.fn refers to the namespace of jquery. The methods and attributes added to fn will be effective for each jquery instance. Take a look at around line 101 of the jquery source code below:

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

Copy after login

For example, $.fn.casmenu() to be developed later, after it is defined, this method can be used in subsequent jquery objects.

Here is another way to extend it:

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

Copy after login

There is a difference between this extension method and the above one. If we use the class analogy, the $.extend method is equivalent to the static method in the class. The above method is equivalent to the non-static method and must have an object. before it can be used. The simple understanding is as follows:

//$.fn.casemenu 方式扩展的方法，必须在有jquery对象的时候才可以使用
$("#mydiv").casmenu();

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

Copy after login

Design ideas
The first is the data saving method of the hierarchical menu. Take a look at the following data:

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",
  }
 }
}

Copy after login

The direct key values 1, 2, and 3 in the object levels represent the level of the menu. If not, don’t use it. Each name=>value represents the name and value of the option in the select.

The levels are regular. If an item in a certain level has a lower-level menu, the next level will have the name of the item, just like levels[1]['Exit application']. If there is a lower-level menu, then There are levels[2]['Exit application']. If there is still a lower-level menu, like levels[2]['Exit application']['Application 1'], there will continue to be levels[3][ in the next layer and 'Application 1']. In this way, infinite levels of linkage menus are realized. Different linkage menus only need to modify the menu configuration file.

But there is another regret in doing this, that is, if there are two sub-items in level2[2] with the same name, both have lower-level menus, and the content of the lower-level menus are different, there will be problems, so in the setting Sometimes, items in lower-level menus need to be given different names, so please pay attention here. As far as this is concerned, it is simple, easy to understand, and sufficient.

Code implementation
$.extend is also used in the code to extend the default configuration.

There is another point to note. During linkage, the actual menu value will be put into an input with the attribute hidden. Use the default comma to separate the values between each level, so you can easily get the linkage menu. Values for all items

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'));
  }

Copy after login

(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);

Copy after login

Operation effect:

The above is the jQuery plug-in shared with you to achieve the multi-level linkage menu effect. I hope it will be helpful to your learning.