Bootstrap3.3 动态添加和关闭 tab的方案
来源:互联网 发布:mac brew mongodb 编辑:程序博客网 时间:2024/06/06 03:40
/**
* 增加标签页
*/
function
addTab(options) {
//option:
//tabMainName:tab标签页所在的容器
//tabName:当前tab的名称
//tabTitle:当前tab的标题
//tabUrl:当前tab所指向的URL地址
var
exists = checkTabIsExists(options.tabMainName, options.tabName);
if
(exists){
$(
"#tab_a_"
+options.tabName).click();
}
else
{
$(
"#"
+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>'
);
//固定TAB中IFRAME高度
mainHeight = $(document.body).height() - 5;
var
content =
''
;
if
(options.content){
content = option.content;
}
else
{
content =
'<iframe src="'
+ options.tabUrl +
'" width="100%" height="'
+mainHeight+
'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'
;
}
$(
"#"
+options.tabContentMainName).append(
'<div id="tab_content_'
+options.tabName+
'" role="tabpanel" class="tab-pane" id="'
+options.tabName+
'">'
+content+
'</div>'
);
$(
"#tab_a_"
+options.tabName).click();
}
}
/**
* 关闭标签页
* @param button
*/
function
closeTab (button) {
//通过该button找到对应li标签的id
var
li_id = $(button).parent().parent().attr(
'id'
);
var
id = li_id.replace(
"tab_li_"
,
""
);
//如果关闭的是当前激活的TAB,激活他的前一个TAB
if
($(
"li.active"
).attr(
'id'
) == li_id) {
$(
"li.active"
).prev().find(
"a"
).click();
}
//关闭TAB
$(
"#"
+ li_id).remove();
$(
"#tab_content_"
+ id).remove();
};
/**
* 判断是否存在指定的标签页
* @param tabMainName
* @param tabName
* @returns {Boolean}
*/
function
checkTabIsExists(tabMainName, tabName){
var
tab = $(
"#"
+tabMainName+
" > #tab_li_"
+tabName);
//console.log(tab.length)
return
tab.length > 0;
}
阅读全文
0 0
- Bootstrap3.3 动态添加和关闭 tab的方案
- Bootstrap3.3 动态添加和关闭 tab的方案
- Ext JS4.0中Tabpanel动态添加和删除Tab和重用Tab的方法
- jquery动态关闭左边的tab标签
- 解决 bootstrap3.0 tab 不起作用的问题
- TabHost的使用(三):动态添加Tab
- 动态添加Tab控件
- easyui 动态添加 tab
- EasyUI 动态添加tab
- ExtJS动态添加和删除tab标签实例
- easyUI树形节点点击和动态添加Tab
- TabHost Tab的添加和删除
- TabHost Tab的添加和删除
- bootstrap:动态添加tab标签
- Bootstrap3 表单-添加额外的图标
- 在Coolite中动态添加有图标的Tab
- EasyUI两种动态添加tab Iframe页面的方法
- easyui手风琴配合tree 加tab 的数据库动态添加
- 单调递增最长子序列
- DES加密解密
- 【线段树多符号区间更新】HDU
- hibernate增删查改
- 巴什博奕
- Bootstrap3.3 动态添加和关闭 tab的方案
- 深度学习路线图参考
- 五大常用算法基本介绍
- ANGEL:一个新型的分布式机器学习系统
- Linux(rad hat)基础知识
- 判断模拟器是否连网 没网进入连接中
- jquery mobile中的pageinit事件随笔
- ambari中spark thrift server 挂掉
- raspberryPi2 移植Android系统