jQuery 플러그인은 다단계 연결 메뉴 effect_jquery를 구현합니다.

개발 과정에서 링크 메뉴가 여러 곳에서 사용되는데, 예전에는 링크 메뉴를 만날 때마다 다시 작성해야 했는데, 며칠 전에는 코드 재사용률이 매우 낮았습니다. 다시 정리해본 결과, 연동 메뉴 기능을 개발할 수 있다는 것을 알게 되었는데, 이는 나중에 사용하고 싶을 때 훨씬 더 편리할 것입니다. 프로젝트의 모든 페이지는 jQuery를 참조하여 jQuery 연결 메뉴 플러그인을 개발하기 시작했습니다.

제가 사용하는 jQuery 플러그인 방식

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

jQuery가 전달하는 것은 확장 전에 참조해야 하는 jquery 객체입니다. 또한 확장 기능에는 jQuery의 짧은 형식인 $를 사용하세요.

$.fn은 jquery의 네임스페이스를 나타냅니다. fn에 추가된 메서드와 속성은 각 jquery 인스턴스에 적용됩니다. 아래 jquery 소스 코드의 101번째 줄을 살펴보세요.

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

예를 들어 나중에 개발될 $.fn.casmenu()는 정의된 후 후속 jquery 객체에서 이 메서드를 사용할 수 있습니다.

확장하는 또 다른 방법은 다음과 같습니다.

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

이 확장 메서드는 위의 메서드와 차이점이 있습니다. 클래스 비유를 사용하면 $.extend 메서드는 클래스의 정적 메서드와 동일하며 위 메서드는 비정적 메서드와 동일합니다. 사용하려면 먼저 객체가 있어야 합니다. 간단한 이해는 다음과 같습니다.

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

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

디자인 아이디어
첫 번째는 계층 메뉴의 데이터 저장 방법입니다. 다음 데이터를 살펴보세요.

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는 해당 옵션의 이름과 값을 나타냅니다. 셀렉트.

레벨은 일반입니다. 특정 레벨의 항목에 하위 메뉴가 있는 경우 레벨[1]['응용 프로그램 종료']과 마찬가지로 다음 레벨에도 항목 이름이 지정됩니다. 하위 메뉴에는 레벨[2]['애플리케이션 종료']가 있습니다. 레벨[2]['애플리케이션 종료']['애플리케이션 1']과 같은 하위 메뉴가 남아 있으면 계속됩니다. 다음 레이어의 레벨[3][ 및 '애플리케이션 1']이 됩니다. 이러한 방식으로 다양한 연결 메뉴는 메뉴 구성 파일만 수정하면 됩니다.

그런데 또 아쉬운 점이 있는데, 레벨2[2]에 같은 이름의 하위 항목이 2개 있으면 둘 다 하위 메뉴가 있고, 하위 메뉴의 내용이 다르다는 겁니다. , 문제가 있을 수 있으니 설정에서 가끔 하위 메뉴의 항목에 다른 이름을 붙여야 하는 경우가 있으니 여기서 주의하시기 바랍니다. 이것에 관한 한 그것은 간단하고 이해하기 쉽고 충분합니다.

코드 구현
$.extend는 기본 구성을 확장하기 위해 코드에도 사용됩니다.

또 한 가지 주의할 점은 연동 시 실제 메뉴 값이 속성이 숨겨진 상태로 입력되기 때문에 각 레벨 간 값을 구분하기 위해 기본 쉼표를 사용하면 쉽게 연동 메뉴를 얻을 수 있다는 점입니다. . 모든 항목의 값

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 플러그인입니다. 학습에 도움이 되길 바랍니다.