easyui的tabs在徹底渲染以後才顯示出來

若是tabs的初始化都寫在好html中,在網速很慢的狀況下,每一個tab頁在tabs渲染好以前就會顯示出來,並且看起來就是普通的div,體驗不好,解決方式以下兩種:

原來的tabs的寫法:

<div class="easyui-layout" data-options="fit:true" id="costLayOut">
   <div id="tabsdeahan" class="easyui-tabs">
       <div data-options="title: '工程參數',,iconCls:'',iniframe: true,href: ''" name="gccs">工程參數</div>
       <div data-options="title: '費率參數', iconCls:'', iniframe: true,href: ''" name="flcs">費率參數</div>
   </div>
</div>

(一).先隱藏layout,而後在頁面加載完再顯示出來

<div class="easyui-layout" data-options="fit:true" id="costLayOut" style="display:none">
   <div id="tabsdeahan" class="easyui-tabs">
       <div data-options="title: '工程參數',,iconCls:'',iniframe: true,href: ''" name="gccs">工程參數</div>
       <div data-options="title: '費率參數', iconCls:'', iniframe: true,href: ''" name="flcs">費率參數</div>
   </div>
</div>

JS:

$(function({
   $('#costLayOut').show();//頁面加載完再顯示出來
}));

(二)在html中不寫任何tab,全部tab頁的增長都寫在JS中,動態去加上

<div class="easyui-layout" data-options="fit:true" id="costLayOut" style="display:none">
   <div id="tabsdeahan" class="easyui-tabs">  
   </div>
</div>

JS:動態增長每一個tab:

$(function({
  addTab('工程參數','','',"#tabsdeahan",'gccs',true);
  addTab('費率參數','','i',"#tabsdeahan",'flcs',true);
}))

function addTab(title, href,icon,tabsId,name,isIframe){    
    var tt = $(tabsId);    
    if (tt.tabs('exists', title)){//若是tab已經存在,則選中並刷新該tab            
        tt.tabs('select', title);    
        refreshTab({tabTitle:title,url:href});    
    } else {    
         var content="";  
        if (typeof(href) != 'undefined'){    
            content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';    
        } else {    
            content = '';    
        }    
        var addDom = tt.tabs('add',{    
            title:title,
            closable:false,    
            content:content, 
            iniframe: isIframe?isIframe:false,//是否內嵌iframe
            iconCls:icon||'icon-default'    
        }); 
        //被每一個tab增長name屬性,這個是由於須要利用名字作其餘的一些處理,能夠不加   
        if(name){
        	var tab = addDom.tabs('getTab',title);
        	if(tab){
        		tab.attr("name",name);
        	}
        }
    }    
}    

function refreshTab(cfg){    
    var refresh_tab = cfg.tabTitle?$(tabsId).tabs('getTab',cfg.tabTitle):$(tabsId).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.contentWindow.location.href=refresh_url;    
    }    
}