Hplus框架动态添加选项卡功能(扩展)

@[toc]

一、前言

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、可以看到确实动态添加了一个选项卡并打开了新页面

四、感谢openTabPage函数源码的作者：

https://blog.csdn.net/cwy534363081/article/details/82908371?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.control&dist_request_id=1328626.10438.16153624962725191&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-6.control