基于Bootstrap的標簽頁組件及bootstrap-tab使用說明

更新時間：2017年07月25日 09:58:21 作者：推敲

這篇文章主要介紹了基于Bootstrap的標簽頁組件及bootstrap-tab使用說明,需要的朋友可以參考下

bootstrap-tab

bootstrap-tab

bootstrap-tab組件是對原生的bootstrap-tab組件的封裝，方便開發(fā)者更方便地使用，主要包含以下功能：

tab頁初始化
關閉tab頁
新增tab
顯示tab頁
獲取tab頁ID

使用

Step1 ：引入樣式

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" rel="external nofollow" >
<!--bootstrap-tab樣式-->
<link rel="stylesheet" href="../css/bootstrap-tab.css" rel="external nofollow" >

Step2：引入腳本

<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="../js/bootstrap-tab.js"></script>

Step3：使用

<div id="tabContainer"></div>
<script>
 $("#tabContainer").tabs({
 data: [{
  id: 'home',
  text: '百度一下',
  url: "tab_first.html",
  closeable: true
 }, {
  id: 'admineap',
  text: 'AdminEAP',
  url: "tab_second.html"
 }, {
  id: 'edit',
  text: '編輯人員',
  url: "tab_content.html",
  closeable: true
 }],
 showIndex: 1,
 loadAll: false
 })
 $("#tabContainer").data("tabs").addTab({id: 'test', text: 'addTab', closeable: true, url: 'tab_content.html'})
</script>

參數(shù)和方法說明

參數(shù)說明

參數(shù)名稱	默認值	可選值	說明
data			tab頁數(shù)據(jù)來源（對象列表），包含id,text,url,closeable屬性
id			必須，單個tab的id
text			必須，單個tab頁的標題
url			必須，單個tab頁的內(nèi)容url
closeable	false	true,false	單個tab頁是否可關閉
showIndex	0		默認顯示頁的索引
loadAll	true	true,false	true=一次全部加在頁面,false=只加在showIndex指定的頁面，其他點擊時加載，提高響應速度

方法說明

方法名稱	參數(shù)	參數(shù)說明	方法說明
init			tab組件初始化入口方法
builder	data	tab數(shù)據(jù)	構建tab頁的主方法
loadData			加載tab頁的內(nèi)容，根據(jù)loadAll即時加載或者點擊時加載
addTab	obj	單個tab的數(shù)據(jù)	增加一個tab頁
showTab	tabId	tab的id	根據(jù)id顯示tab頁
getCurrentTabId			獲取當前活動tab頁的ID