Das jQuery-Plug-in realisiert das mehrstufige Verknüpfungsmenü effect_jquery

Während der Entwicklung wurden an vielen Stellen Verknüpfungsmenüs verwendet. Jedes Mal, wenn ich auf Verknüpfungsmenüs stieß, war die Code-Wiederverwendungsrate sehr gering Nach der Zusammenfassung habe ich festgestellt, dass Sie eine Verknüpfungsmenüfunktion entwickeln können, die viel praktischer ist, wenn Sie sie in Zukunft verwenden möchten. Jede Seite im Projekt verweist auf jQuery, daher habe ich gerade damit begonnen, es mit Ihnen zu teilen.

Die von mir verwendete jQuery-Plug-in-Methode

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

Was jQuery übergibt, ist das Jquery-Objekt, auf das vor der Erweiterung verwiesen werden muss. Verwenden Sie in Erweiterungen auch die Kurzform $ von jQuery.

$.fn bezieht sich auf den Namespace von jquery. Die zu fn hinzugefügten Methoden und Attribute sind für jede jquery-Instanz wirksam. Sehen Sie sich Zeile 101 des folgenden jquery-Quellcodes an:

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

Beispiel: $.fn.casmenu() soll später entwickelt werden, nachdem es definiert wurde, kann diese Methode in nachfolgenden JQuery-Objekten verwendet werden.

Hier ist eine weitere Möglichkeit, es zu erweitern:

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

Es gibt einen Unterschied zwischen dieser Erweiterungsmethode und der oben genannten. Wenn wir die Klassenanalogie verwenden, entspricht die Methode $.extend der statischen Methode in der Klasse muss ein Objekt vorhanden sein, bevor es verwendet werden kann. Das einfache Verständnis ist wie folgt:

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

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

Designideen
Die erste ist die Datenspeichermethode des hierarchischen Menüs. Schauen Sie sich die folgenden Daten an:

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

Die direkten Schlüsselwerte 1, 2 und 3 in den Objektebenen stellen die Ebene des Menüs dar. Wenn nicht, verwenden Sie sie nicht. Jeder name=>value stellt den Namen und Wert der Option dar die Auswahl.

Die Ebenen sind regulär. Wenn ein Element in einer bestimmten Ebene ein Menü auf einer niedrigeren Ebene hat, hat die nächste Ebene den Namen des Elements, genau wie Ebenen[1]['Anwendung beenden']. Menü auf niedrigerer Ebene, dann Es gibt Ebenen[2]['Anwendung beenden']. Wenn es noch ein Menü auf niedrigerer Ebene gibt, wie z. B. Ebenen[2]['Anwendung beenden']['Anwendung 1'], wird dort fortgefahren Ebenen sein[3][ in der nächsten Ebene und 'Anwendung 1']. Auf diese Weise werden unendlich viele Ebenen von Verknüpfungsmenüs realisiert. Für verschiedene Verknüpfungsmenüs muss lediglich die Menükonfigurationsdatei geändert werden.

Aber es gibt noch ein weiteres Bedauern: Wenn es in Ebene 2 [2] zwei Unterelemente mit demselben Namen gibt, haben beide Menüs auf niedrigerer Ebene und der Inhalt der Menüs auf niedrigerer Ebene ist unterschiedlich , wird es Probleme geben, daher müssen in der Einstellung manchmal Elemente in Menüs auf niedrigerer Ebene unterschiedliche Namen erhalten, also achten Sie hier bitte darauf. Was dies betrifft, ist es einfach, leicht verständlich und ausreichend.

Code-Implementierung
$.extend wird im Code auch verwendet, um die Standardkonfiguration zu erweitern.

Bei der Verknüpfung ist noch ein weiterer Punkt zu beachten: Der tatsächliche Menüwert wird in eine Eingabe eingegeben, wobei das Attribut ausgeblendet ist. Verwenden Sie das Standardkomma, um die Werte zwischen den einzelnen Ebenen zu trennen, damit Sie das Verknüpfungsmenü problemlos erhalten können . Werte für alle Artikel

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

Betriebseffekt:

Das Obige ist das mit Ihnen geteilte jQuery-Plug-in, um den mehrstufigen Verknüpfungsmenüeffekt zu erzielen. Ich hoffe, es wird Ihnen beim Lernen helfen.