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);
相关推荐
而"bootstrap-closable-tab.js"则是在原生Bootstrap Tab组件的基础上进行的扩展,增加了标签页的关闭功能,使得用户可以根据需要关闭不需要的标签页,提高了交互性和用户体验。 在这个扩展中,`bootstrap-closable-...
Bootstrap Closable Tab 插件是一种在Web应用中实现可关闭标签页功能的工具,尤其在后台管理系统中广泛使用。这种功能使得用户可以更高效地管理打开的页面,避免过多的标签页导致界面混乱,提高了操作的便捷性和用户...
Bootstrap-Closable-Tab 是一个基于 Bootstrap 框架的插件,主要用于创建具有关闭功能的标签页。这个插件允许用户在使用过程中方便地关闭不再需要的标签页,提高用户体验。以下是对这个插件的详细说明: 1. **依赖*...
执行bootstrap-closable-tab.js中的方法closableTab.addTab(item) 参数item是一个数组 {id,name,url,closable} id tab标签的id,不允许重复; name tab便签上面显示的标题; tab 标签页里面要加载的页面(不支持...
通过以上步骤,我们可以实现一个具备右键关闭功能的Bootstrap Tab组件。这样的功能增强了用户交互,使他们能更便捷地管理Tab页,从而提升网页应用的用户体验。在实际项目中,可以根据具体需求进行调整和扩展。
Bootstrap的多标签页功能是通过其Nav组件和Tab插件实现的。Nav组件用于创建导航条,而Tab插件则为这些导航条添加交互性,允许用户在不同的内容区域之间切换。以下是如何创建一个基本的多标签页的步骤: 1. **引入...
`bootstrap-closable-tab.js`可能包含了这样的功能,使得Tab不仅能够被创建,还能被关闭。 3. **Closable Tab**:在文件名中提到的"Closable"指的是Tab可以被用户关闭。这通常通过在每个Tab上添加一个关闭按钮(如`...
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是,它的样式比较单一,如何才能在其原有的基础上做出更加美观的效果呢,我一直在考虑这个问题。另外,Bootstrap中的tabs必须要单击每个选项卡才能实现...
### Extjs学习教程知识点概述 #### 一、ExtJS简介 ... - **Tab Panel**:实现标签页导航功能。 以上是对ExtJS基础知识的概述,通过学习这些知识点,开发者可以更好地理解和掌握ExtJS框架的核心技术和应用场景。