改造BOOTSTRAP的TAB(轉)

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

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

 1 var addTabs = function (obj) {
 2  id ="tab_"+ obj.id;
 3 
 4 $(".active").removeClass("active");
 5 
 6 //如果TAB不存在，创建一个新的TAB
 7  if (!$("#"+ id)[0]) {
 8 //固定TAB中IFRAME高度
 9  mainHeight = $(document.body).height() - 95;
10 //创建新TAB的title
11  title = '<li role="presentation"id="tab_' + id + '"><a href="#' + id + '"aria-controls="' + id + '"role="tab"data-toggle="tab">' + obj.title;
12 //是否允许关闭
13  if (obj.close) {
14  title += ' <i class="icon-cancel3"tabclose="' + id + '"></i>';
15 }
16  title += '</a></li>';
17 //是否指定TAB内容
18  if (obj.content) {
19  content = '<div role="tabpanel"class="tab-pane"id="' + id + '">' + obj.content + '</div>';
20  } else {//没有内容，使用IFRAME打开链接
21  content = '<div role="tabpanel"class="tab-pane"id="' + id + '"><iframe src="' + obj.url + '"width="100%"height="' + mainHeight +
22  '"frameborder="no"border="0"marginwidth="0"marginheight="0"scrolling="yes"allowtransparency="yes"></iframe></div>';
23 }
24 //加入TABS
25 $(".nav-tabs").append(title);
26 $(".tab-content").append(content);
27 }
28 
29 //激活TAB
30  $("#tab_"+ id).addClass('active');
31  $("#"+ id).addClass("active");
32 };
33 
34 var closeTab = function (id) {
35 //如果关闭的是当前激活的TAB，激活他的前一个TAB
36  if ($("li.active").attr('id') =="tab_"+ id) {
37  $("#tab_"+ id).prev().addClass('active');
38  $("#"+ id).prev().addClass('active');
39 }
40 //关闭TAB
41  $("#tab_"+ id).remove();
42  $("#"+ id).remove();
43 };
44 
45 $(function () {
46  mainHeight = $(document.body).height() - 45;
47 $('.main-left,.main-right').height(mainHeight);
48  $("[addtabs]").click(function () {
49  addTabs({id: $(this).attr("id"), title: $(this).attr('title'), close: true});
50 });
51 
52  $(".nav-tabs").on("click","[tabclose]", function (e) {
53  id = $(this).attr("tabclose");
54 closeTab(id);
55 });
56 });

View Code

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

View Code