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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
理解javascript对象继承
Apr 17 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 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
隐性调用php程序的方法
2009/03/09 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
centos下更新Python版本的步骤
2013/02/12 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python 调用HBase的简单实例
2016/12/18 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
英文自荐信格式
2013/11/28 职场文书
初三学习决心书
2014/03/11 职场文书
农村婚礼主持词
2014/03/13 职场文书
户外活动总结范文
2014/04/30 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
会议欢迎词范文
2015/01/27 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL