LTE Admin 模板实现sidebar菜单联动tabs页签

另一篇：ACE Admin 模板实现sidebar菜单联动tabs页签（你值得拥有）

说在前面的话：
        该组件主要使用Admin LTE 实现Tab页联动sidebar。实现的目标是：
            1、不改动Admin LTE的模板框架（Bootstrap v3.4.1）；
            2、tab页的加载默认使用ajax的get方式，详见(bootstrap.addtabs.js)；不用iframe；
            3、sidebar标题与tab页的联动；
            4、tab标签页的动态滚动（左滚、右滚，左右滚动一屏）;
            5、右键菜单（关闭左侧、右侧、其他，全部关闭，刷新）；
            6、全屏

效果展示

#### 修改操作：

index.html中删除<div class="content-wrapper">包含的代码块，并添加了如下代码

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" id="content-wrapper">
    <!-- nav tabs -->
    <div class="content-tabs">
        <button class="roll-nav roll-left tabLeft" role="rollleft">
            <a href="javascript:void(0);" >
                <i class="glyphicon glyphicon-fast-backward"></i>
            </a>
        </button>
        <nav class="page-tabs menuTabs tab-ui-menu" id="tab-menu">
            <ul class="page-tabs-content nav nav-tabs" style="margin-left: 0px;">
                <li role="presentation" id="tab_tab_home1" aria-url="example/ajax/mailbox.txt" aria-ajax="false" class="menu_tab active">
                    <a href="#tab_home1" aria-controls="tab_home1" role="tab" data-toggle="tab">欢迎页</a>
                    <i class="close-tab glyphicon glyphicon-remove" style="display: none;"></i>
                </li>
            </ul>
        </nav>
        <button class="roll-nav roll-right tabRight" role="roleright">
            <a href="javascript:void(0);">
                <i class="glyphicon glyphicon-fast-forward"></i>
            </a>
        </button>
        <button class="roll-nav roll-right fullscreen" role = "fullscreen">
            <i class="glyphicon glyphicon-fullscreen"></i>
        </button>
    </div>
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane content active" id="tab_home1" role="tabpanel">
            I'm a homepage.
        </div>
    </div>
</div>

#### 将sidebar部分代码<ul class="sidebar-menu" data-widget="tree">
下`li`中的<a href="index.html">的`*.html`替换成
<a data-addtab="dashboardv1" data-url="index.txt">
其中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"

其中的data-url届时换成后台请求地址即可</font>#### 删除页面无需引用的js

<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>

#### 引入bootstrap.addtabs.css

<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Bootstrap addtabs-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.addtabs.css" />

#### 引入bootstrap.addtabs.js同时修改bootstrap.min.js为bootstrap.js

<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- Bootstrap addtabs -->
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.addtabs.js" ></script>

#### bootstrap.js中添加tab选项卡滚动代码

var clickHandler = function(e) {
    e.preventDefault()
    Plugin.call($(this), 'show')

    // 新增滚动功能
    scrollToTab($(this).closest("li.active"))
}

//计算多个jq对象的宽度和
var calSumWidth = function(element) {
    var width = 0;
    $(element).each(function() {
        width += $(this).outerWidth(true);
    });
    return width;
};
//滚动到指定选项卡
var scrollToTab = function(element) {
    var marginLeftVal = calSumWidth($(element).prevAll()), //前面所有tab的总宽度
        marginRightVal = calSumWidth($(element).nextAll()); //后面所有tab的总宽度
    var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
    var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
    var scrollVal = 0;
    if($(".page-tabs-content").outerWidth() < visibleWidth) {
        scrollVal = 0;
    } else if(marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
        if((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
            scrollVal = marginLeftVal;
            var tabElement = element;
            while((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                scrollVal -= $(tabElement).prev().outerWidth();
                tabElement = $(tabElement).prev();
            }
        }
    } else if(marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
        scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
    }
    //执行动画
    $('.page-tabs-content').animate({
        marginLeft: 0 - scrollVal + 'px'
    }, "fast");
};

#### 相关源码：希望各位看官达人多多支持
（9.99元—微信打赏，一年365天）

（打赏后评论留言或者备注留言——已支持，你的邮箱地址，模板名称，

例如：已支持，xxxx@qq.com，lte，将及时发送源码）