jQuery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)



前言



很常用的一种前端效果,比如当用户点击网页的某个按钮发送了一条异步请求,如果响应时间过长容易导致用户重复点击,一方面影响用户体验一方面容易造成不必要的服务端压力,Easy UI有现成的mask样式,简单封装一下就可以使用,之前查阅搜集了相关资料和文章,发现都介绍的都不是很完整,所以本篇blog就完整的记录一下通过Easy UI快速实现这种效果以及如何集成到项目中。



引入、封装和调用



首先当然是在我们的项目中集成jquery以及easyui的相关资源包,除了jquery的核心js文件,easyui的话一般也不需要完整的包,除了核心js文件之外根据需求保留部分即可,我在项目中的目录文件是:

jQuery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)_第1张图片

接下来就是在jsp页面中引入js和css了:








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

var MaskUtil = (function(){  
    
    var $mask,$maskMsg;  
      
    var defMsg = '正在处理,请稍待。。。';  
      
    function init(){  
        if(!$mask){  
            $mask = $("
").appendTo("body"); } if(!$maskMsg){ $maskMsg = $("
"+defMsg+"
") .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";
				}
			}
		}
	});
}

是不是一目了然,我觉得不用做过多说明了,最后看一下效果图:

jQuery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)_第2张图片


当点击“导出Excel”按钮即可看到上图效果,当服务端响应成功之后Loding效果会自动取消。但仔细和Android的ProgressDialog比较一下不难发现少了一个动态的圆形进度条,Android中的ProgressDialog作为一个标准的UI控件是自带圆形进度条的,它通过setTitle和setMessage来设置Loding的标题和内容,而easyui的mask其实也是自带这种效果的,但是需要一张gif图片,我们只需要把loading.gif这张图片拷贝到easyui的themes-default-images目录下即可,这张gif图可以在下载好的easyui包中找到,即这样一张图:


将这张图拷贝到上面说的目录之后,清理一下浏览器缓存,刷新页面,再次点击“导出Excel”按钮,即可看到如下的效果图:

jQuery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)_第3张图片

这次就可以完美的看到我们的Loading效果了。



总结



本篇blog记录了web中Loading的一种较为简单和常用的解决方案,核心js文件来自网络,我仅仅做了部分分析并且和Android中的ProgressDialog做了比较,以后我也会把项目中遇到的比较好的功能总结一下写到blog中,边学习边总结,边总结边积累,哪怕只有一点点也是进步。加油,Raito!

你可能感兴趣的:(EasyUI)