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 tab效果的实现代码
Dec 26 Javascript
js读写json文件实例代码
Oct 21 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php基本函数汇总
2015/07/09 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
python回调函数中使用多线程的方法
2017/12/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
一行python实现树形结构的方法
2019/08/09 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
python3爬虫中异步协程的用法
2020/07/10 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
生物学专业求职信
2014/07/23 职场文书
党委班子对照检查材料
2014/08/19 职场文书
茶花女读书笔记
2015/06/29 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
python 爬取天气网卫星图片
2021/06/07 Python