一个轻量级的网页遮罩层jQuery插件

人心 2012-02-05

使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。

现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下。

一个轻量级的网页遮罩层jQuery插件

其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写。现在就来分析一下这个组件的源码和使用

[javascript]

  1. /** 
  2.  * @部分参数说明 
  3.  */  
  4. (function($){  
  5.     $.fn.extend({  
  6.         //主函数   
  7.         toggleLoading: function(options){  
  8.             // 找到遮罩层   
  9.             var crust = this.children(".x-loading-wanghe");  
  10.             // 当前操作的元素   
  11.             var thisjQuery = this;  
  12.             // 实现toogle(切换遮罩层出现与消失)效果的判断方法   
  13.             if(crust.length>0){  
  14.                 if(crust.is(":visible")){  
  15.                     crust.fadeOut(500);  
  16.                 }else{  
  17.                     crust.fadeIn(500);  
  18.                 }  
  19.                 return this;  
  20.             }  
  21.             // 扩展参数   
  22.             var op = $.extend({  
  23.                 z: 9999,  
  24.                 msg:'数据加载中...',  
  25.                 iconUrl:'images/loading.gif',  
  26.                 width:18,  
  27.                 height:18,  
  28.                 borderColor:'#6bc4f5',  
  29.                 opacity:0.5,  
  30.                 agentW:thisjQuery.outerWidth(),  
  31.                 agentH:thisjQuery.outerHeight()  
  32.             },options);  
  33.               
  34.             if(thisjQuery.css("position")=="static")  
  35.                 thisjQuery.css("position","relative");  
  36.             //var w = thisjQuery.outerWidth(),h = thisjQuery.outerHeight();   
  37.               
  38.             var w = op.agentW,h = op.agentH;                              
  39.             crust = $("<div></div>").css({//外壳   
  40.                 'position''absolute',  
  41.                 'z-index': op.z,  
  42.                 'display':'none',  
  43.                 'width':w+'px',  
  44.                 'height':h+'px',  
  45.                 'text-align':'center',  
  46.                 'top''0px',  
  47.                 'left''0px',  
  48.                 'font-family':'arial',  
  49.                 'font-size':'12px',  
  50.                 'font-weight':'500'  
  51.             }).attr("class","x-loading-wanghe");  
  52.               
  53.             var mask = $("<div></div>").css({//蒙版   
  54.                 'position''absolute',  
  55.                 'z-index': op.z+1,  
  56.                 'width':'100%',  
  57.                 'height':'100%',  
  58.                 'background-color':'#333333',  
  59.                 'top''0px',  
  60.                 'left''0px',  
  61.                 'opacity':op.opacity  
  62.             });  
  63.             //71abc6,89d3f8,6bc4f5   
  64.             var msgCrust = $("<span></span>").css({//消息外壳   
  65.                     'position''relative',  
  66.                     'top': (h-30)/2+'px',  
  67.                     'z-index': op.z+2,  
  68.                     'height':'24px',  
  69.                     'display':'inline-block',  
  70.                     'background-color':'#cadbe6',  
  71.                     'padding':'2px',  
  72.                     'color':'#000000',  
  73.                     'border':'1px solid '+op.borderColor,  
  74.                     'text-align':'left',  
  75.                     'opacity':0.9  
  76.                 });  
  77.             var msg = $("<span>"+op.msg+"</span>").css({//消息主体   
  78.                     'position''relative',  
  79.                     'margin''0px',  
  80.                     'z-index': op.z+3,  
  81.                     'line-height':'22px',  
  82.                     'height':'22px',  
  83.                     'display':'inline-block',  
  84.                     'background-color':'#efefef',  
  85.                     'padding-left':'25px',  
  86.                     'padding-right':'5px',  
  87.                     'border':'1px solid '+op.borderColor,  
  88.                     'text-align':'left',  
  89.                     'text-indent':'0'  
  90.                 });  
  91.             var msgIcon =  $("<img src="+op.iconUrl+//图标   
  92.                     'position''absolute',  
  93.                     'top''3px',  
  94.                     'left':'3px',  
  95.                     'z-index': op.z+4,  
  96.                     'width':'18px',  
  97.                     'height':'18px'  
  98.                 });   
  99.             // 拼装遮罩层   
  100.             msg.prepend(msgIcon);  
  101.             msgCrust.prepend(msg);  
  102.             crust.prepend(mask);  
  103.             crust.prepend(msgCrust);  
  104.             thisjQuery.prepend(crust);  
  105.             // alert(thisjQuery.html());   
  106.             crust.fadeIn(500);  
  107.             //模态设置   
  108.             return this;  
  109.         }  
  110.     });  
  111. })(jQuery);  

相关配置

配置&configure
全部配置默认值说明
z:9999图层z-index,当蒙版遮罩不住时候适当增大其值
msg:数据加载中...提示信息
iconUrl:images/loading.gif提示图片url
height:18图标默认高(px)
width:18图标默认宽(px)
borderColor#6bc4f5提示的边框颜色
opacity:0.5蒙版的透明度
agentW:当前元素的宽度蒙版的宽度
agentH:当前元素的高度蒙版的高度

相关推荐