官網(wǎng)地址：點擊這里進入官網(wǎng)

資源導(dǎo)入

<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代碼?

<!-- 菜單導(dǎo)航，非必須，具體使用時更換為具體的管件 --> <div class="span2"><div class="well menuSideBar" style="padding: 8px 0px;"><ul class="nav nav-list" id="menuSideBar"><li class="nav-header">導(dǎo)航菜單</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> <!-- 標(biāo)簽頁區(qū)域 --> <div class="span10" id="mainFrameTabs"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><!-- 設(shè)置默認的首頁標(biāo)簽頁，設(shè)置noclose樣式，則不會被關(guān)閉 --><li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首頁</a></li></ul><!-- Tab panes --><div class="tab-content"><!-- 默認標(biāo)簽頁（首頁）的內(nèi)容區(qū)域 --><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初始化插件代碼?

//導(dǎo)航區(qū)域項目點擊增加標(biāo)簽頁處理 //僅演示功能 $('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訪問服務(wù)端測試登錄是否超時//若頁面端已有超時自動跳轉(zhuǎn)的處理，則不需要設(shè)置該回調(diào)var checkLogin = function(){....};$('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin); });//插件的初始化 $('#mainFrameTabs').bTabs({//登錄界面URL，用于登錄超時后的跳轉(zhuǎn)'loginUrl' : 'http://xxx.com/login',//用于初始化主框架的寬度高度等，另外會在窗口尺寸發(fā)生改變的時候，也自動進行調(diào)整'resize' : function(){//這里只是個樣例，具體的情況需要計算$('#mainFrameTabs').height(100);} });

官方使用效果

總結(jié)

以上是生活随笔為你收集整理的使用Jquery插件bTabs实现多页签打开效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。