轻量级网页遮罩层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 相关文章推荐
javascript快速排序算法详解
Sep 17 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
jQuery构造函数init参数分析
May 13 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
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
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Django 再谈一谈json序列化
2020/03/16 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Linux的主要特性
2016/09/03 面试题
EJB与JAVA BEAN的区别
2016/08/29 面试题
七年级政治教学反思
2014/02/03 职场文书
《长城》教学反思
2014/02/14 职场文书
初三开学计划书
2014/04/27 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android