`
云上太阳
  • 浏览: 131130 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

bootstrap-closable-tab tab可关闭组件

阅读更多

bootstrap-closable-tab tab可关闭组件

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

    最近在搭建一套脚手架项目,基于SpringMVC+Hibernate+Ehcache+Apache Shiro+WebSocket,前端使用bootstrap模板metronic。提供 RESTFUL api,支持app的访问,app是用ionic 开发。内嵌webIM(基于websocket),支持聊天、推送消息、强制下线等。完成之后我会把项目后台和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与父页面不能完美的无缝对接(无缝对接指子页面无滚动条,父页面高度根据子页面的高度来确定) 

源码下载 :点击去下载

  • 大小: 127.6 KB
  • 大小: 201.4 KB
2
1
分享到:
评论
1 楼 iCdarkFall 2017-05-31  
我想问问怎么把共享的css.js一起连同tab加载起来

相关推荐

    bootstrap-closable-tab.js tab标签页扩展之关闭全部和关闭其他

    而"bootstrap-closable-tab.js"则是在原生Bootstrap Tab组件的基础上进行的扩展,增加了标签页的关闭功能,使得用户可以根据需要关闭不需要的标签页,提高了交互性和用户体验。 在这个扩展中,`bootstrap-closable-...

    bootstrap-closable-tab Demo

    Bootstrap Closable Tab 插件是一种在Web应用中实现可关闭标签页功能的工具,尤其在后台管理系统中广泛使用。这种功能使得用户可以更高效地管理打开的页面,避免过多的标签页导致界面混乱,提高了操作的便捷性和用户...

    bootstrap-closable-tab可实现关闭的tab标签页插件

    Bootstrap-Closable-Tab 是一个基于 Bootstrap 框架的插件,主要用于创建具有关闭功能的标签页。这个插件允许用户在使用过程中方便地关闭不再需要的标签页,提高用户体验。以下是对这个插件的详细说明: 1. **依赖*...

    bootstrap-closable-tab-master.zip_Tabú_bootstrap_tent3vd

    执行bootstrap-closable-tab.js中的方法closableTab.addTab(item) 参数item是一个数组 {id,name,url,closable} id tab标签的id,不允许重复; name tab便签上面显示的标题; tab 标签页里面要加载的页面(不支持...

    bootstrap-tab页带右键关闭

    通过以上步骤,我们可以实现一个具备右键关闭功能的Bootstrap Tab组件。这样的功能增强了用户交互,使他们能更便捷地管理Tab页,从而提升网页应用的用户体验。在实际项目中,可以根据具体需求进行调整和扩展。

    [html5技术]基于bootstrap制作的多标签页(tabs)

    Bootstrap的多标签页功能是通过其Nav组件和Tab插件实现的。Nav组件用于创建导航条,而Tab插件则为这些导航条添加交互性,允许用户在不同的内容区域之间切换。以下是如何创建一个基本的多标签页的步骤: 1. **引入...

    bootstrap动态生成tab

    `bootstrap-closable-tab.js`可能包含了这样的功能,使得Tab不仅能够被创建,还能被关闭。 3. **Closable Tab**:在文件名中提到的"Closable"指的是Tab可以被用户关闭。这通常通过在每个Tab上添加一个关闭按钮(如`...

    针对BootStrap中tabs控件的美化和完善(推荐)

    BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必须要单击每个选项卡才能实现...

    Extjs学习教程

    ### Extjs学习教程知识点概述 #### 一、ExtJS简介 ... - **Tab Panel**:实现标签页导航功能。 以上是对ExtJS基础知识的概述,通过学习这些知识点,开发者可以更好地理解和掌握ExtJS框架的核心技术和应用场景。

Global site tag (gtag.js) - Google Analytics