轻量级网页遮罩层jQuery插件用法实例

前端技术 2023/09/04 JavaScript

本文实例讲述了轻量级网页遮罩层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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10109

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案