EasyUI两种动态添加tab Iframe页面的方法

时间:2022-03-01 21:34:38
/** 动态添加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});
}
}
});
});