设为首页 加入收藏

TOP

Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页(二)
2019-09-17 19:00:50 】 浏览:74
Tags:Bootstrap 基于 JQuery 实现 动态 打开 关闭 tab
nuID + '" data-toggle="tab" role="tab" id="tab-a-' + options.menuID + '">'+ options.tabName + '<button class="close closeTab" type="button" onclick="closeTab(this,' + "'" + options.level1 + "','" + options.level2 + "','" + options.tabName + "'" +');">×</button>' + '</a>' +
'</li>');
 
// 设置 tab标签页的内容
var content = '<iframe name="tabIframe" src="' + options.tabUrl + '" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes" onload="changeFrameHeight()"></iframe>';
 
$("#" + options.tabContentID).append('<div id="tab-content-' + options.menuID + '" role="tabpanel" class="tab-pane">' + content + '</div>');

 

$("#tab-a-" + options.menuID).click(); // 选中打开的tab

currentIframID= 'iframe' + options.menuID;

    }

}

 
 
/***
 * 判断tab页是否已经打开
 * @paramtabName当前tab的名称
 * @returns {boolean}
 */
function isTabExists(menuID){
var tab = $('#tab-li-' + menuID + ' > #tab-a-' + menuID);
return tab.length>0;
}
 

/**

 * 关闭tab标签页

 * @param button

 */

function closeTab(button) {

//通过所点击的x 按钮,找到对应li标签的id

var li_id= $(button).parent().parent().attr('id');

var id = li_id.replace('tab-li-', '');

 

var li_active= $("#"+ tabFatherElementID+ " >li.active");

if (li_active.attr('id') == li_id) { // 如果关闭的是当前处于选中状态的TAB

if (li_active.prev()[0]) { // 如果当前tab标签之前存在tab标签,则激活前一个标签页(前后顺序对应左右顺序

li_active.prev().find("a").click();

        } else if (li_active.next()[0]) { // 如果当前tab标签之前不存在tab标签,并且在其之后存在tab标签,则激活后一个tab标签页

li_active.next().find("a").click();

        }

    }

 

//关闭TAB

$("#" + li_id).remove();

$("#tab-content-" + id).remove(); // 移除内容

}

 
 
/**
 * 设置tab标签对应的iframe页面高度
 */
function changeFrameHeight(){
var iframes = document.getElementsByName('tabIframe');
var contentContainer= $('#' + tabContentID); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况
var offsetTop= 0;
if(contentContainer.offset()) {
offsetTop= contentContainer.offset().top;  //容器距离document顶部的距离
}
 
$.each(iframes, function(index, iframe){
var h = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
iframe.height= h - offsetTop;// 这里offsetTop可以替换成一个比较合理的常量值
 
    });
}
 
/**
* 浏览器窗口大小发生变化时,自动调整iframe页面高度
* 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight()* 所以函数中添加了延迟事件
*/
$(function(){
var resizeTimer= null;
window.onresize=function(){
if(resizeTimer) {
clearTimeout(resizeTimer); // 取消上次的延迟事件
}
resizeTimer= setTimeout('changeFrameHeight()', 500);  // //延迟500毫秒执行changeFrameHeight方法
}
});
 
 
首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇【微信小程序】开发实战 之 「数.. 下一篇【Step-By-Step】第 三 周

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目