前言：之前發表過一篇  JS元件系列——基於Bootstrap Ace模板的選單和Tab頁效果分享（你值得擁有） ，收到很多園友的反饋，當然也包括很多詬病，因為上篇只是將功能實現了，很多細節都沒有處理，這篇博主將帶領大家一起來優化這裡的效果，使之成為一個可以在專案裡面使用的成品。

說點題外話，本來，在網際網路模式下，Tab頁+iframe的組合是不能被大多數平臺接受的，從這些年推出的一些好的產品可以看出，幾乎大家都不這麼玩，即使是一些後臺的管理模板，比如常見的AdminLTE、Ace、INSPINIA+等也都擯棄了iframe，因為iframe的壞處博主都可以說出一千條。可為什麼這裡博主還要寫這篇文章？用一句老套的話說：需求產生市場！在一些傳統的企業，系統的使用人員的使用習慣還停留在10年前，他們希望頁面上面展示的東西越多越好，並且希望頁面切換方便，他們喜歡tab頁+iframe的效果，不管你信不信，這點確實是客觀存在的！就拿博主所在的公司來說，要不要tab+iframe基本上持兩種意見，一半一半，可是客戶更加傾向使用iframe的這種操作習慣，你有何解！前段時間用Abp做了一個Erp的專案，本來Abp原始的頁面就是沒有iframe的，上線之後客戶覺得這種操作很不方便，最後硬生生的把Abp的介面改頭換面。究其原因，在網際網路+時代，大家都在大力推各種不使用iframe的效果，希望改變人們的思維模式和操作方式，但這個改變並不能一蹴而就，還需要一些時間。

系列文章

一、效果展示

原始效果

解決iframe高度自適應問題

增加上邊框

美化刪除圖示

標籤頁上面顯示選單圖示

標籤增加邊框

方角邊框

標籤顏色搭配

標籤過多時左右移動

選單選中效果

選單獨立滾動條

二、程式碼示例

1、解決高度自適應的問題

這個並不屬於Tab頁的優化範疇，而是經常有群友討論這個高度不能跟著頁面的內容自適應，博主花了點時間做的優化而已，主要的思路就是動態計算頁面內容的高度，然後給iframe的高度賦值。

首先在bootstrap-tab.js裡面定義一個方法去做高度計算和賦值

var changeFrameHeight = function (that) {
    $(that).height(document.documentElement.clientHeight - 115);
    $(that).parent(".tab-pane").height(document.documentElement.clientHeight - 130);
}

然後建立iframe的時候呼叫這個方法

content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe id="iframe_'+id+'" src="' + options.url + 
                '" width="100%" height="100%" onload="changeFrameHeight(this)" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>';

為了在瀏覽器的寬高變化時頁面的寬高也跟著變化，還需要註冊頁面的onresize事件

    window.onresize = function () {
        var target = $(".tab-content .active iframe");
        changeFrameHeight(target);
    }

這三個地方都在bootstrap-tab.js裡面更改即可。

改完之後來看看測試效果：

2、新建檔案bootstrap-tab.css，調整高度和上邊框

其實美化boostrap的tab頁面原始效果並不難，我看到群友都自己改造了，難度不大，這裡博主就給出改造思路，供大家參考。

新建檔案，然後在index.html頁面引用該樣式檔案

    <link href="Content/bootstrap/css/bootstrap-tab.css" rel="stylesheet"/>

 我們增加兩個樣式

.nav-tabs li a{
    line-height:2
}
.nav-tabs .active a{
    border-top: solid 2px #3498db !important;
}

檢視效果

是不是看上去趕緊好好看一些~~

3、美化刪除圖示

上圖中標籤頁加上上邊框之後看上去要好看一些了，可是還不夠美觀，看來看去總覺得哪個關閉的小圖示怪怪的，我們來美化一下。比如我們在boostrap-tab.js裡面將關閉按鈕換成帶圓形邊框的

將圖示i標籤的的class由原來的 glyphicon glyphicon-remove 換成 glyphicon glyphicon-remove-sign 即可，我們來看看效果：

為了更加符合使用習慣，我們增加一個滑鼠移動到圖示上面顯示紅色的效果，我們在boostrap-tab.css裡面增加如下樣式：

.nav-tabs li a .glyphicon-remove-sign:hover{
　　color:red;
　　cursor: pointer;
}

效果如下

4、標籤頁帶圖示

標籤頁裡面僅僅顯示文字和關閉的圖示給人感覺太空洞，我們增加頁面的圖示。首先首頁的標籤頁我們增加一個home圖示，在index.html增加如下i標籤：

然後其他每一個動態開啟的tab頁前面的圖示就是對應的點選左邊選單對應的圖示。首先我們在初始化選單的那個做如下更改，在sidebar-menu.js檔案改成這樣

