Pemalam jQuery merealisasikan menu pautan berbilang peringkat effect

Pemalam jQuery merealisasikan menu pautan berbilang peringkat effect_jquery

WBOY

Lepaskan： 2016-05-16 15:28:34

asal

1237 orang telah melayarinya

Semasa pembangunan, menu pautan digunakan di banyak tempat Pada masa lalu, setiap kali saya menemui menu pautan, saya terpaksa menulis semula Kadar penggunaan semula kod adalah sangat rendah menu sekali lagi. Selepas merumuskan, saya mendapati bahawa Anda boleh membangunkan fungsi menu pautan, yang akan menjadi lebih mudah apabila anda ingin menggunakannya pada masa hadapan. Setiap halaman dalam projek merujuk kepada jQuery, jadi saya membangunkan pemalam menu pautan jQuery yang saya baru mula melakukannya. Saya akan berkongsi dengan anda di bawah.

Kaedah pemalam jQuery yang saya gunakan

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

Salin selepas log masuk

Apa yang dimasukkan oleh jQuery ialah objek jquery, yang perlu dirujuk sebelum pengembangan. Juga gunakan bentuk pendek jQuery $ dalam sambungan.

$.fn merujuk kepada ruang nama jquery Kaedah dan atribut yang ditambahkan pada fn akan berkesan untuk setiap contoh jquery Lihat di sekitar baris 101 kod sumber jquery di bawah:

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

Salin selepas log masuk

Sebagai contoh, $.fn.casmenu() untuk dibangunkan kemudian, selepas ia ditakrifkan, kaedah ini boleh digunakan dalam objek jquery berikutnya.

Berikut ialah cara lain untuk melanjutkannya:

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

Salin selepas log masuk

Terdapat perbezaan antara kaedah sambungan ini dan kaedah di atas Jika kita menggunakan analogi kelas, kaedah $.extend adalah bersamaan dengan kaedah statik dalam kelas mesti mempunyai objek sebelum boleh digunakan. Pemahaman mudahnya adalah seperti berikut:

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

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

Salin selepas log masuk

Idea reka bentuk
Yang pertama ialah kaedah penjimatan data menu hierarki Lihat data berikut:

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

Salin selepas log masuk

Nilai kunci langsung 1, 2, dan 3 dalam tahap objek mewakili tahap menu Jika tidak, jangan gunakannya Setiap nama=>nilai mewakili nama dan nilai pilihan dalam yang pilih.

Tahap adalah tetap Jika item dalam tahap tertentu mempunyai menu tahap rendah, tahap seterusnya akan mempunyai nama item, sama seperti tahap[1]['Keluar dari aplikasi']. menu peringkat bawah, kemudian Terdapat tahap[2]['Keluar dari aplikasi']. Jika masih terdapat menu peringkat rendah, seperti tahap[2]['Keluar dari aplikasi']['Aplikasi 1'], akan diteruskan menjadi tahap[3][ dalam lapisan seterusnya dan 'Aplikasi 1']. Dengan cara ini, tahap menu pautan yang tidak terhingga direalisasikan Menu pautan yang berbeza hanya perlu mengubah suai fail konfigurasi menu.

Tetapi terdapat satu lagi penyesalan dalam melakukan ini, iaitu, jika terdapat dua sub-item dalam tahap2[2] dengan nama yang sama, kedua-duanya mempunyai menu peringkat bawah, dan kandungan menu peringkat bawah adalah berbeza , akan ada masalah, jadi dalam tetapan Kadangkala, item dalam menu peringkat bawah perlu diberi nama yang berbeza, jadi sila beri perhatian di sini. Setakat ini, ia mudah, mudah difahami, dan mencukupi.

Pelaksanaan kod
$.extend juga digunakan dalam kod untuk melanjutkan konfigurasi lalai.

Ada satu lagi perkara yang perlu diperhatikan Semasa pautan, nilai menu sebenar akan dimasukkan ke dalam input dengan atribut tersembunyi Gunakan koma lalai untuk memisahkan nilai antara setiap peringkat, supaya anda boleh mendapatkan menu pautan dengan mudah . Nilai untuk semua item

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

Salin selepas log masuk

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

Salin selepas log masuk

Kesan operasi:

Di atas ialah pemalam jQuery yang dikongsi dengan anda untuk mencapai kesan menu pautan berbilang peringkat, saya harap ia akan membantu pembelajaran anda.