Hplus框架动态添加选项卡功能(扩展)
2023-06-13 09:17:20 时间
文章目录
一、前言
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函数源码的作者:
相关文章
- 开源共建 | Dinky 扩展批流统一数据集成框架 ChunJun 的实践分享
- 开源共建 | Dinky 扩展批流统一数据集成框架 ChunJun 的实践分享
- 测试之路 pytest接口自动化框架-插件补充及pytest装饰器扩展
- 测试之路 pytest接口自动化框架扩展-创建用例文件
- 测试之路 pytest接口自动化框架扩展-完结篇
- Havoc:一款现代化可扩展的后渗透命令控制框架
- 虹科方案 | 将云计算扩展到边缘解决方案
- 在 Kubernetes 上设计和部署可扩展应用程序的基本原则
- 不同浏览器如何实现书签自动同步?扩展插件推荐
- 以Yum一步到位安装MySQL扩展(yum安装mysql扩展)
- Linux如何扩展存储空间(linux扩展目录空间)
- 基于php的redis扩展实现更高效、更快速操作(php的redis扩展)
- Mongodb分片集:数据扩展和负载均衡的完美解决方案(mongodb分片集)
- Linux 扩展磁盘解决方案(linux扩展磁盘)
- Oracle AWRDD扩展数据库性能管理功能(oracle awrdd)
- SqlServer扩展属性的介绍
- ThinkPHP框架设计及扩展详解
- javascript框架设计读书笔记之数组的扩展与修复
- ThinkPHP行为扩展Behavior应用实例详解
- 从零开始学YII2框架(三)扩展插件yii2-gird
- Laravel框架中扩展函数、扩展自定义类的方法