(function ($) {
    $.fn.sidebarMenu = function (options) {
        options = $.extend({}, $.fn.sidebarMenu.defaults, options || {});
        var target = $(this);
        target.addClass('nav');
        target.addClass('nav-list');
        if (options.data) {
            init(target, options.data);
        }
        else {
            if (!options.url) return;
            $.getJSON(options.url, options.param, function (data) {
                init(target, data);
            });
        }
        var url = window.location.pathname;
        //menu = target.find("[href='" + url + "']");
        //menu.parent().addClass('active');
        //menu.parent().parentsUntil('.nav-list', 'li').addClass('active').addClass('open');
        function init(target, data) {
            $.each(data, function (i, item) {
                var li = $('<li></li>');
                var a = $('<a></a>');
                var icon = $('<i></i>');
                //icon.addClass('glyphicon');
                icon.addClass(item.icon);
                var text = $('<span></span>');
                text.addClass('menu-text').text(item.text);
                a.append(icon);
                a.append(text);
                if (item.menus&&item.menus.length>0) {
                    a.attr('href', '#');
                    a.addClass('dropdown-toggle');
                    var arrow = $('<b></b>');
                    arrow.addClass('arrow').addClass('icon-angle-down');
                    a.append(arrow);
                    li.append(a);
                    var menus = $('<ul></ul>');
                    menus.addClass('submenu');
                    init(menus, item.menus);
                    li.append(menus);
                }
                else {
                    var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\',icon:\''+ item.icon +'\'});';
                    a.attr('href', href);
                    //if (item.istab)
                    //    a.attr('href', href);
                    //else {
                    //    a.attr('href', item.url);
                    //    a.attr('title', item.text);
                    //    a.attr('target', '_blank')
                    //}
                    li.append(a);
                }
                target.append(li);
            });
        }
    }

    $.fn.sidebarMenu.defaults = {
        url: null,
        param: null,
        data: null
    };
})(jQuery);

其中有一句

var href = 'javascript:addTabs({id:\'' + item.id + '\',title: \'' + item.text + '\',close: true,url: \'' + item.url + '\',icon:\''+ item.icon +'\'});';

這裡將當前選單的圖示傳到addTabs()方法裡面，然後在addTabs()方法裡面接收這個引數。

var addTabs = function (options) {
    //可以在此處驗證session
    //var rand = Math.random().toString();
    //var id = rand.substring(rand.indexOf('.') + 1);
    debugger;
    var url = window.location.protocol + '//' + window.location.host;
    options.url = url + options.url;
    id = "tab_" + options.id;
    var active_flag = false;
    if($("#" + id)){
        active_flag = $("#" + id).hasClass('active');
    }
    $(".active").removeClass("active");
    //如果TAB不存在，建立一個新的TAB
    if (!$("#" + id)[0]) {
        //固定TAB中IFRAME高度
        mainHeight = $(document.body).height();
        //建立新TAB的title
        title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab"><i class="'+options.icon+'"></i>' + options.title;
        //是否允許關閉
        if (options.close) {
            title += ' <i class="glyphicon glyphicon-remove-sign" tabclose="' + id + '"></i>';
        }
        title += '</a></li>';
        //是否指定TAB內容
        if (options.content) {
            content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>';
        } else {//沒有內容，使用IFRAME開啟連結
            content = '<div role="tabpanel" class="tab-pane" id="' + id + '"><iframe id="iframe_'+id+'" src="' + options.url + 
                '" width="100%" height="100%" onload="changeFrameHeight(this)" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe></div>';
        }
        //加入TABS
        $(".nav-tabs").append(title);
        $(".tab-content").append(content);
    }else{
        if(active_flag){
            $("#iframe_" + id).attr('src', $("#iframe_" + id).attr('src'));
        }
    }
    //啟用TAB
    $("#tab_" + id).addClass('active');
    $("#" + id).addClass("active");
};
var changeFrameHeight = function (that) {
    $(that).height(document.documentElement.clientHeight - 115);
    $(that).parent(".tab-pane").height(document.documentElement.clientHeight - 130);
}
var closeTab = function (id) {
    //如果關閉的是當前啟用的TAB，啟用他的前一個TAB
    if ($("li.active").attr('id') == "tab_" + id) {
        $("#tab_" + id).prev().addClass('active');
        $("#" + id).prev().addClass('active');
    }
    //關閉TAB
    $("#tab_" + id).remove();
    $("#" + id).remove();
};
$(function () {
    $("[addtabs]").click(function () {
        addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true });
    });

    $(".nav-tabs").on("click", "[tabclose]", function (e) {
        id = $(this).attr("tabclose");
        closeTab(id);
    });

    window.onresize = function () {
        var target = $(".tab-content .active iframe");
        changeFrameHeight(target);
    }
});

