Anwendungsbeispiel für das jQuery-Plug-in_jquery für die leichtgewichtige Webseitenmaskenebene

Das Beispiel in diesem Artikel beschreibt die Verwendung des leichtgewichtigen jQuery-Plug-ins für die Webseitenmaskenebene. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Vorteil der Verwendung von jQuery besteht darin, dass viele Leute einige Komponenten dafür schreiben und Sie auch einige Komponenten finden können, um die für das Projekt erforderlichen Funktionen zu vervollständigen.

Wenn der Benutzer auf eine Schaltfläche klickt, darf er keine Vorgänge ausführen. Stattdessen wird eine Maskenebene angezeigt, in der ein Ladeaufforderungsfeld angezeigt wird.

Tatsächlich ist diese Anforderung sehr einfach, aber viele Komponenten sind für diese Anforderung zu groß. Ich habe im Internet herumgestöbert und eine ziemlich gute Komponente gefunden. Lassen Sie uns nun den Quellcode und die Verwendung dieser Komponente analysieren

/**
 * @部分参数说明
 */
(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);

Zugehörige Konfiguration

Konfigurieren&konfigurieren

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

Ich hoffe, dass dieser Artikel für die JQuery-Programmierung aller hilfreich sein wird.