轻量级网页遮罩层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建立一个语法高亮输入框实现思路
Feb 26 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
Vue实现简易计算器
Feb 25 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
javascript实现滚轮轮播图片
Dec 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
香妃
2021/03/03 冲泡冲煮
php学习笔记之 函数声明
2011/06/09 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
JS实现滚动条触底加载更多
2019/09/19 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
python 下载文件的几种方法汇总
2021/01/06 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
家长寄语大全
2014/04/02 职场文书
无毒社区工作方案
2014/05/23 职场文书
售房协议书范本2014
2014/10/23 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
MySQL通过binlog恢复数据
2021/05/27 MySQL
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
MySQL事务的隔离级别详情
2022/07/15 MySQL