说在前面的话：

    该组件主要使用ace admin实现Tab页联动sidebar。实现的目标是：
            1、不改动ace admin的模板框架（Bootstrap v3.3.6）；
            2、tab页的加载默认使用ajax，get方式，详见(bootstrap.addtabs.js)；不用iframe；
            3、sidebar实现蓝色图标点击选中效果；
            4、sidebar标题与tab页的联动，tab页与sidebar的联动可实现；
            5、tab标签页的动态滚动（左滚、右滚，左右滚动一屏）;
            6、右键菜单（关闭左侧、右侧、其他，全部关闭，刷新），全屏

一、效果展示

result

right menu

loarbar

二、代码部分

新增JS文件：bootstrap.addtabs.js，bootstrap.js（压缩后的文件名为bootstrap.min.js）

新增CSS文件：bootstrap.addtabs.css

index.html引入对应JS、CSS文件

<!--[if lte IE 9]>
<link rel="stylesheet" href="assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
<![endif]-->
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<!-- 这里引入bootstrap.addtabs.css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.addtabs.css"/>

 

<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<!-- 这里原先引入的是压缩后的bootstrap.min.js，修改了源码，引入未压缩的 -->
<script src="assets/js/bootstrap.js"></script>
<!-- 引入bootstrap.addtabs.js -->
<script type="text/javascript" src="assets/js/bootstrap.addtabs.js" ></script>

 

index.html页面结构未变，更改页面元素的样式，其中sidebar部分修改微小，大致如下
<ul class="submenu"> 下的
<a href="tables.html"> 改为
<a class="list-group-item" data-addtab="jqgrid" data-url="mailbox.txt">

 1 <li class="">
 2         <a href="#" class="dropdown-toggle">
 3         <i class="menu-icon fa fa-list"></i>
 4         <span class="menu-text"> Tables </span>
 5  
 6         <b class="arrow fa fa-angle-down"></b>
 7     </a>
 8      
 9         <b class="arrow"></b>
10      
11         <ul class="submenu">
12             <li class="">
13                 <a class="list-group-item" data-addtab="simdyn" data-url="mailbox.txt">
14                     <i class="menu-icon fa fa-caret-right"></i>
15                     Simple &amp; Dynamic
16                 </a>
17      
18                 <b class="arrow"></b>
19             </li>
20      
21             <li class="">
22                 <a class="list-group-item" data-addtab="jqgrid" data-url="mailbox.txt">
23                     <i class="menu-icon fa fa-caret-right"></i>
24                     jqGrid plugin
25                 </a>
26      
27                 <b class="arrow"></b>
28             </li>
29         </ul>
30     </li>

 其中a标签还可以添加如下属性，分别对应下面几种情况

<a class="list-group-item" data-addtab="simdyn" data-url="mailbox.txt">

    // 指定tab页内容
    data-content="Customize the content"
    // 使用ajax
    data-ajax="true"
    // 设置tab页签标题
    data-title="Customize the title"
    // 指定在哪个tab页内容中显示
    data-target="#tabs2"

 <div class="main-content-inner">标签的代码替换成

 1 　　<div class="main-content">
 2       　　<div class="main-content-inner content-wrapper" id="content-wrapper">
 3             <!-- nav tabs -->
 4             <div class="content-tabs">
 5                 <button class="roll-nav roll-left tabLeft" role="rollleft">
 6                     <a href="javascript:void(0);" >
 7                     <i class="glyphicon glyphicon-fast-backward"></i>
 8                 </a>
 9                 </button>
