bootstrap-closable-tab組件是一個(gè)可關(guān)閉標(biāo)簽頁(yè)的組件辈赋∏敝В基于jquery和bootstrap
示例
1.gif
截屏示例是div實(shí)現(xiàn)方式，更流行的做法辅肾，拋棄iframe吧~
使用方法
- 引入bootstrap-closable-tab.js文件
- 在需要顯示標(biāo)簽的位置如下代碼
<!-- 此處是相關(guān)代碼 -->
<ul class="nav nav-tabs" role="tablist">
</ul>
<div class="tab-content" style="width:100%;">
</div>
<!-- 相關(guān)代碼結(jié)束 -->
- 添加標(biāo)簽
執(zhí)行bootstrap-closable-tab.js中的方法closableTab.addTab(item)
參數(shù)item是一個(gè)數(shù)組 {id,name,url,closable}
id tab標(biāo)簽的id陪毡，不允許重復(fù)米母；
name tab便簽上面顯示的標(biāo)題勾扭；
tab 標(biāo)簽頁(yè)里面要加載的頁(yè)面（不支持跨域訪問(wèn));
closalbe boolean類型，是否顯示關(guān)閉圖標(biāo)铁瞒。
- Example
var item = {'id':'1','name':'首頁(yè)','url':'son.html','closable':false};
closableTab.addTab(item);
廢棄子頁(yè)面用iframe顯示的方式吧
iframe展示子頁(yè)面一度成為國(guó)內(nèi)后臺(tái)管理系統(tǒng)開(kāi)發(fā)的主流妙色。但是h5的出現(xiàn)，iframe的適應(yīng)性有點(diǎn)不盡人意慧耍。closable-tab-div.js是另一種可關(guān)閉tab的子頁(yè)面展示方式身辨，很多優(yōu)點(diǎn)只有你使用了才能發(fā)現(xiàn)。
