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. 调用方法

<script type="text/javascript">
$(function() {
    $('#side-menu').metisMenu(); // ul.nav#side-menu
})
</script>
3. 侧边栏导航主体
<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav" id="side-menu">
                <li class="sidebar-search">
                    <div class="input-group custom-search-form">
                        <input type="text" class="form-control" placeholder="Search...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                    </div>
                </li>
                <li>
                    <a href=""><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span
                                class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="">Flot Charts</a>
                        </li>
                        <li>
                            <a href="">Morris.js Charts</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href=""><i class="fa fa-table fa-fw"></i> Tables</a>
                </li>
                <li>
                    <a href=""><i class="fa fa-edit fa-fw"></i> Forms</a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span
                                class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="">Panels and Wells</a>
                        </li>
                        <li>
                            <a href="">Buttons</a>
                        </li>
                        <li>
                            <a href="">Notifications</a>
                        </li>
                        <li>
                            <a href="">Typography</a>
                        </li>
                        <li>
                            <a href=""> Icons</a>
                        </li>
                        <li>
                            <a href="">Grid</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span
                                class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a href="#">Second Level Item</a>
                        </li>
                        <li>
                            <a href="#">Second Level Item</a>
                        </li>
                        <li>
                            <a href="#">Third Level <span class="fa arrow"></span></a>
                            <ul class="nav nav-third-level">
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                                <li>
                                    <a href="#">Third Level Item</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active">
                    <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span
                                class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a class="active" href="#">Blank Page</a>
                        </li>
                        <li>
                            <a href="#">Login Page</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

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插件来实现;

通过检测<li.active>来标识当前页对应的列表,在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. 树形图