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
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 Javascript
小程序中的箭头函数的具体使用
Jun 19 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
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
js更优雅的兼容
2010/08/12 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
jQuery中extend函数简单用法示例
2017/10/11 jQuery
jQuery中库的引用方法
2018/01/06 jQuery
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python实现代码统计工具
2019/09/19 Python
详解Python绘图Turtle库
2019/10/12 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
迟到检讨书900字
2014/01/14 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
考研英语复习计划
2015/01/19 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书