Easyui之Tabs转化添加遮罩

Easyui中存在页签Tabs,通过页签可以将若干页面集合到一起，但是当tab添加一个远程界面的时候，如果页面加载量较多，会出现长时间的等待，这就需要遮罩。

因为我的项目主要是在tab中添加content,通过iframe加载远程文件,所以下面自定义的遮罩主要是对应iframe来设置的.设置遮罩最主要的是获取iframe是否已经加载完成,

判断iframe是否加载完成的主要代码:

 

if (iframe.attachEvent){       //应对ie浏览器
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){  //对应其他浏览器
        alert("Local iframe is now loaded.");
    };
}

其中iframe是你获取的页面的iframe.

获取了判断iframe是否加载完成的方法，其他的方面就很容易解决了。首先就是要获取iframe,由于在

tabs中，我利用tabs中的onAdd:function(title,index)方法，代码如下:

var $tabBody = $(this).tabs('getTab',index); //获取当前添加的tab页面

var $iframe = $tabBody.find("iframe")[0];   //获取当前tab页面中的iframe.
获取了这些准备工作基本就完成了，组合一下就可以实现tab打开时遮罩，具体代码如下:
onAdd:function(title,index) {
      var $tabBody = $(this).tabs('getTab',index);
      var $container = $('<div style="position:absolute;z-index:1000;top:30px;left:0px;width:100%;height:100%;'+
								           'background:#C9C9C9;text-align:center;padding-top: 20%;">'+
								           '<div class="mask-message" style="z-index:3;width:auto;height:16px;'+
								           'line-height:16px;position:absolute;top:30%;left:40%;border:2px solid #d4d4d4;'+
								           'padding: 12px 5px 10px 30px;background: #ffffff url(\'../../themes/default/images/loading.gif\')'+
								           ' no-repeat scroll 5px center;">正在加载,请稍后...</div></div>').appendTo($tabBody);
      var $iframe = $tabBody.find("iframe")[0];	


      if($iframe.attachEvent) {
	  $iframe.attachEvent("onload", function(){
		$container.remove();	 
	  });
      } else {
	 $iframe.onload = function() {
		$container.remove();	 
	};	
     }
}

本文参考链接：http://blog.csdn.net/programmer_sir/article/details/44840075