基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:34:16

基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明

基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明:bootstrap-tab bootstrap-tab組件是對原生的bootstrap-tab組件的封裝，方便開發(fā)者更方便地使用，主要包含以下功能： tab頁初始化關(guān)閉tab頁新增tab 顯示tab頁獲取tab頁ID 使用 Step1 ：引入樣式 <link rel=stylesheet

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀基于Bootstrap的標(biāo)簽頁組件及bootstrap-tab使用說明:bootstrap-tab bootstrap-tab組件是對原生的bootstrap-tab組件的封裝，方便開發(fā)者更方便地使用，主要包含以下功能： tab頁初始化關(guān)閉tab頁新增tab 顯示tab頁獲取tab頁ID 使用 Step1 ：引入樣式 <link rel=stylesheet

bootstrap-tab

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

tab頁初始化
關(guān)閉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頁的標(biāo)題
url			必須，單個tab頁的內(nèi)容url
closeable	false	true,false	單個tab頁是否可關(guān)閉
showIndex	0		默認顯示頁的索引
loadAll	true	true,false	true=一次全部加在頁面,false=只加在showIndex指定的頁面，其他點擊時加載，提高響應(yīng)速度

方法說明

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