JQuery Plugin: mask + data loading... (Features: Cover what you want to cover, cover what you want to cover), jquery mask
Data loading is involved in many projects. Data Loading may take 2-3 seconds. To give a friendly prompt, a [data loading...] is usually given ...] . Today, a prompt box is provided.
Go to the official jQuery website to see how to write the jQuery plug-in, and then start writing. Write down such a plug-in and use it in the project for a little optimization. The following figure shows the test diagram when I wrote this plug-in:
This figure simulates the display of the prompt box before data loading. This table is written on the page. The blue background is the mask layer.
(Function ($) {$. fn. extend ({/*** open the mask and display a piece of text. * @ Param {String} msg [displayed text] * @ param {String} imgsrc [image position] * @ return {void} */openMask: function (msg, imgsrc) {// var loadDiv = $ ("body "). find (". _ mask_loadDiv "); var loadDiv = this. find (". _ mask_loadDiv "); if (! LoadDiv |! LoadDiv [0]) {// add Mask var loadDiv = $ ("<div class = '_ mask_loadDiv' style = 'position: absolute; z-index: 99999; height: 40px; background: # FFF; border: 1px solid # ACE '> </div> "); if (! Imgsrc) {// specify the default image var scripts = document. getElementsByTagName ("script"); for (var I = 0; I <scripts. length; I ++) {if (scripts [I]. src. indexOf ("mask ")! =-1) {var scriptSrc = scripts [I]. src; var uri = scriptSrc. substring (0, scriptSrc. lastIndexOf ("/"); imgsrc = uri + "/images/mask_loading.gif ";}}} var contentDiv = $ ("<div class = '_ mask_content' style = 'position: relative; text-align: center; '>"); var fontsize = 12; // loadDiv width = msg width + img width var loadDiv_width = msg. length * fontsize + 16 + 3; contentDiv.css ("width", loadDiv_width); loadDiv.css ("width", loadDiv_width); if (Imgsrc) {contentDiv. append (" "). append ("<span style = 'font-size:" + fontsize + "px; margin-left: 2px; vertical-align: text-top '> "+ msg +" </span> ");} this. append (loadDiv. append (contentDiv); // $ ("body "). append (loadDiv. append (contentDiv);/* loadDiv [0]. style. top = this [0]. offsetTop + (this [0]. offsetHeight-loadDiv [0]. offsetHeight)/2; loadDiv [0]. style. left = this [0]. offsetLeft + (this [0]. offsetWidth-loadDiv [0]. offsetWidth)/2; loadDiv [0]. style. paddingTop = (loadDiv [0]. offsetHeight-contentDiv [0]. offsetHeight)/2; */loadDiv.css ("top", this [0]. offsetTop + (this [0]. offsetHeight-loadDiv [0]. offsetHeight)/2); loadDiv.css ("left", this [0]. offsetLeft + (this [0]. offsetWidth-loadDiv [0]. offsetWidth)/2); loadDiv.css ("padding-top", (loadDiv [0]. offsetHeight-content Div [0]. offsetHeight)/2);} loadDiv.css ("z-index", 99999425.css ("display", "block"); return this ;}, closeMask: function () {// var loadDiv = $ ("body "). find (". _ mask_loadDiv "); var loadDiv = this. find (". _ mask_loadDiv "); if (loadDiv) loadDiv.css (" display "," none ").css (" z-index ",-99999); return this ;}});}) (jQuery); // * // This is the information display box in the mask layer, this will be added to the <body> or target element <div class = "_ mask_loadDiv"> <div class = "_ mask_content "> <span> msg </span> </div> // This is the target, to display the mask layer <div id = "target"> </div> // you only need the following code: $ ("# target "). openMask ("loading data... "); // Hide the dialog box. You only need to: $ (" # target "). closeMask ();*/
Because there are not many CSS involved, we did not follow the principles of HTML, JS, and CSS separation, but wrote CSS in this JS.
Test Page code:
<Html>The focus of writing this plug-in is: top, left, and z-index ).
To understand these attributes, you can refer to the blog about CSS position and layout.
Source code see: http://files.cnblogs.com/f1194361820/jquery-mask.zip
There is a pop-up box
Ability to customize positioning and scroll with screen without Jitter
You can also set the residence and lock screen
The tutorials and source code are provided.
Reference: www.blueidea.com/..20.12497
Jquery + ajax: when interacting with the background, a mask layer is displayed and an animation is loaded. How can this problem be solved?
Function doaction ()
{
// Display the mask layer and wait for the animation
Ajax ({......
Success: function (data ){
// Process data
// Remove the Mask Layer
}})
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
