輕量級網頁遮罩層jQuery外掛用法實例_jquery

本文實例講述了輕量級網頁遮罩層jQuery插件用法。分享給大家供大家參考。具體如下：

使用jQuery的好處是很多人為它寫一些組件，而在專案所需用到功能也都可以找到一些組件去完成。

現在又這樣一個需求當使用者點擊一個按鈕後不允許使用者進行任何的操作，取而代之的是彈出一個遮罩層顯示一個loading提示框，效果如下。

其實這個需求很簡單，但很多組件體積相對這個需求來說太大了，在網上瞎溜達了找到了一個還不錯的組件，作者是上面也沒有寫。現在就來分析一下這個元件的源碼和使用量

/**
 * @部分参数说明
 */
(function($){
 $.fn.extend({
  //主函数
  toggleLoading: function(options){
      // 找到遮罩层
    var crust = this.children(".x-loading-wanghe");
      // 当前操作的元素
      var thisjQuery = this;
      // 实现toogle(切换遮罩层出现与消失)效果的判断方法
    if(crust.length>0){
      if(crust.is(":visible")){
        crust.fadeOut(500);
      }else{
        crust.fadeIn(500);
      }
      return this;
    }
   // 扩展参数
   var op = $.extend({
    z: 9999,
    msg:'数据加载中...',
    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>").css({//外壳
    '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':'500'
   }).attr("class","x-loading-wanghe");
   var mask = $("<div></div>").css({//蒙版
    'position': 'absolute',
    'z-index': op.z+1,
    'width':'100%',
    'height':'100%',
    'background-color':'#333333',
    'top': '0px',
    'left': '0px',
    'opacity':op.opacity
   });
   //71abc6,89d3f8,6bc4f5
   var msgCrust = $("<span></span>").css({//消息外壳
      '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>").css({//消息主体
       '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 = $("<img src="+op.iconUrl+" />").css({//图标
      'position': 'absolute',
      'top': '3px',
      'left':'3px',
      'z-index': op.z+4,
      'width':'18px',
      'height':'18px'
     });  
      // 拼装遮罩层
   msg.prepend(msgIcon);
    msgCrust.prepend(msg);
    crust.prepend(mask);
    crust.prepend(msgCrust);
   thisjQuery.prepend(crust);
     // alert(thisjQuery.html());
   crust.fadeIn(500);
   //模态设置
   return this;
  }
 });
})(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:	当前元素的高度	蒙版的高度

希望本文所述對大家的jquery程式設計有幫助。