EasyUI两种动态添加tab Iframe页面的方法
/** 动态添加tab-----方式一 **/ function addIframeTab(titleTxt,href,icon) { $('#mytabs').tabs('addIframeTab', { //tab参数为一对象,其属性同于原生add方法参数 tab : { title : titleTxt, closable : false, tools : [ { iconCls : icon, handler : function(e) { var title = $(e.target).parent().parent().text(); $('#tabs').tabs('updateIframeTab', { 'which' : title }); } } ] }, //iframe参数用于设置iframe信息,包含: //src[iframe地址],frameBorder[iframe边框,,默认值为0],delay[淡入淡出效果时间] //height[iframe高度,默认值为100%],width[iframe宽度,默认值为100%] iframe : { src :href } }); $('#mytabs').tabs('addEventParam'); } /** 动态添加tab-----方式二 **/ function addTab(title, href,icon){ var tt = $('#mytabs'); if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab tt.tabs('select', title); refreshTab({tabTitle:title,url:href}); } else { var content=""; if (href){ content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>'; } else { content = '未实现'; } tt.tabs('add',{ title:title, closable:false, content:content, iconCls:icon||'icon-default' }); } } /** * 刷新tab * @cfg *example: {tabTitle:'tabTitle',url:'refreshUrl'} *如果tabTitle为空,则默认刷新当前选中的tab *如果url为空,则默认以原来的url进行reload */ function refreshTab(cfg){ var refresh_tab = cfg.tabTitle?$('#mytabs').tabs('getTab',cfg.tabTitle):$('#mytabs').tabs('getSelected'); if(refresh_tab && refresh_tab.find('iframe').length > 0){ var _refresh_ifram = refresh_tab.find('iframe')[0]; var refresh_url = cfg.url?cfg.url:_refresh_ifram.src; //_refresh_ifram.src = refresh_url; _refresh_ifram.contentWindow.location.href=refresh_url; } } window.onload=function() { var pages=[{pageName:"task",title:"任务下发",icon:"icon-task"},{pageName:"track",title:"任务跟踪",icon:"icon-track"},{pageName:"report",title:"数据分析",icon:"icon-report"}]; for (var i = 0; i < pages.length; i++) { var href= PROJECT_URL + "/drilling/"+pages[i].pageName; addTab(pages[i].title,href,pages[i].icon); } };
注:第二种图标显示更好看一些。
*点击tab切换页面处理
var PROJECT_PID = parent.PROJECT_ID; var count = 0; var PROJECT_URL = "${ctx}"; $(document).ready(function() { //更改父窗体显示的标签名称 parent.$("#mainContainer").panel({ title : "@钻井工序" }); //设置选项卡页面请求 $('#mytabs').tabs({ border : false, onSelect : function(title) { if (title == '任务下发' && count != 0) { var reqUrl = PROJECT_URL + "/drilling/task"; refreshTab({tabTitle:title,url:reqUrl}); } else if (title == '任务跟踪') { count = 1; var reqUrl = PROJECT_URL + "/drilling/track"; refreshTab({tabTitle:title,url:reqUrl}); } else if (title == '数据分析') { count = 1; var reqUrl = PROJECT_URL + "/drilling/report"; refreshTab({tabTitle:title,url:reqUrl}); } } }); });
纸上得来终觉浅,绝知此事要躬行。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库