使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。
现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下。
其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写。现在就来分析一下这个组件的源码和使用
[javascript] view plaincopy
- /**
- * @部分参数说明
- */
- (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焦点中国地图
2013-04-17 11:05 1630转自:http://xiaoyaosr.blog.51cto ... -
通过Spring Mail Api发送邮件
2012-11-14 17:47 1398通过Spring Mail Api发送邮件 ... -
jquery.validate
2012-11-09 16:51 1019jquery.validate 需要JQuery ... -
Hibernate commit() 和flush() 的区别(转)
2012-09-28 09:46 2585Hibernate commit() 和flush( ... -
maven3.0.2下settings.xml配置下(转)
2012-09-25 19:14 5892maven3.0.2下settings.xml配置下 ... -
hibernate中Qurey类的setDate方法自动截掉时分秒——setDate和setTimeStamp(转)
2012-09-03 10:30 2993原帖地址:http://www.iteye.com/to ... -
Maven3.0.3的环境变量配置
2012-07-19 11:22 2974转自http://hi.baidu.com/douxinchu ... -
转:org.apache.catalina.core.JreMemoryLeakPreventionListener解决办法
2012-07-18 15:38 5474转自:http://blog.csdn.net/ang ... -
eclipse中的java文件图标j成空心
2012-07-06 10:06 13454eclipse中的java文件图标j成空心 ... -
jQuery - Ajax - readyState获取请求操作的当前状态
2012-06-29 14:46 0jQuery - Ajax - readyState获取请求 ... -
Dom加载判断,兼容所有浏览器
2012-06-29 14:35 9109Dom加载判断,兼容所有浏览器 Dom 加载完毕,兼容 ... -
document.readyState几种状态及示例
2012-06-29 14:33 1898document.readySta ... -
DOM Ready 详解
2012-06-29 14:03 3051转自:http://www.cnblogs.com/zhang ... -
转】js实现另存为的方法
2012-06-29 13:42 2867转】js实现另存为的方法 本文转自http://www ... -
js添加和去除千分号
2012-06-22 11:41 2078利用js的replace方法和正则表达式实现 1 ... -
Hibernate的游离态与持久态转换(转)
2012-06-18 10:30 5160本文转自:http://blog.csdn.net/sdban ... -
maven继承parent,relativePath warn信息的解决办法
2012-06-11 17:12 25908转自:http://blog.sina.com.cn/s/bl ... -
使用Maven管理Eclipse Java项目
2012-06-11 17:10 1032转自:http://www.blogjava.net/lost ... -
The parent project must have a packaging type of POM
2012-06-11 17:09 25207The parent project must ha ... -
(转)利用eclipse构建和部署maven工程
2012-05-31 12:44 2300本文转自http://ll-feng.iteye.c ...
相关推荐
本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。 现在又这样一个需求当用户点击一个...
非常好用的一款jquery遮罩层插件,网页制作必备。
jQuery轻量级树状菜单插件代码
busy-load是一款灵活的jquery loading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。
JQuery上传插件遮罩层插件,适合用于后台开发使用。里面包含遮罩层上传图片文件等示例。
jquery.msgBox.js是一款轻量级的Material Design风格jquery对话框插件。它压缩后的版本仅1kb,并且允许自定义对话框的图标,以及设置回调函数。
一个轻量级的 jQuery 插件用于创建SVG饼图状加载器
基于jQuery的轻量级js弹窗插件。 时间不多,只实现了部分功能,后续会继续完成剩下的功能。
DDSort, 一个简单轻量级的拖放排序jQuery插件 DDSort <div class="wrap"> <ul> <li>...</li> <li>...</li>. . .
jquery.countup.js是一款轻量级jquery数字动画插件。该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画。
jquery遮罩层 jquery遮罩层 jquery遮罩层 jquery遮罩层
wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从数据库懒加载节点,可以配置节点属性。
轻量级的jQuery遮罩层插件-Simple Overlay,当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层
jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果 jQuery插件 实现图片文字遮罩效果
基本的轻量级响应式jQuery幻灯片插件
unveil.js 一个非常轻量级的图片延迟加载jQuery插件
jquery-pie-loader.js是一款轻量级的基于HTML5 SVG的jQuery圆形进度条插件。通过该插件可以在页面中渲染出带动画效果的SVG饼状图形,适合用于制作进度显示,加载进度等效果。
这是一款轻量级的jquery自动完成插件。该jquery自动完成插件支持ajax。用户在输入框中输入内容时,插件会自动搜索指定的数组对象,或json对象,完成自动补全。
轻量级jQuery幻灯片切换插件.zip