轻量级网页遮罩层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 三种创建对象的方法
Oct 16 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
vue之将echart封装为组件
Jun 02 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
简单了解常用的JavaScript 库
Jul 16 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
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
Python描述器descriptor详解
2015/02/03 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python tkinter窗口最大化的实现
2019/07/15 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
Django中template for如何使用方法
2021/01/31 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
研究生自荐信
2013/10/09 职场文书
中国好声音广告词
2014/03/18 职场文书
工厂见习报告范文
2014/10/31 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书