當easyui tabs標籤中有多個iframe頁面時，會導致開啟頁面很卡，很慢，如果標籤頁中請求比較多還會導致伺服器瞬間接收到大量請求。所以實現一個非同步初始化標籤頁的方法，即使用者點選指定標籤頁時才會載入對應標籤頁的內容，否則不會載入。

程式碼如下：

/**
 * 非同步標籤頁，動態新增、初始化標籤頁，只有選擇標籤頁時才會載入、初始化實際頁面，頁面支援iframe或者function
 * @param id 標籤元件的ID
 * @param opts 標籤元件的構造引數
 * @param tabsArr 需要動態建立的標籤陣列 
 * <hr>
 * iframe例子1：
 * <hr>
 * [{id:'tab1',page:'page1',title:'標籤1',type:"t",params:{data:{arr:[{value:'1',text:'顯示'}]},state:'1'}}]
 * <hr>
 * function例子2：
 * <hr>
 * [{id:'tab2',title:'標籤2',type:"w",initPanel:function(panel,id){}}] initPanel方法初始化標籤頁，引數panel是當前標籤頁的物件,id為標籤頁的id
 * <hr>
 * 注意：如果想用initPanel初始化已經存在的標籤，那麼標籤陣列中對應的記錄的id和title必須和已經存在的標籤完全相同
 * <hr>
 * @param tabType 需要動態建立的標籤型別，可為空，如果為空，則標籤陣列中的type必須也為空
 * @returns
 * @author chenzhidong
 * @date 2018年2月28日
 */
function AsyncTabs(id,p_opts,tabsArr,tabType){
	var jq = $("#"+id);
	var oldOnSelectFun = p_opts.onSelect;
	if(typeof oldOnSelectFun!="function"){
		oldOnSelectFun = function(){};
	}
	var defaultOptions = {
			fit:true,
			tabsArr:tabsArr,
			tabType:tabType,
			hasOpen:{},
			oldOnSelectFun:oldOnSelectFun,
			onSelect:function(title,index){
				var jq = $(this);
				var opts = jq.tabs("options");
				var panel = $(this).tabs("getTab",index);
				var tabId = panel.attr("id");
				if(!opts.hasOpen[tabId]){
					for(var i=0;i<opts.tabsArr.length;i++){
						if(opts.tabsArr[i].type==opts.tabType && opts.tabsArr[i].id == tabId && !opts.tabsArr[i].disabled){
							if(typeof opts.tabsArr[i].initPanel == "function"){
								opts.tabsArr[i].initPanel.call(this,panel,tabId);
							}else if(!!opts.tabsArr[i].page){
								panel.append($(getIframe(opts.tabsArr[i])));
							}
							opts.hasOpen[tabId]=true;
							break;
						}
					}
				}
				opts.oldOnSelectFun.call(this,title,index);
			}
	}
	var options = $.extend({},p_opts,defaultOptions);
	if(!!options.refresh){
		if(!options.tools){
			options.tools = [];
		}
		options.tools.push({
			iconCls:'icon-reload',handler:function(){
				var panel = container.tabs("getSelected");
				if(!!panel){
					var tabId = panel.attr("id");
					var opts = container.tabs("options");
					for(var i=0;i<opts.tabsArr.length;i++){
						if(opts.tabsArr[i].type==opts.tabType && opts.tabsArr[i].id == tabId && !opts.tabsArr[i].disabled){
							panel.empty();
							if(typeof opts.tabsArr[i].initPanel == "function"){
								opts.tabsArr[i].initPanel.call(this,panel,tabId);
							}else if(!!opts.tabsArr[i].page){
								panel.append($(getIframe(opts.tabsArr[i])));
							}
							break;
						}
					}
				}
			}
		})
	}
	var container = jq.tabs(options);
	function getIframe(t){
		if(!!t.params){
			for(var key in t.params){
				SetWinParam(key,t.params[key],t.page);
			}
		}
		return '<iframe id="'+t.id+'_ifm" src="'
		+PageUrl(t.page)
		+'" style="scrolling:no;border:none;width:100%;height:99.5%;overflow:visible"></iframe>';
	}
	
	(function createTabs(arr,p_type){
		var count = container.tabs("tabs").length;
		var opts = container.tabs("options");
		var selectTab = container.tabs("getSelected");
		var hasSelect = !!selectTab?true:false;
		if(hasSelect){  //修復如果不在tab主div標籤的data-options中設定fit:true，而導致第一個開啟頁面的高度為0的問題
			var p = selectTab.panel("panel").parent();
			selectTab.panel("resize",{width:p.width(),height:p.height()});
		}
		for(var i=0;i<arr.length;i++){
			var t = arr[i];
			if(t.type==p_type){
				if(container.tabs("exists",t.title)){
					if(hasSelect && selectTab.attr("id")==t.id && !t.disabled){
						if(typeof t.initPanel=='function'){
							t.initPanel.call(container,container.tabs("getTab",t.title));
						}
						hasSelect = true;
					}
					continue;
				}
				var tabOpts = {
						title:t.title,
						id:t.id,
						index:count,
						content:'',
						closable:false,
						disabled:t.disabled || false
				};
				if(count==0 && !hasSelect && !t.disabled){
					tabOpts.selected = true;
					hasSelect = true;
				}else{
					if(!hasSelect && !t.disabled){
						tabOpts.selected = true;
						hasSelect = true;
					}else{
						tabOpts.selected = false;
					}
				}
				container.tabs("add",tabOpts);
				count++;
			}
		}
	})(tabsArr,tabType);
	return container;
}

