前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Hplus框架动态添加选项卡功能(扩展)

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

作者头像
别团等shy哥发育
发布2023-02-25 17:11:02
发布2023-02-25 17:11:02
76000
代码可运行
举报
运行总次数:0
代码可运行

文章目录

一、前言

hplus框架确实是后端开发人员的福音,但是有很多功能没有实现,我根据网上大神的做法,实现了动态添加选项卡来打开新页面的功能。

二、代码如下:

1、随便写个按钮

代码语言:javascript
代码运行次数:0
运行
复制
<div class="row">
                    <button class="btn btn-w-m btn-primary glyphicon glyphicon-plus"
                           onclick="testTab()" id="btn_add">测试选项卡</button>
                </div>

2、调用openTabPage()

代码语言:javascript
代码运行次数:0
运行
复制
function testTab() {
        openTabPage("systemmanage/userInfoManage.jsp","个人信息管理");
    }
代码语言:javascript
代码运行次数:0
运行
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-03-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一、前言
  • 二、代码如下:
    • 1、随便写个按钮
    • 2、调用openTabPage()
  • 三、实现效果:
    • 1、点击测试选项卡按钮
    • 2、可以看到确实动态添加了一个选项卡并打开了新页面
  • 四、感谢openTabPage函数源码的作者:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档