其中有一句

title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab"><i class="'+options.icon+'"></i>' + options.title;

然後寫一個樣式調整標籤頁圖示和標題的距離，我們在bootstrap-tab.css裡面增加如下樣式：

.nav-tabs li a i:first-child{
    margin-right: 3px;
}

最終得到效果如下：

當然，有可能你覺得加上這個之後tab頁顯得很擁擠，你也可以不加，根據自己的喜好來進行美化 

5、標籤頁增加邊框

經過上面三步驟的美化，我們的標籤頁已經好看了許多。如果你對介面要求不高，其實也夠了，但是博主覺得還可以繼續美化呢~

比如我們給標籤也增加一個邊框，使每一個標籤頁看上去更加像一個獨立的整體。我們調整.nav-tabs li a這個樣式為

.nav-tabs li a{
    line-height:2;
    border:1px #ddd solid;
    margin-right: -1px;
    color: #999;
}

然後增加

.nav-tabs{
    background: #fafafa;
}

這樣看到的效果：

當然，有人喜歡將邊框的圓角去掉，你也可以在.nav-tabs li a裡面增加 border-radius:0; 得到的效果

博主覺得使用圓角也不錯啊，反正這個取決於個人喜好！

6、標籤頁顏色搭配

以上效果基本夠用，在專案裡面使用起來沒有太大的問題，但博主還想將其優化下。比如我們做如下樣式調整：

.nav-tabs{
    background: #fafafa;
    border-bottom: 3px #3498db solid;
}

.nav-tabs li a{
    line-height:2;
    border:1px #ddd solid;
    margin-right: -1px;
    color: #999;
    border-radius: 0;
}
.nav-tabs li a .glyphicon-remove-sign:hover{
    color:red;
    cursor: pointer;
}
.nav-tabs li a i:first-child{
    margin-right: 3px;
}
.nav-tabs .active a{
    border-top: solid 2px #3498db !important;
    background: #3498db !important;
    color:#fff !important;
}

可能這裡的顏色搭配並不協調，但至少看上去更加perfect一點吧。

 7、標籤頁寬度超限處理

到上面為止Tab頁的樣式已經可以了，可是還有一個最大的問題沒有解決，就是當所有tab頁的寬度的和超過瀏覽器的寬度限制時，就會出現tab的換行，看上去非常“噁心”。不信你多開啟一些tab頁試試。這裡博主花了兩天時間寫了一套可行的樣式方案，來一睹風采吧：

 實現思路其實不難，主要就是介面樣式的調整確實非常話時間。下面來看一看實現步驟

首先介面上面在標籤頁的兩邊增加向左移、向右移的圖示

　　　　　　　　　　　　　　　　<ul class="nav-my-tab">
                                <li class="leftbackward"><a href="#" >
                                    <i class="icon-backward"></i></a>
                                </li>
                                <li class="middletab">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li class="active"><a href="#Index" role="tab" data-toggle="tab">
                                            <i class="icon-home"></i>系統首頁</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="rightforward"><a href="#">
                                        <i class="icon-forward"></i></a>
                                 </li>
                            </ul>

然後就是這兩個圖示以及中間tab頁的樣式

.nav-my-tab{
    padding-left: 0px;
    margin-bottom: 0px;
}
.nav-my-tab .middletab{
    height: 36px;
    overflow: hidden;
    border-bottom: 3px #3498db solid;
    position: relative;
    background: #fafafa;
}
.nav-my-tab li{
    list-style-type: none;
}
.nav-my-tab li a{
    padding:5px 10px;
}
.nav-my-tab .leftbackward{
    float: left;
    background: #fff;
    padding-top: 7px;
    border-top: 1px #ddd solid;
    height:36px;
    border-bottom: 3px #3498db solid;
}
.nav-my-tab .leftbackward a{
    border-left-width: 0px;
    color: #999;
    padding-top: 9px;
    padding-bottom: 8px;
    margin-right: -1px;
}
.nav-my-tab .leftbackward a:hover,.nav-my-tab .leftbackward a:focus{
    text-decoration: none;
    background: #ddd;
}

.nav-my-tab .rightforward{
    float:right;
    position: relative;
    line-height: 2.6;
    background: #fff;
    border-top: 1px #ddd solid;
    border-bottom: 3px #3498db solid;
    
}
.nav-my-tab .rightforward a{
    width: 35.5px;
    line-height: 2;
    color: #999;
    height: 35px;
    padding: 8px 10px;
    padding-left: 13px;
    border-left: 1px #ddd solid;
}
.nav-my-tab .rightforward a:hover,.nav-my-tab .rightforward a:focus{
    text-decoration: none;
    background: #ddd;
}

