使用Jquery外掛bTabs實現多頁籤開啟效果

官網地址：點選這裡進入官網

資源匯入

<link rel="stylesheet" href="b.tabs.css" type="text/css">
<!-- 外掛核心指令碼 -->
<script type="text/javascript" src="b.tabs.js" ></script>
<!-- 外掛拖動效果指令碼 -->
<script type="text/javascrpt"  src="jquery-ui.min.js"></script>
 

HTML程式碼

<!-- 選單導航，非必須，具體使用時更換為具體的管件 -->
<div class="span2">
    <div class="well menuSideBar" style="padding: 8px 0px;">
        <ul class="nav nav-list" id="menuSideBar">
            <li class="nav-header">導航選單</li>
            <li class="divider"></li>
            <li mid="tab1" funurl="${webroot}demo/manage/tabsPage1"><a tabindex="-1" href="javascript:void(0);">頁面1</a></li>
            <li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a tabindex="-1" href="javascript:void(0);">頁面2</a></li>
            <li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a tabindex="-1" href="javascript:void(0);">頁面3</a></li>
        </ul>
    </div>
</div>
<!-- 標籤頁區域 -->
<div class="span10" id="mainFrameTabs">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <!-- 設定預設的首頁標籤頁，設定noclose樣式，則不會被關閉 -->
        <li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首頁</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <!-- 預設標籤頁（首頁）的內容區域 -->
        <div class="tab-pane active" id="bTabs_navTabsMainPage">
            <div class="page-header">
                <h2 style="font-size: 31.5px;text-align: center;font-weight: normal;">歡迎使用</h2>
            </div>
            <div style="text-align: center;font-size: 20px;line-height: 20px;">
            Welcome to use bTabs plugin!
            </div>
        </div>
    </div>

</div>
 

Javascript初始化外掛程式碼

//導航區域專案點選增加標籤頁處理
//僅演示功能
$('a',$('#menuSideBar')).on('click', function(e) {
    e.stopPropagation();
    var li = $(this).closest('li');
    var menuId = $(li).attr('mid');
    var url = $(li).attr('funurl');
    var title = $(this).text();
    //校驗登入是否超時，通常使用ajax訪問服務端測試登入是否超時
    //若頁面端已有超時自動跳轉的處理，則不需要設定該回調
    var checkLogin = function(){
        ....
    };
    $('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin);
});

//外掛的初始化
$('#mainFrameTabs').bTabs({
    //登入介面URL，用於登入超時後的跳轉
    'loginUrl' : 'http://xxx.com/login',
    //用於初始化主框架的寬度高度等，另外會在視窗尺寸發生改變的時候，也自動進行調整
    'resize' : function(){
        //這裡只是個樣例，具體的情況需要計算
        $('#mainFrameTabs').height(100);
    }
});
 

官方使用效果