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

需求分析

在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。

实现代码

/**  
 * @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刷新。

使用的时候只要调用addIframeTab方法就可以了：

 $('#tabs').tabs('addIframeTab',{      

   tab:{title:'iframe'+count++,closable:true},     

    iframe:{src:'http://www.loststop.com'}     

});