경량 웹페이지 마스크 레이어 jQuery 플러그인_jquery 사용 예

이 기사의 예에서는 경량 웹 페이지 마스크 레이어 jQuery 플러그인의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jQuery를 사용하면 많은 사람들이 이를 위한 일부 구성 요소를 작성하고 프로젝트에 필요한 기능을 완료하기 위한 일부 구성 요소를 찾을 수도 있다는 장점이 있습니다.

이제 사용자가 버튼을 클릭하면 어떤 작업도 수행할 수 없다는 요구 사항이 있습니다. 대신 마스크 레이어가 팝업되어 로딩 프롬프트 상자가 표시됩니다.

사실 이 요구 사항은 매우 간단하지만, 이 요구 사항에 비해 너무 큰 구성 요소가 많습니다. 인터넷을 돌아다니다가 위에서 언급하지 않은 꽤 좋은 구성 요소를 발견했습니다. 이제 이 컴포넌트의 소스 코드와 사용법을 분석해 보겠습니다

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

관련 구성

구성 및 구성

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

이 글이 모든 사람의 jquery 프로그래밍에 도움이 되기를 바랍니다.