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

文章目录

一、前言
二、代码如下：
- 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、可以看到确实动态添加了一个选项卡并打开了新页面

四、感谢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

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

java 动态加载ztree_JAVAEE——BOS物流项目02：学习计划、动态添加选项卡、ztree、项目底层代码构建...
1 学习计划 1.jQuery easyUI中动态添加选项卡 2.jquery ztree插件使用 n 下载ztree n 基于标准json数据构造ztree n 基于简单json数据构造ztree( ...
vue中添加附件以及表单内表格动态添加的功能实现
vue前端表单自动生成地址 form-generator vue中添加附件以及表单内表格动态添加的功能实现页面展示 <el-col :span="12"><el ...
H+框架通过按钮新增选项卡功能
H+框架新增选项卡功能扩展 H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题.前段时间本人做项目时刚好遇到新的需求,需要通过页面按钮创建新的选项卡展示页面,很遗憾,原框架 ...
android仿微信发布动态功能,Android GridView扩展仿微信微博发图动态添加删除图片功能.pdf...
Android GridView扩扩展展仿仿微微信信微微博博发发图图动动态态添添加加删删除除图图片片功功能能这篇文章主要为大家详细介绍了Android GridView扩展仿微信微博发图动态添加删除 ...
ViewPager+Fragment实现TabHost，Fragment动态添加、删除，Tab选项卡跟随滑动
效果图: 代码功能: (1)用ViewPager+Fragment实现TabHost,ViewPager的每一个Page均是Fragment.ViewPager中的Fragment可以动态添加.删除. ...
php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
html自动识别循环列表元素,动态添加的元素,怎么遍历它们的功能及内容
首先,id 在一个页面中只能出现一次,是唯一的,class才可以多次出现! 声明 id 为唯一属性,即一个 html 文件中只能出现一个对应的 id,class 可以使用多个: 需求实现前端部分大到 ...
mac php phpize,macOS 中使用 phpize 动态添加 PHP 扩展的错误解决方法
使用 phpize 动态添加 PHP 扩展是开发中经常需要做的事情,但是在 macOS 中,首次使用该功能必然会碰到一些错误,本文列出了这些错误的解决方法. 问题一: 执行 phpize 报错如下: ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
关于使用DataGrid的ButtonColumn，动态添加DataGrid列，实现不定列n个文件的下载功能...
一.使用DataGrid的ButtonColumn,动态添加DataGrid列,实现不定列n个文件的下载功能在aspx页面中的代码如下: <asp:datagrid id="User ...