輕量級(jí)網(wǎng)頁(yè)遮罩層jQuery插件用法實(shí)例
本文實(shí)例講述了輕量級(jí)網(wǎng)頁(yè)遮罩層jQuery插件用法。分享給大家供大家參考。具體如下:
使用jQuery的好處是很多人為它寫(xiě)一些組件,而在項(xiàng)目所需用到功能也都可以找到一些組件去完成。
現(xiàn)在又這樣一個(gè)需求當(dāng)用戶(hù)點(diǎn)擊一個(gè)按鈕后不允許用戶(hù)進(jìn)行任何的操作,取而代之的是彈出一個(gè)遮罩層顯示一個(gè)loading提示框,效果如下。

其實(shí)這個(gè)需求很簡(jiǎn)單,但很多組件體積相對(duì)這個(gè)需求來(lái)說(shuō)太大了,在網(wǎng)上瞎溜達(dá)了找到了一個(gè)還不錯(cuò)的組件,作者是上面也沒(méi)有寫(xiě)?,F(xiàn)在就來(lái)分析一下這個(gè)組件的源碼和使用
/**
* @部分參數(shù)說(shuō)明
*/
(function($){
$.fn.extend({
//主函數(shù)
toggleLoading: function(options){
// 找到遮罩層
var crust = this.children(".x-loading-wanghe");
// 當(dāng)前操作的元素
var thisjQuery = this;
// 實(shí)現(xiàn)toogle(切換遮罩層出現(xiàn)與消失)效果的判斷方法
if(crust.length>0){
if(crust.is(":visible")){
crust.fadeOut(500);
}else{
crust.fadeIn(500);
}
return this;
}
// 擴(kuò)展參數(shù)
var op = $.extend({
z: 9999,
msg:'數(shù)據(jù)加載中...',
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({//圖標(biāo)
'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);
//模態(tài)設(shè)置
return this;
}
});
})(jQuery);
相關(guān)配置
配置&configure
| 全部配置 | 默認(rèn)值 | 說(shuō)明 |
| z: | 9999 | 圖層z-index,當(dāng)蒙版遮罩不住時(shí)候適當(dāng)增大其值 |
| msg: | 數(shù)據(jù)加載中... | 提示信息 |
| iconUrl: | images/loading.gif | 提示圖片url |
| height: | 18 | 圖標(biāo)默認(rèn)高(px) |
| width: | 18 | 圖標(biāo)默認(rèn)寬(px) |
| borderColor | #6bc4f5 | 提示的邊框顏色 |
| opacity: | 0.5 | 蒙版的透明度 |
| agentW: | 當(dāng)前元素的寬度 | 蒙版的寬度 |
| agentH: | 當(dāng)前元素的高度 | 蒙版的高度 |
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
- jQuery操作dom實(shí)現(xiàn)彈出頁(yè)面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)
- Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周?chē)蓟疑荒懿僮?
- jquery實(shí)現(xiàn)簡(jiǎn)單的遮罩層
- jquery下實(shí)現(xiàn)overlay遮罩層代碼
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
- jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
- jquery實(shí)現(xiàn)點(diǎn)擊其他區(qū)域時(shí)隱藏下拉div和遮罩層的方法
- jQuery實(shí)現(xiàn)打開(kāi)網(wǎng)頁(yè)自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
- jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
相關(guān)文章
jquery帶翻頁(yè)動(dòng)畫(huà)的電子雜志代碼分享
jquery帶翻頁(yè)動(dòng)畫(huà)的電子雜志是一款jquery.booklet電子書(shū)小冊(cè)子帶翻頁(yè)動(dòng)畫(huà)的電子雜志書(shū)本,感興趣的小伙伴們可以參考一下2015-08-08
jquery操作checkbox火狐下第二次無(wú)法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無(wú)法勾選問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件
這篇文章主要介紹了jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件示例代碼,感興趣的小伙伴們可以參考一下2016-01-01
jQuery Jcrop插件實(shí)現(xiàn)圖片選取功能
今天我們要在ASP.NET中用jQuery.Jcrop插件實(shí)現(xiàn)圖片的選取功能,你想選取美女的哪個(gè)部位你說(shuō)了算,我就管不著了2011-11-11
輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12
jquery構(gòu)造器的實(shí)現(xiàn)代碼小結(jié)
jQuery的$符號(hào)非常神奇,它可以接受一個(gè)字符,也可以接受一個(gè)文檔對(duì)象或window對(duì)象,亦可以傳個(gè)函數(shù)進(jìn)行變?yōu)閐omReady加載器2011-05-05
jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過(guò)程很頻繁,正是因?yàn)槿绱耍枚嗯笥讯疾恢浪鼈冎g有什么區(qū)別,下面為大家詳細(xì)介紹下,希望對(duì)大家有所幫助2013-08-08
jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
jquery左右滾動(dòng)焦點(diǎn)圖banner圖片,鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè),適合寬和高都比較大的頁(yè)面使用附演示,感興趣的朋友可以參考下2013-10-10

