轻量级网页遮罩层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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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文档更新介绍
2011/07/22 PHP
基于php下载文件的详解
2013/06/02 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
vue 中的keep-alive实例代码
2018/07/20 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python计算auc指标实例
2017/07/13 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python实现同一局域网下传输图片
2020/03/20 Python
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
《搭石》教学反思
2014/04/07 职场文书
课外活动总结范文
2014/07/09 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
经营目标责任书
2015/05/08 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
工程移交协议书
2016/03/24 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书