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


Posted in Javascript onAugust 09, 2020

本文实例为大家分享了bootstrap-closable-tab可实现关闭的tab标签页的具体代码,供大家参考,具体内容如下

Demo下载地址:bootstrapclosabletab_3water.rar

这是从网上找的一款可以关闭的tab标签页插件:

1、这是基于bootstrap的插件,因此要引入bootstrap的相关插件

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

前提得引入jquery:

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

2、引入该插件:

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

代码如下:

//子页面不用iframe,用div展示
var closableTab = {
 
  //添加tab
 addTab:function(tabItem){ //tabItem = {id,name,url,closable}
 
 var id = "tab_seed_" + tabItem.id;
 var container ="tab_container_" + tabItem.id;
 
 $("li[id^=tab_seed_]").removeClass("active");
 $("div[id^=tab_container_]").removeClass("active");
 
 if(!$('#'+id)[0]){
  var li_tab = '<li role="presentation" class="" id="'+id+'"><a href="#'+container+'" rel="external nofollow"  role="tab" data-toggle="tab" style="position: relative;padding:2px 20px 2px 15px">'+tabItem.name;
  if(tabItem.closable){
  li_tab = li_tab + '<i class="glyphicon glyphicon-remove small" tabclose="'+id+'" style="position: absolute;right:4px;top: 4px;" onclick="closableTab.closeTab(this)"></i></a></li> ';
  }else{
  li_tab = li_tab + '</a></li>';
  }
 
  var tabpanel = '<div role="tabpanel" class="tab-pane" id="'+container+'" style="width: 100%;">'+
      '正在加载...'+
      '</div>';
 
 
  $('.nav-tabs').append(li_tab);
  $('.tab-content').append(tabpanel);
  $('#'+container).load(tabItem.url,function(response,status,xhr){
  if(status=='error'){//status的值为success和error,如果error则显示一个错误页面
   $(this).html(response);
  }
  });
 }
 $("#"+id).addClass("active");
 $("#"+container).addClass("active");
 },
 
 //关闭tab
 closeTab:function(item){
 var val = $(item).attr('tabclose');
 var containerId = "tab_container_"+val.substring(9);
    
    if($('#'+containerId).hasClass('active')){
     $('#'+val).prev().addClass('active');
     $('#'+containerId).prev().addClass('active');
    }
 
 
 $("#"+val).remove();
 $("#"+containerId).remove();
 }
}

3、html代码:

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

4、使用方法如下:

var item = {'id':'1','name':'菜单管理','url':'./menuctrl.html','closable':false};
closableTab.addTab(item);

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 #Javascript
js利用iframe实现选项卡效果
Aug 09 #Javascript
解决vue 退出动画无效的问题
Aug 09 #Javascript
在vue中使用console.log无效的解决
Aug 09 #Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 #Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
一些mootools的学习资源
2010/02/07 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
详解Python字典小结
2018/10/20 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
神路信息Java面试题目
2013/03/31 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
支教自我鉴定
2014/01/18 职场文书
小学语文教学反思
2014/02/10 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
校园广播稿100字
2014/10/06 职场文书
2014年销售部工作总结
2014/12/01 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL