首页 新闻 搜索 专区 学院

请问有没有Bootstrap3.3 动态添加和关闭 tab的方案

0
悬赏园豆:5 [已解决问题] 解决于 2015-08-18 19:46

请问有没有Bootstrap3.3 动态添加关闭 tab方案,或者JQuery 的动态添加关闭 tab方案。

Andy·Li的主页 Andy·Li | 初学一级 | 园豆:185
提问于:2015-07-03 12:04
< >
分享
最佳答案
1
 1 /**
 2  * 增加标签页
 3  */
 4 function addTab(options) {
 5     //option:
 6     //tabMainName:tab标签页所在的容器
 7     //tabName:当前tab的名称
 8     //tabTitle:当前tab的标题
 9     //tabUrl:当前tab所指向的URL地址
10     var exists = checkTabIsExists(options.tabMainName, options.tabName);
11     if(exists){
12         $("#tab_a_"+options.tabName).click();
13     } else {
14         $("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this);">×</button>'+options.tabTitle+'</a></li>');
15         
16         //固定TAB中IFRAME高度
17         mainHeight = $(document.body).height() - 5;
18         
19         var content = '';
20         if(options.content){
21             content = option.content;
22         } else {
23             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>';
24         }
25         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>');
26         $("#tab_a_"+options.tabName).click();
27     }
28 }
29 
30 
31 /**
32  * 关闭标签页
33  * @param button
34  */
35 function closeTab (button) {
36     
37     //通过该button找到对应li标签的id
38     var li_id = $(button).parent().parent().attr('id');
39     var id = li_id.replace("tab_li_","");
40     
41     //如果关闭的是当前激活的TAB,激活他的前一个TAB
42     if ($("li.active").attr('id') == li_id) {
43         $("li.active").prev().find("a").click();
44     }
45     
46     //关闭TAB
47     $("#" + li_id).remove();
48     $("#tab_content_" + id).remove();
49 };
50 
51 /**
52  * 判断是否存在指定的标签页
53  * @param tabMainName
54  * @param tabName
55  * @returns {Boolean}
56  */
57 function checkTabIsExists(tabMainName, tabName){
58     var tab = $("#"+tabMainName+" > #tab_li_"+tabName);
59     //console.log(tab.length)
60     return tab.length > 0;
收获园豆:5
起个昵称真难 | 菜鸟二级 |园豆:202 | 2015-07-05 08:38
其他回答(2)
0

直接JS搞定。

幻天芒 | 园豆:36608 (高人七级) | 2015-07-03 13:15
0

这个jquery就有,bootstrap3里没有找到,但是bootstrap jquery里面应该有的

ching126 | 园豆:228 (菜鸟二级) | 2015-07-06 14:06
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册