一个轻量级的网页遮罩层jQuery插件
使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。
现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。
其实这个需求很简单，但很多组件体积相对这个需求来说太大了，在网上瞎溜达了找到了一个还不错的组件，作者是上面也没有写。现在就来分析一下这个组件的源码和使用
[javascript]
- /**
- * @部分参数说明
- */
- (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+//图标
- '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: | 当前元素的高度 | 蒙版的高度 |
相关推荐
cbao 2019-12-29
浪味仙 2019-12-24
Hhjian 2014-05-31
zhanghao 2016-11-24
攻城师 2019-06-28
asdjkl 2017-05-18
csscode 2016-09-13
海欣海夜 2015-06-29
最近用phonegap在安卓手机中使用Html5+css3做页面，<a name="yes" data-role="button" style="display: block;font-size:16
ruanjianxiong 2014-08-17
83540198 2014-08-01
DevilPace 2014-05-31
Kindlecode 2012-10-27
83510998 2012-04-28
89203856 2012-04-17
83453065 2012-03-14
AnyBisks 2012-02-23
yyzhu 2011-09-27
ElementW 2011-09-06