要求:tabs里面的每个tab都是一个iframe,每个iframe可以点击刷新小圈圈进行刷新,默认不加载tab内容,只有选中的时候,如果iframe没有初始化,没有初始化,则初始化;初始化了,则判断iframe的url是否和新的url一致,如果一致,则不刷新;如果不一致,则刷新iframe,主要是防止重复刷新。
html:
js:
$(function(){
initTabs();
});
function initTabs(){
var url = "";
$("#myTabs").tabs({
onSelect:function(title,index){
var tab = $(this).tabs('getTab',index);
var tabName=$(tab).panel("options").title;
switch(tabName){
case '合同列表':
url="./queryContract";
break;
case '决算批覆':
url = finalReplyUrl;
break;
}
if (!checkInitIframe(tab) || !isSameIframe(tab,url)){
//如果tab没有url,或者和前一个url不是同一个,则刷新iframe
refreshMyTab(tab,url);
}
},
onUnselect:function(title,index){
}
});
addTabByNewVersion('合同列表','','icon-hamburg-attibutes',"#myTabs",'htlb',true,true,false);
addTabByNewVersion('决算批覆','','icon-hamburg-attibutes',"#myTabs",'jspf',true,false,false);
}
/**
* 新版本easyui新建tab
* @param title
* @param href
* @param icon
* @param tabsId
* @param name
* @param isIframe
* @param isSelected
* @returns
*/
function addTabByNewVersion(title, href,icon,tabsId,name,isIframe,isSelected,closable,notIframeContent,scrollAuto,noRefresh){
var closableVal = true;
if(typeof closable != 'undefined'){
closableVal = closable;
}
mainTab = $(tabsId);
var tab=mainTab.tabs("tabs");
var ret=0;
for (var i = 0; i < tab.length; i++) {
var obj2=tab[i].panel("options");
if(obj2.title == title){
ret=2;
break;
}
}
var content = null;
var scrolling = "no";
var refresh = true;//默认刷新
if(scrollAuto){
scrolling = "auto";
}
var tools = [{
iconCls:'icon-mini-refresh',
handler:function(){
//var iframe = $('.panel:visible > .panel-body > iframe').get(0);//有多个iframe会出现混乱
var iframe = $(this).parents('.tabs-header').next().find('.panel:visible > .panel-body > iframe').get(0);
var src2 = $(iframe).attr("src2");
if(src2){ //点击刷新小圈圈,利用src2来进行刷新,这个主要是iframe不刷新url,只改变src2,把src2保存为iframe最新的url
$(iframe).attr("src2","");
$(iframe).attr("src",src2);
}else{
iframe.contentDocument.location.reload(true);
}
}
}];
if(noRefresh){
//不需要刷新
tools = [];
}
if(isIframe){
content = '<iframe scrolling="'+scrolling+'" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>';
}else{
content = notIframeContent;
}
var opts={
title: title, iniframe: true, closable: closableVal, refresh: refresh, iconCls: icon, repeatable: true,content:content,
selected: isSelected?true:false,
tools:tools
};
switch(ret)
{
case 0:
var addDom = mainTab.tabs("add", opts);
if(name){
var tab = addDom.tabs('getTab',title);
if(tab){
tab.attr("name",name);
}
}
break;
case 1:
var addDom = mainTab.tabs("add", opts);
if(name){
var tab = addDom.tabs('getTab',title);
if(tab){
tab.attr("name",name);
}
}
break;
case 2:
mainTab.tabs("select", title);
break;
default:
break;
}
}
//根据指定url刷新iframe
function refreshMyTab(tab,src){
$(tab.find('iframe')[0]).attr('src',src);
// tab.panel("options")["href"] = src;
}
//刷新iframe
function reloadMyTab(tab){
var src = $(tab.find('iframe')[0]).attr('src');
refreshMyTab(tab,src);
}
//改变iframe的src2为最新的url,这个主要是iframe不整个刷新,只是执行iframe里面的某个方法进行刷新数据,那么就要///把最新的url保存起来,在点击刷新小圈圈的时候使用
function chageTabUrl(tab,newUrl){
$(tab.panel("body").find("iframe")[0]).attr("src2",newUrl);
}
//判断iframe是否有url,即iframe是否已经初始化
function checkInitIframe(tab){
return $(tab.find('iframe')[0]).attr('src');
}
//判断iframe的url是否和最新的url是否相同
function isSameIframe(tab,src){
if($(tab.find('iframe')[0]).attr('src') == src){
return true;
}
return false;
}