10             <nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu">
11                 <ul class="page-tabs-content nav nav-tabs" style="margin-left: 0px;">
12                 <li role="presentation" id="tab_tab_home1" aria-url="example/ajax/mailbox.txt" aria-ajax="false" class="menu_tab active">
13                     <a href="#tab_home1" aria-controls="tab_home1" role="tab" data-toggle="tab">欢迎页</a>
14                 <i class="close-tab glyphicon glyphicon-remove" style="display: none;"></i>
15                 </li>
16             </ul>
17             </nav>
18             <button class="roll-nav roll-right tabRight" role="roleright">
19                 <a href="javascript:void(0);">
20                 <i class="glyphicon glyphicon-fast-forward"></i>
21             </a>
22             </button>
23             <button class="roll-nav roll-right fullscreen" role = "fullscreen">
24             <i class="glyphicon glyphicon-fullscreen"></i>
25             </button>
26             </div>
27             <!-- Tab panes -->
28             <div class="tab-content">
29                 <div class="tab-pane content active" id="tab_home1" role="tabpanel">
30                     I'm a homepage.
31                 </div>
32             </div>
33         </div>
34     </div>

 

配合sidebar点击事件即可产生效果展示中效果

　　
// 给nav-list列表中有data-addtab属性的a标签绑定点击事件
    $(settings.monitor).on('click', '[data-addtab]', function() {
     
        // sidebar蓝色图标选中效果代码
        $('.nav-list').find('.active').removeClass('active');
        $(this).parents("li").addClass('active').siblings('li').removeClass('active');
        $(this).closest("li").addClass('active').siblings().removeClass('active');
     
        _click($(this));
        _scrollToTab(true, (this));
    });

 

三、滚动代码（向左边滚动）

_scrollTabLeft = function() {
        var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
        var tabOuterWidth = _calSumWidth($(".content-tabs").children().not(".menuTabs"));
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        var scrollVal = 0;
        if($(".page-tabs-content").width() < visibleWidth) {
            return false;
        } else {
            var tabElement = $(".menu_tab:first");
            var offsetVal = 0;
            while((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) {
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            offsetVal = 0;
            if(_calSumWidth($(tabElement).prevAll()) > visibleWidth) {
                while((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                    offsetVal += $(tabElement).outerWidth(true);
                    tabElement = $(tabElement).prev();
                }
                scrollVal = _calSumWidth($(tabElement).prevAll());
            }
        }
        $('.page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    };

 

四、右键代码（部分）

//关闭右侧
    $('ul.rightMenu a[data-right=remove-right]').on('click', function() {
        var tab_id = $(this).parent('ul').attr("aria-controls");
        $('#tab_' + tab_id).nextUntil().each(function() {
            var id = $(this).attr('id');
            if(id && id != 'tab_' + tab_id) {
                $.addtabs.close({
                    "id": $(this).children('a').attr('aria-controls')
                });
            }
        });
        _scrollToTab(false, $('#tab_' + tab_id))
        // $.addtabs.drop();
    });
     
    //关闭全部
    $('ul.rightMenu a[data-right=remove-all]').on('click', function() {
        var tab_id = $(this).parent('ul').attr("aria-controls");
        $.addtabs.closeAll(null);
    });
     
    $.addtabs.closeAll = function(target) {
        if(typeof target == 'string') {
            target = $('body').find(target);
        } else {
            target = $('body').find(settings.target)
        }
     
        $.each(target.find('li[id]'), function() {
            var id = $(this).children('a').attr('aria-controls');
            $("#tab_" + id).remove();
            $("#" + id).remove();
        });
    };

五、Ace Admin 简介

Ace Admin官网 http://ace.jeka.by/

Ace Admin Git https://github.com/bopoda/ace

（1）目录结构：简洁明了
framework

（2）index.html入口页面 index.html

（3）主要布局
layout

1）Navbar导航栏
2）Sidebar侧边栏
3）Breadcrumbs面包屑（在“主要内容”中）
4）Page conten页面内容（在“主要内容”中）
5）Settings box设置框（在“页面内容”内）
6) Footer

六、相关源码：希望各位看官达人多多支持

（9.99元—微信打赏，一年365天）

（打赏后留言，例如："已支持，xxxx@qq.com，ace-admin"，将及时发送源码）