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扩展关闭全部和关闭其他,tab扩展增加、关闭
在开发后台管理系统时,由于可以关闭标签页,代替原来的iframe,方便灵活。
本文实例为大家分享了bootstrap-closable-tab可实现关闭的tab标签页的具体代码,供大家参考,具体内容如下 Demo下载地址:bootstrapclosabletab_jb51.rar 这是从网上找的一款可以关闭的tab标签页插件: 1、这是基于...
执行bootstrap-closable-tab.js中的方法closableTab.addTab(item) 参数item是一个数组 {id,name,url,closable} id tab标签的id,不允许重复; name tab便签上面显示的标题; tab 标签页里面要加载的页面(不支持...
bootstrap风格的动态添加tab页 tab页上有右键事件:关闭其他,全部关闭 另可自定义json配置右键菜单
赠送jar包:swagger-bootstrap-ui-1.9.6.jar; 赠送原API文档:swagger-bootstrap-ui-1.9.6-javadoc.jar; 赠送源代码:swagger-bootstrap-ui-1.9.6-sources.jar; 赠送Maven依赖信息文件:swagger-bootstrap-ui-...
可编辑bootstrap-table及相关组件:bootstrap3、bootstrap-table相关、bootstrap-table-editable.js、bootstrap-editable.js、bootstrap-editable.css; 配合起来,可以实现可编辑bootstrap-table列表。代码实现: ...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
bootstrap-table插件:bootstrap-editable,可编辑下拉框,以及代码实例,
本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页 插件资源点击此处本站下载。 引用以下css <link rel="stylesheet" href="../plugins/...
压缩包里面有: 1.bootstrap-table-editable.js 2.bootstrap-editable.js 3.bootstrap-editable.css 用于bootstrap table实现x-editable的行单元格编辑
FastAdmin使用bootstrap-table作为前端表格的基础组件库,通常列表交互展示已经够用了,包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也...
Bootstrap-datetimepicker年月日时分秒均可选择,对js文件做小的改动,并且附上Boostrap-datetimepicker的css文件,具体运用可参考我的博客!
bootstrap-table-zh-CN.js,有需要就下载吧
bootstrap实现单元格编辑的css与js。。bootstrap-editable.css bootstrap-editable.js bootstrap-table-editable.js
bootstrap-table-export.js bootstrap-table表格导出js
bootstrap最新版资源下载不易。