https://github.com/zyqwst/bootstrap-closable-tab

基于bootstrap ，支持关闭的标签页
https://github.com/zyqwst/bootstrap-closable-tab

Last synced: about 1 month ago
JSON representation

基于bootstrap ，支持关闭的标签页

• Host: GitHub
• URL: https://github.com/zyqwst/bootstrap-closable-tab
• Owner: zyqwst
• License: mit
• Created: 2016-07-05T12:50:58.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-01-15T05:22:09.000Z (about 5 years ago)
• Last Synced: 2024-10-11T12:12:39.446Z (3 months ago)
• Language: HTML
• Homepage: https://zyqwst.github.io/bootstrap-closable-tab
• Size: 262 KB
• Stars: 81
• Watchers: 9
• Forks: 30
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bootstrap-closable-tab

基于bootstrap ，支持关闭的标签页

### 效果

![效果图](http://upload-images.jianshu.io/upload_images/2287481-f4bdacc26396673e.gif?imageMogr2/auto-orient/strip)

### 使用方法

* 引入bootstrap-closable-tab.js文件

* 在需要显示标签的位置如下代码

```

    

    


    

    


    

    

```

* 添加标签


> 执行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显示的方式吧

> iframe展示子页面一度成为国内后台管理系统开发的主流。但是h5的出现，iframe的适应性有点不尽人意。closable-tab-div.js是另一种可关闭tab的子页面展示方式，很多优点只有你使用了才能发现。