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


Posted in Javascript onJuly 31, 2015

本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下:

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

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

轻量级网页遮罩层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);

相关配置

配置&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程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
js实时获取并显示当前时间的方法
Jul 31 #Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 #Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 #Javascript
javascript实现列表滚动的方法
Jul 30 #Javascript
百度地图API之本地搜索与范围搜索
Jul 30 #Javascript
javaScript实现滚动新闻的方法
Jul 30 #Javascript
javascript中递归函数用法注意点
Jul 30 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
详细探究Python中的字典容器
2015/04/14 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python实现简单学生信息管理系统
2020/04/09 Python
pandas apply多线程实现代码
2020/08/17 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
为什么使用接口?
2014/08/13 面试题
校园活动策划书范文
2014/01/10 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
晚会开场白和结束语
2015/05/29 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
mysql的单列多值存储实例详解
2022/04/05 MySQL