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

地址: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 = $('"position:relative;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);">').appendTo($tabBody);
             var maskMessage = $('"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 ...

').appendTo($tabBody);   

            var containter = $('"position:absolute;width:100%;height:100%;z-index:1;display:none">

').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 = $('"position:absolute;z-index:2;width:100%;height:100%;background:#ccc;z-index:1000;opacity:0.3;filter:alpha(opacity=30);">').appendTo($tabBody);
             var $maskMessage = $('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 ...') + '

').appendTo($tabBody);   

            var $containterMask = $('"position:absolute;width:100%;height:100%;z-index:1;background:#fff;">

').appendTo($tabBody);   

            var $containter = $('"position:absolute;width:100%;height:100%;z-index:0;">

').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);   

        });   

    }   

});