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 |
相關鏈接
bootstrap-tab的Github地址：https://github.com/bill1012/bootstrap-pager
總結
以上所述是小編給大家介紹的基于Bootstrap的標簽頁組件及bootstrap-tab使用說明，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
