读源码metisMenu侧边栏插件hugh.dong

—————————————————————————————————————————————————————————

使用方法

实现效果

引入文件

//基于jquery实现

//使用bootstrap的collapse插件

//插件代码

调用方法

$(function(){$('#side-menu').metisMenu();//ul.nav#side-menu})

使用样例

<>

<>

@media(min-width:768px){.sidebar{position:absolute;width:250px;margin-top:51px;z-index:2;}}.sidebar.sidebar-search{padding:15px;}.sidebarullia.active{background-color:#eee;}.sidebarulli{background:#f8f8f8;border-bottom:#e7e7e71pxsolid;}.nav-second-levelli{border-bottom:0!important;}.nav-second-levellia{padding-left:38px;}

树形图

p.s.自定义样式用下划线表示

源码解读

调用

使用$.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");

简单版v1.0

功能

仅实现基础效果

复写代码

<>

/***Createdbyhughdon2017/8/9.*简单版-v1.0*仅实现基础折叠*/;(function($,window,document,undefined){varpluginName="metisMenu";vartoggle=true;functionPlugin(element,options){this.element=$(element);this.init();}Plugin.prototype={init:function(){var$this=this.element;//varobj=this;$this.find("li.active").has("ul").children("ul").addClass('collapsein');//初始激活的元素的后代全部展开$this.find('li').not(".active").has("ul").children("ul").addClass('collapse');//未激活的元素显示隐藏//监听点击事件$this.find("li").children("a").on("click."+pluginName,function(){//被点击的元素激活样式并展开$(this).parent('li').toggleClass('active').children("ul").collapse("toggle");if(toggle){//将其他被展开的元素闭合$(this).parent("li").siblings().removeClass("active").children("ul").collapse("hide");}});}}$.fn[pluginName]=function(options){//实例化Plugin对象,并存放在元素._proto_.metisMenu中this.data(pluginName,newPlugin(this,options));returnthis;}})(jQuery,window,document);