轻量级网页遮罩层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 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
Postman内建变量常用方法实例解析
Jul 28 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
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
常见的python正则用法实例讲解
2016/06/21 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
运动会演讲稿50字
2014/08/25 职场文书
计划生育证明书写要求
2014/09/17 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
公司给客户的感谢信
2015/01/23 职场文书
文员岗位职责
2015/02/04 职场文书
监察建议书
2015/02/04 职场文书
求职自我推荐信
2015/03/24 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android