jquery.metisMenu.js插件

metisMenu是一个jQuery的导航栏插件,使用该插件可以定义导航栏的二级甚至三级导航菜单,并能实现菜单的折叠和展开等操作,将节省我们的开发时间,提高开发效率。 

1. 准备工作:引入文件

  • bootstrap.min.js
  • bootstrap.min.css
  • metisMenu.min.js //插件代码
  • metisMenu.min.css //可选
  • font-awesome.min.css
  • jquery.min.js

2. 调用方法


3. 侧边栏导航主体

3. 实现思路

  • 初始化

    获取当前激活的标签,将该标签的内容显示(如果没有子标签则不显示)

    未激活的标签,所有子列表隐藏

  • 点击事件(通过boostrap的collapse插件)

    当前点击的标签获取激活样式,子列表展开

    除点击标签之外的其他标签移除激活样式,并闭合

源码解读

jquery.metisMenu.js

  • 调用

使用$.fn.extend(object)的方式为jquery类添加成员方法,功能封装在原型中,能够全局调用;

通过$("#side-menu")生成的jquery类实例来调用该方法;

  • 初始配置

全局定义插件名称pluginName,定义对象defaults存放toggle(展开/闭合)与doubleTapToGo(双击事件)的开关;

  • 样式

使用font-awesome来扩展侧边栏图标和展开标识(三角),引入font-awesome.css后只需要通过i.fa.fa-***来调用就可以了

基础布局通过bootstrap类实现,详细分支情况见属性图

  • 初始化展开

借助bootstrap内置的collapse插件来实现;

通过检测来标识当前页对应的列表,在metisMenu.js中检查是否需要展开的列表;

判断激活的标签栏是否有子列表,如果有则添加.collapse.in类(bootstrap.css),实际为添加样式{display:block};

未被激活的标签栏如果有子列表则添加.collapse类(boostrap.css),{display:none};

  • 监听点击事件

监听方法借助bootstrap的collapse插件;

绑定事件时需要遵循collapse插件规则.on("click"+"."+pluginName,function(e){});

为点击的标签栏添加激活样式.active,如果有子列表则展开/关闭,使用collapse插件方法.collapse("toggle");

闭合其他所有有子列表的标签栏,使用.collapse("hide");

4. 树形图

jquery.metisMenu.js插件_第1张图片

你可能感兴趣的:(js插件)