Jquery Easy UI implements the loading effect of the page (similar to Android's ProgressDialog)

Preface

A very common front-end effect, such as when the user clicked on a page of a button sent an asynchronous request, if the response time is too long easy to cause the user to repeat the click, on the one hand, the impact on the user experience is prone to unnecessary service-side pressure, easy UI has a ready-made mask style, simple package can be used, Before reviewing the collection of relevant information and articles, found all introduced is not very complete, so this blog is a complete record of the easy UI to quickly achieve this effect and how to integrate into the project.

ingest, encapsulate, and invoke

First of all, of course, in our project to integrate jquery and Easyui related resource packages, in addition to jquery core JS file, Easyui words generally do not need a complete package, in addition to the core JS file according to the requirements of the reservation part can be, my directory file in the project is:

The next step is to introduce JS and CSS into 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 >

Next is the core of the JS code, a new common.js, the mask style and operation encapsulated into a Maskutil object:

var Maskutil = (function () {var $mask, $MASKMSG; var defmsg = ' processing, please wait a moment ...            '; function init () {if (! $mask) {$mask = $ ("<div class=\" Datagrid-mask mymask\ "></div>"). App          EndTo ("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)-45)/2,top: ($ (window). Height ()-)/2,}                         );              } return {mask:function (msg) {init ();              $mask. Show (); $MASKMSG. HTML (msg| |          DEFMSG). Show ();              }, Unmask:function () {$mask. Hide ();          $maskMsg. Hide (); }      }        }());

As you can see, at initialization, we define 2 Div, the first div sets the datagrid-mask style of the Easyui, that is, by setting the transparency of the entire page to the effect of "masking", this style can be found in Easyui.css:

. 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're centered on, and prompts you with a single line of text, and looks 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;}

You can see that the Maskutil object we encapsulated provides 2 methods: Mask and unmask, which is obvious, one shows Loding, the other is hidden loading, So as long as we introduce the Common.js on the page, we can easily call these two methods to achieve the loding effect.

As we all know about how to invoke it, we all choose to turn on mask when the time-consuming task starts and end mask when the server responds, exactly like the way Android is handled, For example, we have a new progressdialog in activity, usually show dialog when the worker thread is open or asyntask execute, Dialog.dismiss () is then called in the OnPostExecute method when the asynchronous task ends.

is still similar in the web, we can call Maskutil.mask () to open loding before the $.ajax method, and then call Maskutil.unmask () in the Ajax success or error callback method to hide Loding , as I wrote 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 ("Export succeeded, download now?")) {var fileName = Data.filename;window.location.href = "... /.. /filedown/"+ filename+". zip ";}}});}

is not at a glance, I think do not have to do too much explanation, finally look at:

When you click the "Export Excel" button to see the effect, the loding effect is automatically canceled when the server responds successfully. But careful comparison with Android ProgressDialog is not difficult to find a dynamic circular progress bar, Android ProgressDialog as a standard UI control is self-contained circular progress bar, It uses Settitle and setmessage to set the title and content of the loding, and Easyui mask actually comes with this effect, but requires a GIF image, we just need to copy the loading.gif image to Easyui Themes-default-images directory, this GIF map can be found in the downloaded Easyui package, which is a diagram:

After you copy this image to the directory above, clear the browser cache, refresh the page, and click the "Export Excel" button again to see the following:

This time we can see the loading effect perfectly.

Summary

This blog records a simple and common solution of loading in the Web, the core JS file comes from the network, I only do partial analysis and compared with the ProgressDialog in Android, In the future I will also be encountered in the project to summarize the better function of writing to the blog, while learning to summarize, while summing up the accumulation, even if only a little bit is progress. Come on, raito!.

Jquery Easy UI implements the loading effect of the page (similar to Android's ProgressDialog)