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

來源：懂視網責編：小采時間：2020-11-27 22:34:16

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

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

推薦度：

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

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

bootstrap-tab

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

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>

參數和方法說明

參數說明

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

方法說明

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