H+后台UI框架,单击按钮增加新的选项卡
2023-09-11 14:21:03 时间
问题:
使用H+时,发现单击按钮不能打开新的选项卡,新页面会直接替换掉原先的页面
经查需要自己写方法:
一种是直接在页面中增加js方法(我采用的);
另一种是修改contabs.js文件(参考:https://blog.csdn.net/wanghwang2008/article/details/80373679,但我使用未实现)
需求:
如图,单击后方的查看按钮,查看该行的数据对比详情页面。
解决:
在需要调用的页面增加该js函数:
// 打开新页面 // 打开自定义新选项卡:<a href="#" οnclick="openTabPage('url', '自定义标题')">test</a> // 打开系统选项卡:<a href="#" οnclick="openTabPage('url')">查看提现记录</a> 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); }); } }
调用时传递url和新选项卡title就行了
<a href='javascript:;' class='btn btn-xs blue' onclick=\"openTabPage('/comparison/comp_case_detail?case_id=" + row.id + "','数据对比详情')\" title='详情'><span class='glyphicon glyphicon-search'></span></a>
相关文章
- 常见后台jquery ui tabs方法实战
- web后台获取不到session中的值(loading sessions from persistent storage),后改用JS传值
- Screen-后台运行
- 织梦上传附件提示需输入后台管理目录才能登录的解决办法
- Spring boot后台搭建二为Shiro权限控制添加缓存
- Spring boot后台搭建二集成Shiro实现用户验证
- 流式计算框架Storm后台启动命令(避免新开窗口)
- S/4HANA product search后台生成的SQL查询语句
- 企业官网小程序实战教程-管理后台制作
- jar包在windows后台运行,通过.bat文件
- 后台异常引起前端提示跨域出错
- 待续未完- 自己写后台内容管理程序 - 用tp框架 和 前台 jquery ui等写的
- FastAdmin 后台框架说明 v0.1.0
- 后台框架 FastAdmin V1.0.0.20200228 发布,为疫情防控作贡献
- 完成分析 FastAdmin 用户余额功能(后台篇)
- 在ECSHOP后台左侧导航中增加新菜单
- IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
- 【客户下单】后台系统自动分单成功生成工单发送短信