jQuery插件实现多级联动菜单效果


Posted in Javascript onDecember 01, 2015

开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了。项目中每个页面都有引用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",
  }
 }
}

对象levels中的直接键值1、2、3代表菜单的层级,没有就不用些,每一项name=>value代表select中option的名称和value。

层级有规律,某一层级中的某一项要是有下一级菜单,在下一层及有该项的名称,就像levels[1]['退出应用']在有下级菜单,就有levels[2]['退出应用'],要是继续有下级菜单,就像levels[2]['退出应用']['应用1'],会在下一层及中继续有levels[3]['应用1']。这样一来,就实现了无限级联动菜单,不同的联动菜单只需要修改菜单配置文件就可以了。

但是这么做又有一个遗憾,就是如果level2[2]中的子项有两个名称相同的,都有下级菜单,而且下级菜单内容还不一样,就会有问题,因此在设置的时候,有下级菜单的项要取不同的名称,这里要注意下。就目前这种来说,简单,好理解,也够用了。

代码实现
在代码中也用到了$.extend,用来扩展默认配置。

还有一个点要注意,在联动的时候会将实事的菜单值放入一个属性为hidden的input中,用默认逗号分割每个层级之间的值,可以很轻松的获取到联动菜单所有项的值

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插件实现多级联动菜单效果

jQuery插件实现多级联动菜单效果

以上就是为大家分享的jQuery插件实现多级联动菜单效果,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 #Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 #Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 #Javascript
You might like
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
javascript事件模型代码
2007/07/01 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
python自动安装pip
2014/04/24 Python
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python Collatz序列实现过程解析
2019/10/12 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python如何获取文件路径/目录
2020/09/22 Python
素食餐饮项目创业计划书
2014/02/02 职场文书
发展部经理职责规定
2014/02/22 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL