Jquery Easy UI 实现页面的Loading效果（类似于Android的ProgressDialog）

转自：http://www.bubuko.com/infodetail-813813.html

 

<!-- jquery core -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.8.0.min.js"></script>
<!-- easyui -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
<script language="javascript"  src="${pageContext.request.contextPath}/js/easyui/locale/easyui-lang-zh_CN.js"></script>

接下来就是核心的js代码了，新建一个common.js，将mask的样式以及操作封装成一个MaskUtil对象：

var MaskUtil = (function(){  
    
    var $mask,$maskMsg;  
      
    var defMsg = '正在处理，请稍待。。。';  
      
    function init(){  
        if(!$mask){  
            $mask = $("<div class=\"datagrid-mask mymask\"></div>").appendTo("body");  
        }  
        if(!$maskMsg){  
            $maskMsg = $("<div class=\"datagrid-mask-msg mymask\">"+defMsg+"</div>")  
                .appendTo("body").css({'font-size':'12px'});
        }  
          
        $mask.css({width:"100%",height:$(document).height()});  
          
        $maskMsg.css({  
            left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2,
        });   
                  
    }  
      
    return {  
        mask:function(msg){  
            init();  
            $mask.show();  
            $maskMsg.html(msg||defMsg).show();  
        }  
        ,unmask:function(){  
            $mask.hide();  
            $maskMsg.hide();  
        }  
    }  
      
}());  

可以看到，在初始化时，我们定义了2个div，第一个div设置了easyui的datagrid-mask样式，即通过设置整个页面的透明度来达到“遮蔽”的那种效果，在easyui.css可以找到这个样式：

.datagrid-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  filter: alpha(opacity=30);
  display: none;
}

而第二个div设置了datagrid-mask-msg样式，即是我们居中的小dialog窗体，并通过一行文字来进行提示，同样的看看它的 css 样式：

.datagrid-mask-msg {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  padding: 12px 5px 10px 30px;
  width: auto;
  height: 16px;
  border-width: 2px;
  border-style: solid;
  display: none;
}

可以看到我们封装的这个MaskUtil对象提供了2个方法：mask和unmask，显而易见，一个显示Loding，另一个是隐藏Loading，这样只要我们在页面引入了common.js，我们就可以方便的调用这两个方法来实现Loding效果了。

关于如何调用想必大家都已经很清楚了，我们都会选择在耗时任务开始的时候开启mask，当得到服务端响应的时候结束mask，完全类似于Android中的处理方式，比如我们在Activity中new一个ProgressDialog，一般在工作线程开启或者AsynTask execute时show dialog，而当异步任务结束时会在onPostExecute方法中再调用dialog.dismiss().

在web中依然是类似的，我们可以在$.ajax方法之前调用MaskUtil.mask()去开启Loding，而在ajax的success或者error的回调方法中再调用MaskUtil.unmask()来隐藏Loding，比如我在项目中就是这样写的：

function getExportExcel2() {
	MaskUtil.mask();
	$.ajax({
		url : '../../app/studentInfo/getExportStudentInfoExcelTwo',
		method : 'post',
		cache : false,
		success : function(data) {
			MaskUtil.unmask();
			if ("ok" == data.data) {
				if (confirm("导出成功,是否立即下载?")) {
					var fileName = data.fileName;
					window.location.href = "../../filedown/" + fileName
							+ ".zip";
				}
			}
		}
	});
}