改造BOOTSTRAP的TAB(轉)

http://www.thinksaas.cn/topics/0/351/351250.html

最近在做一个前端，需要点击按钮创建一个可关闭的标签页，没有找到合适的，最后想到不如改造一下bootstrap省事。

var addTabs = function (obj) {
 id ="tab_"+ obj.id;

$(".active").removeClass("active");

//如果TAB不存在，创建一个新的TAB
 if (!$("#"+ id)[0]) {
//固定TAB中IFRAME高度
 mainHeight = $(document.body).height() - 95;
//创建新TAB的title
 title = '<li role="presentation"id="tab_' + id + '"><a href="#' + id + '"aria-controls="' + id + '"role="tab"data-toggle="tab">' + obj.title;
//是否允许关闭
 if (obj.close) {
 title += ' <i class="icon-cancel3"tabclose="' + id + '"></i>';
}
 title += '</a></li>';
//是否指定TAB内容
 if (obj.content) {
 content = '<div role="tabpanel"class="tab-pane"id="' + id + '">' + obj.content + '</div>';
 } else {//没有内容，使用IFRAME打开链接
 content = '<div role="tabpanel"class="tab-pane"id="' + id + '"><iframe src="' + obj.url + '"width="100%"height="' + mainHeight +
 '"frameborder="no"border="0"marginwidth="0"marginheight="0"scrolling="yes"allowtransparency="yes"></iframe></div>';
}
//加入TABS
$(".nav-tabs").append(title);
$(".tab-content").append(content);
}

//激活TAB
 $("#tab_"+ id).addClass('active');
 $("#"+ id).addClass("active");
};

var closeTab = function (id) {
//如果关闭的是当前激活的TAB，激活他的前一个TAB
 if ($("li.active").attr('id') =="tab_"+ id) {
 $("#tab_"+ id).prev().addClass('active');
 $("#"+ id).prev().addClass('active');
}
//关闭TAB
 $("#tab_"+ id).remove();
 $("#"+ id).remove();
};

$(function () {
 mainHeight = $(document.body).height() - 45;
$('.main-left,.main-right').height(mainHeight);
 $("[addtabs]").click(function () {
 addTabs({id: $(this).attr("id"), title: $(this).attr('title'), close: true});
});

 $(".nav-tabs").on("click","[tabclose]", function (e) {
 id = $(this).attr("tabclose");
closeTab(id);
});
});

<button class="btn btn-default"id="mail"addtabs="mail"url="/admin/message"title="我的消息">
 <i class="icon-mail2"></i><span class="badge pbadge">42</span>
</button>