[工具类]基于easyui的页面等待提示层,即mask

[javascript]  view plain copy

1. <pre name="code" class="java">/** 
2.  * 使用方法: 
3.  * 开启:MaskUtil.mask(); 
4.  * 关闭:MaskUtil.unmask(); 
5.  *  
6.  * MaskUtil.mask('其它提示文字...'); 
7.  */  
8. var MaskUtil = (function(){  
9.       
10.     var $mask,$maskMsg;  
11.       
12.     var defMsg = '正在处理，请稍待。。。';  
13.       
14.     function init(){  
15.         if(!$mask){  
16.             $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");  
17.         }  
18.         if(!$maskMsg){  
19.             $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")  
20.                 .appendTo("body").css({'font-size':'12px'});  
21.         }  
22.           
23.         $mask.css({width:"100%",height:$(document).height()});  
24.           
25.         var scrollTop = $(document.body).scrollTop();  
26.           
27.         $maskMsg.css({  
28.             left:( $(document.body).outerWidth(true) - 190 ) / 2  
29.             ,top:( ($(window).height() - 45) / 2 ) + scrollTop  
30.         });   
31.                   
32.     }  
33.       
34.     return {  
35.         mask:function(msg){  
36.             init();  
37.             $mask.show();  
38.             $maskMsg.html(msg||defMsg).show();  
39.         }  
40.         ,unmask:function(){  
41.             $mask.hide();  
42.             $maskMsg.hide();  
43.         }  
44.     }  
45.       
46. }());  

 

效果图: