jQuery 플러그인은 다단계 연결 메뉴 effect_jquery를 구현합니다.-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:28:34

원래의

1208명이 탐색했습니다.

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