jQueryプラグインで多階層連携を実現メニューeffect_jquery

開発中、さまざまな場所で連携メニューが使用されていましたが、以前は連携メニューに遭遇するたびにコードの再利用率が非常に低いという問題に遭遇しました。改めてメニューをまとめてみたところ、連携メニュー機能を開発することができ、今後使いたいときにさらに便利になることが分かりました。プロジェクト内のすべてのページが jQuery を参照しているので、jQuery 連携メニュー プラグインを開発し始めましたので、以下に共有します。

私が使用する jQuery プラグインのメソッド

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

jQuery が渡すのは jquery オブジェクトであり、展開前に参照する必要があります。拡張機能では jQuery の短い形式の $ も使用します。

$.fn は jquery の名前空間を指します。fn に追加されたメソッドと属性は、以下の jquery ソース コードの 101 行目あたりを見てください。

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

たとえば、後で開発する $.fn.casmenu() は、定義した後、後続の jquery オブジェクトでこのメソッドを使用できます。

これを拡張する別の方法は次のとおりです:

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

この拡張メソッドと上記のメソッドには違いがあります。クラスに例えると、$.extend メソッドはクラス内の静的メソッドと同等であり、上記のメソッドは非静的メソッドと同等です。使用するにはオブジェクトが必要です。簡単に理解すると次のようになります:

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

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

デザインのアイデア 1 つ目は、階層メニューのデータ保存方法です。
のデータを見てください。

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

オブジェクト レベルのダイレクト キー値 1、2、および 3 は、メニューのレベルを表します。そうでない場合は、それぞれの name=>value のオプションの名前と値を表します。セレクト。

特定のレベルの項目に下位レベルのメニューがある場合、次のレベルには、levels[1]['Exit application'] がある場合と同様に、その項目の名前が付けられます。下位レベルのメニューがある場合は、levels[2]['Exit application'] のように、下位レベルのメニューがまだある場合は、levels[2]['Exit application']['Application 1'] が続きます。次のレイヤーのレベル[3][および「アプリケーション 1」]になります。このようにして、メニュー構成ファイルを変更するだけで、無限レベルのリンク メニューが実現されます。

しかし、これを行うには別の残念な点があります。つまり、level2[2] に同じ名前の 2 つのサブ項目がある場合、両方とも下位レベルのメニューがあり、下位レベルのメニューの内容が異なります。 、問題が発生するため、設定で下位レベルのメニューの項目に別の名前を付ける必要がある場合があるため、ここで注意してください。これに関しては、シンプルでわかりやすく、十分です。

コードの実装
$.extend は、デフォルト設定を拡張するためにコードでも使用されます。

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

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

操作効果:

上記は、マルチレベル連携メニュー効果を実現するために共有された jQuery プラグインです。あなたの学習に役立つことを願っています。