Jquery Easy UI implements the page Loading effect (similar to the Android ProgressDialog) and jqueryuidialog

Jquery Easy UI implements the page Loading effect (similar to the Android ProgressDialog) and jqueryuidialog

Preface

A common front-end effect. For example, when a user clicks a button on a webpage and sends an asynchronous request, if the response time is too long, the user may click it again, on the one hand, the impact on user experience is Easy to cause unnecessary server pressure. The Easy UI has a ready-made mask style, which can be used after a simple encapsulation. I have consulted and collected relevant materials and articles, the results are not completely described. Therefore, this blog will record how to quickly achieve this effect through Easy UI and how to integrate it into the project.

Import, encapsulate, and call

First of all, we integrate resource packages related to jquery and easyui in our projects. In addition to the core js files of jquery, easyui generally does not require a complete package, in addition to the core js file, you can retain the part as needed. The directory file in my project is:

Next we will introduce js and css on the jsp page:

<!-- 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>

The next step is the core js Code. Create a common. js and encapsulate the mask style and operations into a MaskUtil object:

Var MaskUtil = (function () {var $ mask, $ maskMsg; var defMsg = 'is being processed. Please wait... '; 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 '});} extends 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 ();}}}());

Refer can find this style:

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

The second div sets the datagrid-mask-msg style, which is the small dialog form we center, and prompts through a line of text. Let's also look at its css style:

.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;}

We can see that the encapsulated MaskUtil object provides two methods: mask and unmask. Obviously, one shows Loding and the other hides Loading, so long as we introduce common on the page. js, we can easily call these two methods to achieve the Loding effect.

We have already understood how to call it. We will all choose to enable the mask at the beginning of the time-consuming task, and end the mask when the server returns a response, similar to the processing method in Android, for example, if we create a ProgressDialog in the Activity, we usually show the dialog when the working thread is enabled or AsynTask execute. When the asynchronous task ends, we will call the dialog in the onPostExecute method. dismiss ().

It is still similar in the web, we can go to $. call MaskUtil before the ajax method. mask () enables Loding, and CALLS MaskUtil In the callback method of ajax success or error. unmask () to hide the Loding. For example, I wrote this in the project:

Function getExportExcel2 () {MaskUtil. mask (); $. ajax ({url :'.. /.. /app/studentInfo/getExportStudentInfoExcelTwo ', method: 'post', cache: false, success: function (data) {MaskUtil. unmask (); if ("OK" = data. data) {if (confirm ("exported successfully, download now? ") {Var fileName = data. fileName; window. location. href = ".. /.. /filedown/"+ fileName + ". zip ";}}}});}

Is it clear? I don't think I need to explain it too much. Let's take a look:

Click "Export Excel" to see the effect. After the server responds successfully, the Loding effect is automatically canceled. Copy this image to the themes-default-images directory of easyui. This gif image can be found in the downloaded easyui package, that is, this image:

Copy the image to the preceding directory, clear the browser cache, refresh the page, and click "Export Excel" again to see the following:

This time we can see our Loading effect perfectly.

Summary

This blog record a simple and common solution for Loading on the web. The core js file comes from the network. I only did some analysis and compared it with ProgressDialog in Android, in the future, I will write a summary of the better features in the project into a blog, learn and summarize, and accumulate. Even if there is only a little bit of progress. Come on, Raito!