地址: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方法的参数包含以下属性:
名称 | 参数类型 | 描述以及默认值 |
---|---|---|
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刷新。 |