最後就是左移、右移的按鈕事件

$(function () {
    $("[addtabs]").click(function () {
        addTabs({ id: $(this).attr("id"), title: $(this).attr('title'), close: true });
    });

    $(".nav-tabs").on("click", "[tabclose]", function (e) {
        id = $(this).attr("tabclose");
        closeTab(id);
    });

    $('.nav-my-tab .middletab').width($('.nav-my-tab .middletab').width()-37);
    //固定左邊選單的高度
    $('#sidebar').height($(window).height() - 80);
    window.onresize = function () {
        var target = $(".tab-content .active iframe");
        changeFrameHeight(target);
    }

    //tab頁向左向右移動
    $('.nav-my-tab .leftbackward').click(function(){
        var strLeft=$('.nav-my-tab .middletab .nav-tabs').css('left');
        var iLeft = parseInt(strLeft.replace('px', ''));
        if(iLeft>=0){
            return;
        }
        else{
            debugger;
            var totalWidth=0;
            var lis = $(".nav-tabs li");
            for(var i=0;i<lis.length;i++){
                var item = lis[i];
                totalWidth-= $(item).width();
                if(iLeft>totalWidth){
                    iLeft+=$(item).width();
                    break;
                }
            };
            if(iLeft>0){
                iLeft=0;
            }
            $(".nav-my-tab .middletab .nav-tabs").animate({left:iLeft + 'px'});
        }
    });
    $('.nav-my-tab .rightforward').click(function(){
            var strLeft=$('.nav-my-tab .middletab .nav-tabs').css('left');
            var iLeft = parseInt(strLeft.replace('px', ''));
            var totalWidth=0;
            $.each($(".nav-tabs li"),function(key, item){
                   totalWidth+= $(item).width();
            });
            var tabsWidth = $(".nav-my-tab .middletab").width();
            if(totalWidth>tabsWidth){
                debugger;
                if(totalWidth-tabsWidth<=Math.abs(iLeft)){
                    return;
                }
                var lis = $(".nav-tabs li");
                totalWidth=0;
                for(var i=0;i<lis.length;i++){
                    var item = lis[i];
                    totalWidth-= $(item).width();
                    if(iLeft>totalWidth){
                        iLeft-=$(item).width();
                        break;
                    }
                };
                $(".nav-my-tab .middletab .nav-tabs").animate({left:iLeft + 'px'});
            }            
        });
});

主要原理就是通過計算所有tab頁的寬度的和已經ul當前的左移量來判斷是否需要移動，以及每次移動多少。這裡的移動是通過css樣式的left屬性去控制的。如果你理解了這個原理，其實實現起來並不算太複雜，關鍵的問題還是頁面的樣式和js的配置使用。

8、左邊選單的選中效果和固定高度效果

 這部分其實不屬於Tab頁的優化範疇，但既然要把這個做好，順帶也把這個優化了下。

首先在sidebar-menu.js裡面增加如下id

然後在addTabs()方法的最下面加這兩句即可

    //啟用左邊選單
    $('#menu li').removeClass('active');
    $('#li_'+options.id).addClass('active');

得到效果

還有一個就是左邊選單的滾動條，當左邊選單的數量多了以後，每次展開都會導致整個頁面出現滾動條，介面非常不友好，博主打算給左邊選單部分單獨加上滾動條，用來控制選單的滾動。

增加如下樣式

#sidebar{
    overflow-x: hidden;
    overflow-y: auto;
}

這裡的sidebar是左邊選單的div容器。

然後在頁面初始化完成的時候給這個div固定一個動態高度。

$(function () {
    //固定左邊選單的高度
    $('#sidebar').height($(window).height() - 80);
});

效果如下

三、總結

又到了做總結的時間。本篇主要帶領大家簡單優化了下Tab頁的使用效果，使之成為一個可以在正式專案中使用的成品，如果你有興趣可以試試，歡迎交流！需要原始碼或者技術支援，可以右邊隨意 打賞 然後聯絡博主。

歡迎各位轉載，但是未經作者本人同意，轉載文章之後必須在文章頁面明顯位置給出作者和原文連線，否則保留追究法律責任的權利

PS：真心不想跟有些人辯，最近有部分收到我原始碼的同志說我故意刪除這裡的部分程式碼。我想說這種人肯定沒寫過部落格，或者不經常寫部落格，寫部落格都要先本地寫好，然後貼上來部分程式碼，然後本地再修改優化，本文字來就是一個循序漸進的優化過程，有時忘了將修改過的程式碼更新上來這種再正常不過了，所以請你搞清楚了狀況再來發表言論！！！憑什麼說原始碼裡面和這裡貼的有些不一致就說博主故意刪除程式碼呢！！！長腦子沒！！！你是覺得我靠這個打賞來發家致富麼？