Le plug-in jQuery réalise un menu de liaison à plusieurs niveaux effect

Le plug-in jQuery réalise un menu de liaison à plusieurs niveaux effect_jquery

WBOY

Libérer： 2016-05-16 15:28:34

original

1236 Les gens l'ont consulté

Pendant le développement, les menus de liaison sont utilisés dans de nombreux endroits. Dans le passé, chaque fois que je rencontrais des menus de liaison, je devais les réécrire. Le taux de réutilisation du code était très faible il y a quelques jours. à nouveau les menus. Après avoir résumé, j'ai découvert que vous pouvez développer une fonction de menu de liaison, qui sera beaucoup plus pratique lorsque vous souhaiterez l'utiliser à l'avenir. Chaque page du projet fait référence à jQuery, j'ai donc développé un plug-in de menu de liaison jQuery. Je viens de commencer à le faire et je vais le partager avec vous ci-dessous.

La méthode du plug-in jQuery que j'utilise

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

Copier après la connexion

Ce que jQuery transmet est l'objet jquery, qui doit être référencé avant l'expansion. Utilisez également la forme courte $ de jQuery dans les extensions.

$.fn fait référence à l'espace de noms de jquery. Les méthodes et attributs ajoutés à fn seront efficaces pour chaque instance de jquery. Jetez un œil à la ligne 101 du code source de jquery ci-dessous :

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

Copier après la connexion

Par exemple, $.fn.casmenu() qui sera développé plus tard, une fois défini, cette méthode peut être utilisée dans les objets jquery ultérieurs.

Voici une autre façon de l'étendre :

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

Copier après la connexion

Il y a une différence entre cette méthode d'extension et celle ci-dessus. Si nous utilisons l'analogie de classe, la méthode $.extend est équivalente à la méthode statique de la classe. doit avoir un objet avant de pouvoir être utilisé. La compréhension simple est la suivante :

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

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

Copier après la connexion

Idées de design
La première est la méthode de sauvegarde des données du menu hiérarchique. Jetez un œil aux données suivantes :
.

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

Copier après la connexion

Les valeurs de clé directe 1, 2 et 3 dans les niveaux d'objet représentent le niveau du menu. Sinon, ne l'utilisez pas. Chaque nom=>valeur représente le nom et la valeur de l'option dans. la sélection.

Les niveaux sont réguliers. Si un élément d'un certain niveau a un menu de niveau inférieur, le niveau suivant portera le nom de l'élément, tout comme les niveaux[1]['Quitter l'application']. menu de niveau inférieur, alors Il y a des niveaux[2]['Quitter l'application']. S'il existe encore un menu de niveau inférieur, comme niveaux[2]['Quitter l'application']['Application 1'], il continuera. être des niveaux [3] [dans la couche suivante et 'Application 1']. De cette manière, des niveaux infinis de menus de liaison sont réalisés. Différents menus de liaison n'ont besoin que de modifier le fichier de configuration du menu.

Mais il y a un autre regret à faire cela, c'est-à-dire que s'il y a deux sous-éléments dans le niveau2[2] avec le même nom, les deux ont des menus de niveau inférieur et le contenu des menus de niveau inférieur est différent , il y aura des problèmes, donc dans les paramètres Parfois, les éléments des menus de niveau inférieur doivent recevoir des noms différents, alors faites attention ici. En ce qui concerne cela, c’est simple, facile à comprendre et suffisant.

Mise en œuvre du code
$.extend est également utilisé dans le code pour étendre la configuration par défaut.

Il y a un autre point à noter. Lors de la liaison, la valeur réelle du menu sera mise dans une entrée avec l'attribut masqué. Utilisez la virgule par défaut pour séparer les valeurs entre chaque niveau, afin que vous puissiez facilement obtenir le menu de liaison. . Valeurs pour tous les éléments

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

Copier après la connexion

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

Copier après la connexion

Effet de fonctionnement :

Ce qui précède est le plug-in jQuery partagé avec vous pour obtenir l'effet de menu de liaison à plusieurs niveaux. J'espère qu'il sera utile à votre apprentissage.