转自: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";
}
}
}
});
}