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

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

這篇文章主要介紹了基于Bootstrap的標(biāo)簽頁(yè)組件及bootstrap-tab使用說(shuō)明,需要的朋友可以參考下

bootstrap-tab

bootstrap-tab

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

tab頁(yè)初始化
關(guān)閉tab頁(yè)
新增tab
顯示tab頁(yè)
獲取tab頁(yè)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ù)和方法說(shuō)明

參數(shù)說(shuō)明

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

方法說(shuō)明

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

相關(guān)鏈接

如何寫(xiě)一個(gè)前端組件(以bootstrap-tab為例)

bootstrap-tab的Github地址：https://github.com/bill1012/bootstrap-pager

總結(jié)

以上所述是小編給大家介紹的基于Bootstrap的標(biāo)簽頁(yè)組件及bootstrap-tab使用說(shuō)明，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: