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);
	}
}

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

转载于:https://my.oschina.net/u/2304210/blog/377402