LTE 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");
};

#### 相關源碼：希望各位看官達人多多支持
（3.65元——微信打賞，一年365天）

（打賞後留言，將及時發送源碼；例如：已支持，[email protected]，lte）