实现tabs组件IFrame模式的遮罩效果

来源：互联网发布：课程表管理系统源码编辑：程序博客网时间：2024/06/06 04:30

地址:http://www.easyui.info/archives/1283.html/comment-page-1?replytocom=3577

需求分析

在jQuery Easyui框架中，大多使用url方式(即ajax方式)加载数据的话，都设计了“等待中效果”或者“遮罩效果”。但是实际应用中，并不一定只有ajax方式才需要这些效果，最常见的IFrame其实也需要这种效果，而tabs是使用IFrame频率最高的组件了，本文就来实现tabs组件IFrame模式的遮罩效果。

寻找奠基石

跟ajax不同，IFrame没有请求成功后的回调函数，要实现遮罩的话，我们必须知道在何时关闭遮罩，所以必须能够监控到IFrame是否加载完成才能做出我们想要的遮罩效果。怎样才能知道IFrame是否加载成功了呢？很幸运，我们总有巨人的肩可以站：

var iframe = document.createElement("iframe");
iframe.src = "http://www.baidu.com";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
}
document.body.appendChild(iframe);

如果是IE的话，我们通过attachEvent来注册onload事件，如此一来，IFrame的的onload事件就兼容各个浏览器了。

寻找一件外衣

有了奠基石，我们还得找件可以见人的衣服，遮罩效果当然要做得简洁大方又不失美观才行，我们注意到，Easyui的datagrid组件的遮罩效果就不错，实现起来也不麻烦，就是一个遮罩层，一个消息层，再用相对定位固定住绝对定位，使用top和left配合margin就能实现消息层大体水平垂直居中了。

衣服光漂亮还不行，还得性感，怎么性感呢？当然要露了，要若隐若现才性感，性感才能吸引眼球。所以，我们还需要做一个淡入淡出的效果，遮罩淡出，IFrame淡入。不幸的是，IFrame是个不听说的玩意，它总是忽略自身的z-index属性，所以我只能再用一个div容易包裹IFrame。

实现代码

$(function(){
$('#tabs').tabs({
onAdd:function(title,index){
var $tabBody = $('#tabs').tabs('getTab',title).panel('body');
$tabBody.css({'overflow':'hidden','position':'relative'});
var mask = $('<div style="position:relative;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);"><div>').appendTo($tabBody);
var maskMessage = $('<div style="width:184px;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(\'../../themes/default/images/loading.gif\') no-repeat scroll 5px center;">Processing, please wait ...</div>').appendTo($tabBody);
var containter = $('<div style="position:absolute;width:100%;height:100%;z-index:1;display:none"></div>').appendTo($tabBody);
var iframe = document.createElement("iframe");
iframe.src = "http://www.baidu.com";
iframe.frameBorder = 0;
iframe.height = '100%';
iframe.width = '100%';
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
$([mask[0],maskMessage[0]]).fadeOut('slow',function(){
$(this).remove();
containter.fadeIn('slow');
});
});
} else {
iframe.onload = function(){
$([mask[0],maskMessage[0]]).fadeOut('slow',function(){
$(this).remove();
containter.fadeIn('slow');
});
};
}
containter[0].appendChild(iframe);
}
});
});

效果演示

http://www.easyui.info/easyui/demo/tabs/iframeload.html

更新日志

2013-04-20

为了方便写代码，我们还可以将这个效果封装为tabs组件的一个方法来使用：

/**
* @author {CaoGuangHui}
*/
$.extend($.fn.tabs.methods, {
/**
* 增加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);
var opts = $(this).tabs('options');
var $tabBody = $(this).tabs('getTab',params.tab.title).panel('body');
$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(\'../../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);
});
}
});

使用的时候只要用addIframeTab方法代替原生的add方法就可以了：

$('#tabs').tabs('addIframeTab',{
tab:{title:'iframe'+count++,closable:true},
iframe:{src:'http://www.loststop.com'}
});

2013-05-15

应各位朋友提出的建议，增加updateIframeTab方法，用于刷新iframe模式的tab页，代码进行了重构，但使用方式以及参数基本没变：

/**
* @author {CaoGuangHui}
*/
$.extend($.fn.tabs.methods, {
/**
* 加载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($.browser.msie){
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(\'../../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方法的参数包含以下属性：

名称参数类型描述以及默认值tabobject该参数是对象，其属性列表同于tabs自带add方法的入参属性列表。iframe.srcstring目标框架页面的地址，必填项。iframe.heightstring框架标签iframe的高度，默认值为'100%'。iframe.widthstring框架标签iframe的宽度，默认值为'100%'。iframe.frameBordernumber框架标签iframe的边框宽度，默认值为0。iframe.messagestring加载中效果显示的消息，默认值为'Processing, please wait ...'

updateIframeTab方法的参数包含以下属性：

名称参数类型描述以及默认值whichnumber/stringtab页的index或者标题均可以。iframeobject选项同于addIframeTab方法，不过可以不设置这个参数，不设置的话，则使用原有框架的src刷新。

0 0