转载1：
实现tabs组件IFrame模式的遮罩效果 | WebUI框架使用参考
转载2：
项目感受之Easyui tabs的herf和content属性
页面html代码+js引用：
<script src="./jeui/jquery.min.js" type="text/javascript"></script>
<script src="./jeui/jquery.easyui.min.js" type="text/javascript"></script>
<link href="./jeui/themes/default/easyui.css" rel="stylesheet"
type="text/css" />
<link href="./jeui/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="./css/index.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery.tabs.extend.js" type="text/javascript"></script>
<div id="center" data-options="region:'center',loadingMessage:'正在加载...'"
class="easyui-tabs">
</div>
页面js代码：
function addTab(title,url){
var c = $('#layout').layout('panel','center');
if (c.tabs('exists', title)){
c.tabs('select', title);
} else {
$('#center').tabs('addIframeTab',{
//tab参数为一对象，其属性同于原生add方法参数
tab:{
title:title,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
$('#center').tabs('updateIframeTab',{'which':title,'iframe':{src:url,message:'正在刷新...'}});
}
}]
},
//iframe参数用于设置iframe信息，包含：
//src[iframe地址],frameBorder[iframe边框,，默认值为0],delay[淡入淡出效果时间]
//height[iframe高度，默认值为100%],width[iframe宽度，默认值为100%]
iframe:{src:url,message:'正在加载 ...'}
});
$('#center').tabs('addEventParam');
}
}
jquery.tabs.extend.js
js中判断IE 释放内存部分原文是：
if($.browser.msie){
CollectGarbage();
}
由于jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。
/**
* @author {CaoGuangHui}
*/
$.extend($.fn.tabs.methods, {
/**
* tabs组件每个tab panel对应的小工具条绑定的事件没有传递事件参数
* 本函数修正这个问题
* @param {[type]} jq [description]
*/
addEventParam: function(jq) {
return jq.each(function() {
var that = this;
var headers = $(this).find('>div.tabs-header>div.tabs-wrap>ul.tabs>li');
headers.each(function(i) {
var tools = $(that).tabs('getTab', i).panel('options').tools;
if (typeof tools != "string") {
$(this).find('>span.tabs-p-tool a').each(function(j) {
$(this).unbind('click').bind("click", {
handler: tools[j].handler
}, function(e) {
if ($(this).parents("li").hasClass("tabs-disabled")) {
return;
}
e.data.handler.call(this, e);
});
});
}
})
});
},
/**
* 加载iframe内容
* @param {jq Object} jq [description]
* @param {Object} params params.which:tab的标题或者index;params.iframe:iframe的相关参数
* @return {jq Object} [description]
*/
loadTabIframe:function(jq,params){
return jq.each(function(){
var $tab = $(this).tabs('getTab',params.which);
if($tab==null) return;
var $tabBody = $tab.panel('body');
//销毁已有的iframe
var $frame=$('iframe', $tabBody);
if($frame.length>0){
try{//跨域会拒绝访问，这里处理掉该异常
$frame[0].contentWindow.document.write('');
$frame[0].contentWindow.close();
}catch(e){
//Do nothing
}
$frame.remove();
if(!$.support.leadingWhitespace){//判断IE
CollectGarbage();//释放内存
}
}
$tabBody.html('');
$tabBody.css({'overflow':'hidden','position':'relative'});
var $mask = $('<div style="position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody);
var $maskMessage = $('<div class="mask-message" style="z-index:3;width:auto;height:16px;line-height:16px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-92px;border:2px solid #d4d4d4;padding: 12px 5px 10px 30px;background: #ffffff url(\'./jeui/themes/default/images/loading.gif\') no-repeat scroll 5px center;">' + (params.iframe.message || 'Processing, please wait ...') + '</div>').appendTo($tabBody);
var $containterMask = $('<div style="position:absolute;width:100%;height:100%;z-index:1;background:#fff;"></div>').appendTo($tabBody);
var $containter = $('<div style="position:absolute;width:100%;height:100%;z-index:0;"></div>').appendTo($tabBody);
var iframe = document.createElement("iframe");
iframe.src = params.iframe.src;
iframe.frameBorder = params.iframe.frameBorder || 0;
iframe.height = params.iframe.height || '100%';
iframe.width = params.iframe.width || '100%';
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
$([$mask[0],$maskMessage[0]]).fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
if($(this).hasClass('mask-message')){
$containterMask.fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
});
}
});
});
} else {
iframe.onload = function(){
$([$mask[0],$maskMessage[0]]).fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
if($(this).hasClass('mask-message')){
$containterMask.fadeOut(params.iframe.delay || 'slow',function(){
$(this).remove();
});
}
});
};
}
$containter[0].appendChild(iframe);
});
},
/**
* 增加iframe模式的标签页
* @param {[type]} jq [description]
* @param {[type]} params [description]
*/
addIframeTab:function(jq,params){
return jq.each(function(){
if(params.tab.href){
delete params.tab.href;
}
$(this).tabs('add',params.tab);
$(this).tabs('loadTabIframe',{'which':params.tab.title,'iframe':params.iframe});
});
},
/**
* 更新tab的iframe内容
* @param {jq Object} jq [description]
* @param {Object} params [description]
* @return {jq Object} [description]
*/
updateIframeTab:function(jq,params){
return jq.each(function(){
params.iframe = params.iframe || {};
if(!params.iframe.src){
var $tab = $(this).tabs('getTab',params.which);
if($tab==null) return;
var $tabBody = $tab.panel('body');
var $iframe = $tabBody.find('iframe');
if($iframe.length===0) return;
$.extend(params.iframe,{'src':$iframe.attr('src')});
}
$(this).tabs('loadTabIframe',params);
});
}
});
addIframeTab方法的参数包含以下属性：
|
名称 |
参数类型 |
描述以及默认值 |
|---|---|---|
| tab | object | 该参数是对象，其属性列表同于tabs自带add方法的入参属性列表。 |
| iframe.src | string | 目标框架页面的地址，必填项。 |
| iframe.height | string | 框架标签iframe的高度，默认值为’100%’。 |
| iframe.width | string | 框架标签iframe的宽度，默认值为’100%’。 |
| iframe.frameBorder | number | 框架标签iframe的边框宽度，默认值为0。 |
| iframe.message | string | 加载中效果显示的消息，默认值为’Processing, please wait …’ |
updateIframeTab方法的参数包含以下属性：
|
名称 |
参数类型 |
描述以及默认值 |
|---|---|---|
| which | number/string | tab页的index或者标题均可以。 |
| iframe | object | 选项同于addIframeTab方法，不过可以不设置这个参数，不设置的话，则使用原有框架的src刷新。 |
使用的时候只要调用addIframeTab方法就可以了：
$('#tabs').tabs('addIframeTab',{
tab:{title:'iframe'+count++,closable:true},
iframe:{src:'http://www.loststop.com'}
});
Jquery EasyUI -tabs 的Href方式加载数据有几个特点：
第一个就是被加载的页面只有body元素内部的内容才会被加载，也就是jQuery的ajax请求的只是html片段，还有在加载远程url时有遮罩效果，也就是“等待中……”效果，用户体验较好。
但是当加载的页面布局较为复杂，或者有较多的js脚本需要运行的时候，编码往往就需要谨慎了，容易出问题。href的常见问题：
1.href只加载目标URL的html片段
这个特性是由jQuery封装的ajax请求处理机制所决定的，所以目标URL页面里不需要有html,head,body等标签，即使有这些元素，也会被忽略，所以放在head标签里面的任何脚本也不会被引入或者执行。
2.短暂的页面混乱：
href链接的页面比较复杂的时候，easyui对其渲染往往需要一个较长的过程，这时候，加载进来的html片段毫无布局可以，过一会自动会好，这时候easyui已经完成对它的渲染。如何避免这个混乱的过程呢，还得靠easyui的一个基础插件——解析器(Parser)。
Parser有个onComplete事件，这个事件就是指easyui对页面完成渲染时触发，这样思路就很清晰了：用一个div遮罩住让被加载进来的html片段，在onComplete事件中，让这个div淡出，这时候渲染好的html片段就能美人出浴了，同时还整了个等待中的效果。这样要做两件事：
第一是在要加载的html片段中放一个遮罩用的div：
<div id='loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB;text-align:center;padding-top: 20%;">
<image src='style/images/loading.gif'/>
</div>
第二是在被加载的html片段尾部处理相关事件：
<script>
function show(){
$("#loading").fadeOut("normal", function(){
$(this).remove();
});
}
var delayTime;
$.parser.onComplete = function(){
if(delayTime)
clearTimeout(delayTime);
delayTime = setTimeout(show,500);
}
</script>
需要注意的是，如果多个tab页面都使用了onComplete事件，当前定义的会覆盖之前定义的。其实每次easyui渲染完成均会调用onComplete事件，所以每打开一个包含easyui控件的tab页，onComplete事件就会被调用。
3.html片段的easyui组件相关脚本莫名地报错：
其实这个现象是跟第一个现象的原因一样的，easyui完成对html片段渲染需要一定的时间，页面越复杂，耗时越长，这时候难以避免html存在的脚本存在对easyui某些插件的调用，比如datagrid等，这个时候就会报错，解决方案同上，将这些脚本放到onComplete事件里处理，也就保证了渲染完成前，不会被执行。
4.放在window里面表单验证的提示信息会乱串：
这个现象应该是插件自身的bug，对位置的计算没有考虑到这些特殊的事情，解决方式可以投机取巧，在打开window后，让表单不符合验证的input获得焦点就可以了。
content方式加载数据的特点：
1. 比较灵活，你可以在脚本里面拼写html代码，然后赋值给tab的content属性，不过这种写法会使得代码易读性变差。
2. 可以把iframe赋给content，把一个iframe嵌入也就没有什么不能完成的了。
3. 使用iframe会造成客户端js重复加载，浪费资源，比如说你主页面要引用easyui的库，你的iframe也要引用.