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

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

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章bootstrap-closable-tab可实现关闭的tab标签页插件由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

这是从网上找的一款可以关闭的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); 
        
 
     
 
   

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/hhy1006894859/article/details/84976049 。

最后此篇关于bootstrap-closable-tab可实现关闭的tab标签页插件的文章就讲到这里了,如果你想了解更多关于bootstrap-closable-tab可实现关闭的tab标签页插件的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

首页

博学

6Ren·AI

商城