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

資源導(dǎo)入

<link rel="stylesheet" href="b.tabs.css" type="text/css"> <!-- 插件核心腳本 --> <script type="text/javascript" src="b.tabs.js" ></script> <!-- 插件拖動(dòng)效果腳本 --> <script type="text/javascrpt" src="jquery-ui.min.js"></script>

HTML代碼?

<!-- 菜單導(dǎo)航，非必須，具體使用時(shí)更換為具體的管件 --> <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);">頁(yè)面1</a></li><li mid="tab2" funurl="${webroot}demo/manage/tabsPage2"><a tabindex="-1" href="javascript:void(0);">頁(yè)面2</a></li><li mid="tab3" funurl="${webroot}demo/manage/tabsPage3"><a tabindex="-1" href="javascript:void(0);">頁(yè)面3</a></li></ul></div> </div> <!-- 標(biāo)簽頁(yè)區(qū)域 --> <div class="span10" id="mainFrameTabs"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><!-- 設(shè)置默認(rèn)的首頁(yè)標(biāo)簽頁(yè)，設(shè)置noclose樣式，則不會(huì)被關(guān)閉 --><li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首頁(yè)</a></li></ul><!-- Tab panes --><div class="tab-content"><!-- 默認(rèn)標(biāo)簽頁(yè)（首頁(yè)）的內(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ū)域項(xiàng)目點(diǎn)擊增加標(biāo)簽頁(yè)處理 //僅演示功能 $('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();//校驗(yàn)登錄是否超時(shí)，通常使用ajax訪問(wèn)服務(wù)端測(cè)試登錄是否超時(shí)//若頁(yè)面端已有超時(shí)自動(dòng)跳轉(zhuǎn)的處理，則不需要設(shè)置該回調(diào)var checkLogin = function(){....};$('#mainFrameTabs').bTabsAdd(menuId,title,url,checkLogin); });//插件的初始化 $('#mainFrameTabs').bTabs({//登錄界面URL，用于登錄超時(shí)后的跳轉(zhuǎn)'loginUrl' : 'http://xxx.com/login',//用于初始化主框架的寬度高度等，另外會(huì)在窗口尺寸發(fā)生改變的時(shí)候，也自動(dòng)進(jìn)行調(diào)整'resize' : function(){//這里只是個(gè)樣例，具體的情況需要計(jì)算$('#mainFrameTabs').height(100);} });

官方使用效果

總結(jié)

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

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