//*************************************  例子1  非同步載入標籤頁 *******************************
	//標籤陣列
	var tabsArr = [
		{id:'tab1',page:'page1',title:'標籤1'},
		{id:'tab2',page:'page2',title:'標籤2'},
		{id:'tab3',page:'page3',title:'標籤3'},
	];
	AsyncTabs("baseSettingTabs",{},tabsArr);
	
//*************************************  例子2 非同步初始化標籤頁（標籤頁不存在） *******************************
	var tabsArr = [
		{id:'tab1',title:'標籤1',initPanel:function(panel,tabId){
			panel.append($('<table id="element-tree"></table>'));
			$("#element-tree").treegrid({
					idField:'Uid',
					treeField:'Title',
					Parent:'Parent',
					showHeader:true,
					//panelHeight:200,
					//toolbar:$("#element-tb"),
					columns:[[
						{field:'Title',title:'名稱',width:65}, 
					]],
					onDblClickRow:function(rowData){
						
					}
			});
		}},
		{id:'tab2',title:'標籤2',initPanel:function(panel,tabId){
			panel.append($('<table id="bp-tree"></table>'))
			$("#dg").datagrid({
				idField:'Uid',
				showHeader:true,
				//panelHeight:200,
				//toolbar:$("#element-tb"),
				columns:[[
					{field:'Title',title:'名稱',width:65}, 
				]],
				onDblClickRow:function(rowData){
					
				}
			}};
		}}
	];
	var tabs = {
			onSelect:function(title,index){
				lastSearch = "noninput";
				$("#search").searchbox("setValue","");
				$("#search").searchbox("options").searcher("","");
			}
	}
	AsyncTabs("element-tabs",tabs,tabsArr);
	
//*************************************  例子3 載入或初始化指定型別的標籤頁 *******************************
	//標籤陣列
	var tabsArr = [
		//業務流標籤
		{id:'tab1',page:'page1',title:'標籤1',type:"s",params:{data:{type:'TypeA'}}},
		{id:'tab2',page:'page2',title:'標籤2',type:"t",params:{data:{type:'TypeB'}}},
	];
	var container = AsyncTabs("container",{},tabsArr,"TypeB");//只會建立TypeB型別的標籤頁
	
//*************************************  例子4 非同步初始化標籤頁（標籤頁已經存在） *******************************
	//  html元素
	<div id="mainTabs" class="easyui-tabs">
		<div title="測試1">
		
		</div>
		<div id="selectManager" title="選擇Manager賬戶">
			<div id="tb">
				<a id="save"></a>
			</div>
			<table id="userList"></table>
		</div>
	</div>
	
	//  程式碼
	
	AsyncTabs("mainTabs",{fit:true},[
		{id:'selectManager',title:"選擇Manager賬戶",initPanel:function(panel){
			initSelectedTab();
		}}
	]);
	
	function initSelectedTab(){
		
		//省略
	}