Examples of jQuery plug-in usage in the lightweight web page mask layer, and examples of jquery masks

Examples of jQuery plug-in usage in the lightweight web page mask layer, and examples of jquery masks

This document describes the usage of the jQuery plug-in the lightweight Web mask layer. Share it with you for your reference. The details are as follows:

The advantage of using jQuery is that many people write some components for it, and some components can be found to complete the functions required by the project.

Now another requirement is that when you click a button, you are not allowed to perform any operations. Instead, a loading prompt box is displayed at the mask layer. The effect is as follows.

In fact, this requirement is very simple, but many components are too large compared to this demand. I found a good component on the internet, and I did not write it above. Now let's analyze the source code and usage of this component.

/*** @ Partial parameter description */(function ($) {$. fn. extend ({// main function toggleLoading: function (options) {// find the mask layer var crust = this. children (". x-loading-wanghe "); // var thisjQuery = this, the element of the current operation; // if (crust. length> 0) {if (crust. is (": visible") {crust. fadeouts (500);} else {crust. fadeIn (500);} return this;} // extension parameter var op = $. extend ({z: 9999, msg: 'loading data... ', iconUrl: 'images/loading.gif', width: 18, height: 18, borderColor: '#6bc4f5', opacity: 0.5, agentW: thisjQuery. outerWidth (), agentH: thisjQuery. outerHeight ()}, options); if(thisjQuery.css ("position") = "static") thisjQuery.css ("position", "relative"); // var w = thisjQuery. outerWidth (), h = thisjQuery. outerHeight (); var w = op. agentW, h = op. agentH; crust = $ ("<div> </div>" detail .css ({// shell 'position': 'absolute ', 'z-Index': op. z, 'display': 'none', 'width': w + 'px', 'height': h + 'px', 'text-align ': 'center ', 'top': '0px ', 'left': '0px', 'font-family ': 'arial', 'font-size': '12px ', 'font-weight': '000000 '}). attr ("class", "x-loading-wanghe"); var mask = $ ("<div> </div>" ).css ({// mask 'position ': 'absolute ', 'z-Index': op. z + 1, 'width': '000000', 'height': '000000', 'background-color': '# 000000', 'top': '0px ', 'left': '0px ', 'opacity': op. opacity}); // 71abc6, 89d3f8, 6bc4f5 var ms0000ust =ust ("<span> </span>" pai.css ({// message housing 'position': 'relative ', 'top': (h-30)/2 + 'px ', 'z-Index': op. z + 2, 'height': '24px ', 'display': 'inline-Block', 'background-color':' # cadbe6 ', 'padding ': '2px ', 'color':' #000000 ', 'border': '1px solid' + op. borderColor, 'text-align ': 'left', 'opacity': 0.9}); var msg = $ ("<span>" + op. msg + "</span>" detail .css ({// Message Subject 'position': 'relative ', 'margin': '0px ', 'z-Index': op. z + 3, 'Line-height': '22px ', 'height': '22px', 'display': 'inline-Block', 'background-color ': '# efefef', 'padding-left': '25px', 'padding-Right': '5px ', 'border': '1px solid' + op. borderColor, 'text-align ': 'left', 'text-indent': '0'}); var msgIcon = $ ("
Related Configuration
Configuration & configure




 
 
 
  
 
   
 
    
All configurations
 
    
Default Value
 
    
Description
 
   
 
   
 
    
Z:
 
    
9999
 
    
Layer z-index. When the mask cannot be masked, increase its value as appropriate.
 
   
 
   
 
    
Msg:
 
    
Loading data...
 
    
Prompt information
 
   
 
   
 
    
IconUrl:
 
    
Images/loading.gif
 
    
Image url prompt
 
   
 
   
 
    
Height:
 
    
18
 
    
The default height of the icon (px)
 
   
 
   
 
    
Width:
 
    
18
 
    
Default width of the icon (px)
 
   
 
   
 
    
BorderColor
 
    
#6bc4f5
 
    
Border color of the prompt
 
   
 
   
 
    
Opacity:
 
    
0.5
 
    
Mask transparency
 
   
 
   
 
    
AgentW:
 
    
Width of the current element
 
    
Mask width
 
   
 
   
 
    
AgentH:
 
    
Height of the current element
 
    
Mask height
 
   
 
  

 

I hope this article will help you with jquery programming.