jquery实现简单的可关闭tab

摘要: bootstrap做前端，用jquery实现的一个简单的可关闭tab

最近学习bootstrap，想用里面的nav-tab来做一个面板，但是没有关闭和打开的功能，于是用jquery自己写了一个。

先给nav-tab添加一个关闭的按钮，用bootstrap自带的glyphicons或其他的插件都行，我用的是Font Awesome，稍微调整下nav-tab的样式。下面是js代码：

//tab绑定关闭事件
$(".icon-remove").click(function(){
removeTabEvent(this);
});

//关闭选项卡
function removeTabEvent(o){
$(o).parent().parent().remove();
var id = $(o).parent().attr("href").substring(1);
$("#" + id).remove();
var isOpen = $(".nav.nav-tabs li.active");
if(isOpen.length == 0){
$(".nav.nav-tabs li:first a").click();
}
}

然后添加打开tab事件：

//打开选项卡
$(".ajaxify").click(function(){
var href = $(this).attr("href");
var openTab = $(".nav.nav-tabs li a[href=" + href + "]");
if(openTab.length == 0){
addTab(this,href);
}
//打开选项卡后默认点击一次该选项卡
$(".nav.nav-tabs li a[href='" + href + "']").click();
});

//打开选项卡
function addTab(o,href){
var title =  $(o).text();
var id = href.substring(1);
var tabContent=" <li><a href=" + href + " data-toggle='tab'>" + title + "<i class='icon-remove'></i></a></li>";
var content = "<div class='tab-pane' id=" + id+ "><iframe   id='" + id + "Frame'  frameBorder=0 scrolling=no width='99%' onLoad=iFrameHeight(this.id)   src='" + id + "/" + id + ".jsp'></iframe></div>";
$(".nav.nav-tabs").append(tabContent);
$(".tab-content").append(content);
//给append的元素绑定关闭事件
$(".icon-remove").click(function(){
removeTabEvent(this);
});
}

在打开选项卡时，append上要添加的内容后发现新添加的元素无法绑定事件，所以在添加了之后又绑定了一次删除操作。
比较简单的实现了一下可关闭tab，没有做tab长度的处理。如有错误，欢迎指正，谢谢。

最后加上tab长度过长时，关闭第一个tab的代码

//长度检测
function isOverLength(){
var ulLength = $(".nav.nav-tabs").width();
var lis = $(".nav.nav-tabs li");
var liLength = 0;
for(var i = 0 ; i < lis.length;i++){
liLength += lis[i].offsetWidth;
}
if(liLength > ulLength){
var o = lis[0].children[0].children;
removeTabEvent(o);
}
}

在新打开选项卡时调用即可