文章目录
- 一、前言
- 二、代码如下：
- 1、随便写个按钮
- 2、调用openTabPage()
- 三、实现效果：
- 1、点击测试选项卡按钮
- 2、可以看到确实动态添加了一个选项卡并打开了新页面
- 四、感谢openTabPage函数源码的作者：
一、前言
hplus框架确实是后端开发人员的福音，但是有很多功能没有实现，我根据网上大神的做法，实现了动态添加选项卡来打开新页面的功能。
二、代码如下：
1、随便写个按钮
<div class="row">
<button class="btn btn-w-m btn-primary glyphicon glyphicon-plus"
onclick="testTab()" id="btn_add">测试选项卡</button>
</div>
2、调用openTabPage()
function testTab() {
openTabPage("systemmanage/userInfoManage.jsp","个人信息管理");
}function openTabPage(url, title) {
var wpd = $(window.parent.document);
var mainContent = wpd.find('.J_mainContent');
var thisIframe = mainContent.find("iframe[data-id='"+ url +"']");
var pageTabs = wpd.find('.J_menuTabs .page-tabs-content ')
pageTabs.find(".J_menuTab.active").removeClass("active");
mainContent.find("iframe").css("display", "none");
if(thisIframe.length > 0){ // 选项卡已打开
thisIframe.css("display", "inline");
pageTabs.find(".J_menuTab[data-id='"+ url +"']").addClass("active");
}else{
var menuItem = wpd.find("a.J_menuItem[href='"+ url +"']");
var dataIndex = title == undefined ? menuItem.attr("data-index") : '9999';
var _title = title == undefined ? menuItem.find('.nav-label').text() : title;
var iframe = '<iframe class="J_iframe" name="iframe'+ dataIndex +'" width="100%" height="100%" src="' + url + '" frameborder="0" data-id="' + url
+ '" seamless="" style="display: inline;"></iframe>';
pageTabs.append(
' <a href="javascript:;" class="J_menuTab active" data-id="'+url+'">' + _title + ' <i class="fa fa-times-circle"></i></a>');
mainContent.append(iframe);
//显示loading提示
var loading = top.layer.load();
mainContent.find('iframe:visible').load(function () {
//iframe加载完成后隐藏loading提示
top.layer.close(loading);
});
}
}三、实现效果：
1、点击测试选项卡按钮
2、可以看到确实动态添加了一个选项卡并打开了新页面
