要求: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;
}