微客导航 » 文章资讯 » bootstrap-closable-tab可实现关闭的tab标签页插件

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

2023-07-19 01:45:04 163

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

Demo下载地址：bootstrapclosabletab_jb51.rar

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

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

前提得引入jquery：

2、引入该插件：

代码如下：

//子页面不用iframe，用div展示
varclosableTab={

//添加tab
addTab:function(tabItem){//tabItem={id,name,url,closable}

varid="tab_seed_"+tabItem.id;
varcontainer="tab_container_"+tabItem.id;

$("li[id^=tab_seed_]").removeClass("active");
$("div[id^=tab_container_]").removeClass("active");

if(!$('#'+id)[0]){
varli_tab=''+tabItem.name;
if(tabItem.closable){
li_tab=li_tab+'';
}else{
li_tab=li_tab+'';
}

vartabpanel=''+
'正在加载...'+
'

'; $('.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){ varval=$(item).attr('tabclose'); varcontainerId="tab_container_"+val.substring(9); if($('#'+containerId).hasClass('active')){ $('#'+val).prev().addClass('active'); $('#'+containerId).prev().addClass('active'); } $("#"+val).remove(); $("#"+containerId).remove(); } }

3、html代码：

4、使用方法如下：

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

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

Bootstrap学习教程

Bootstrap实战教程

BootstrapTable使用教程

Bootstrap插件使用教程

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