<!-- Multi Tabs -->
<link rel="stylesheet" href="plugins/bootstrap-multitabs/css/style.css">

<!-- Multi Tabs -->
<script src="plugins/bootstrap-multitabs/js/multitabs.js"></script>

<script>
    $('.content-wrapper').multitabs();
</script>

<a class="multitabs" href="pages/index-ajax-2.html">ajax INFO Tab 2</a>

<script>
    $('.content-wrapper').multitabs({
        showHash : true,                            //当值为true时，显示URL的hash，避免误按F5或者刷新的页面丢失，不过需要注意URL栏参数的泄露。
        showClose : false,                          //当值为false，仅在鼠标悬浮时显示关闭按钮。true时一直显示
        fixed : false,                              //固定标签头列表
        layout : 'default',                         //有两种模式，'default', 'classic'(所有隐藏tab都在下拉菜单里) 和 'simple'
        style : 'nav-tabs',                         //可以为nav-tabs 或 nav-pills
        link : '.multitabs',                        //触发multitabs的selector text，注意需要有".","#"等
        iframe : false,                             //iframe模式的总局设置。当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
        class : '',                                 //主框架的class
        content : 'info',                           //此处可以指定标签页类型名称，一般不需要修改。
        init : [                                    //需要在初始加载的tab
            {                                       
                content :'',                        //标签页的类型，有 main | info | editor
                title : '',                         //标题（可选），没有则显示网址
                url : ''                            //链接，如为外链，强制为info页
            }, 
            {    ......    },                       //依次添加需要的页面
            {    ......    },
        ],       
        navBar : {
            class : '',                             //为navBar添加class
            maxTabs : 15,                           //最多tab数量。（main和editor不计算在内)
            maxTabTitleLength : 25,                 //tab标题的最大长度
            backgroundColor : '#f5f5f5',            //默认nav-bar 背景颜色
        },
        ajaxTabPane : {
            class : '',                             //为ajax tab-pane 添加class
        },
        iframeTabPane : {
            class : '',                             //为iframe tab-pane 添加class
            otherHeight : 0                         //其他高度，iframe需要剔除的高度，如footer
        },
        language : {                                //语言配置
            navBar : {
                title : 'Tab',                                  //默认的标签页名称
                dropdown : '<i class="fa fa-bars"></i>',                              //标签栏的下拉菜单名称
                showActivedTab : 'Show Activated Tab',          //下拉菜单的显示激活页面
                closeAllTabs : 'Close All Tabs',                //下拉菜单的关闭所有页面
                closeOtherTabs : 'Close Other Tabs',            //下拉菜单的关闭其他页面
            },
            editorUnsave: {
                colse : 'Your data is not save, are you sure to lose it?',   //关闭未保存editor标签页的警示
                cover : 'Can not cover Editor without saving the old one!'   //覆盖未保存editor标签页的警示
            }
        },
        ajaxSuccess : function (htmlCallBack) {
            //自行修改 success 的 html 后返回
            return htmlCallBack;
        },
        ajaxError : function (htmlCallBack) {
            //自行修改 error 的 html 后返回
            return htmlCallBack;
        }
    });
</script>

    <style type="text/css">
        body,
        body.full-height-layout .wrapper,
        html{
            height: 100%;
        }
        body.full-height-layout .content-wrapper{           /*使用multitabs的wrapper*/
            height: calc(100% - 140px)                      /*减去网页header和footer的高度，AdminLTE的为140px*/
        }
    </style>