bootstrap-closable-tab tab可关闭组件

bootstrap-closable-tab tab可关闭组件

                                                                                    ——我一直不太信任自己的记忆力，所以我把它们都写下来

    最近在搭建一套基于SpringMVC+Hibernate+Ehcache+Apache Shiro+WebSocket,前端使用bootstrap模板metronic的脚手架项目。支持web访问和restful API，后者是为了app的访问，app是用ionic开发的web app。完成之后我会把项目托管到GitHub发扬开源精神。接来回归正题，是这么一回事：

    系统有一个模板页，然后所有业务网页加载在iframe中，那么业务网页的切换就需bootstrap的tab标签。国内很多ERP，WMS等系统前端都是这种模式

 

 

bootstrap有类似的标签切换功能（  点击链接查看bootstrap 标签页 ），悲剧的是竟然不支持标签关闭功能，网上资料也不多。索性花了点时间自己封装了一个，现在贡献出来继续发扬开源精神。先看效果图：

 

使用方法

• 引入bootstrap-closable-tab.js文件
• 在需要显示标签的位置如下代码

 <!-- 此处是相关代码 --> <ul class="nav nav-tabs" role="tablist"> </ul> <div class="tab-content" style="width:100%;"> </div> <!-- 相关代码结束 --> 

• 添加标签

执行bootstrap-closable-tab.js中的方法closableTab.addTab(item)
参数item是一个数组 {id,name,url,closable} 
id tab标签的id，不允许重复；
name tab便签上面显示的标题；
tab 标签页里面要加载的页面（不支持跨域访问);
closalbe boolean类型，是否显示关闭图标。

• Example

 var item = {'id':'1','name':'首页','url':'son.html','closable':false}; closableTab.addTab(item); 

要说明下，如果子页面有跨域，那么iframe与父页面不能完美的无缝对接（无缝对接指子页面无滚动条，父页面高度根据子页面的高度来确定） 

源码下载 ：点击去下载