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

其實這個需求很簡單,但很多組件體積相對這個需求來說太大了,在網(wǎng)上瞎溜達(dá)了找到了一個還不錯的組件,作者是上面也沒有寫?,F(xiàn)在就來分析一下這個組件的源碼和使用
/**
* @部分參數(shù)說明
*/
(function($){
$.fn.extend({
//主函數(shù)
toggleLoading: function(options){
// 找到遮罩層
var crust = this.children(".x-loading-wanghe");
// 當(dāng)前操作的元素
var thisjQuery = this;
// 實現(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)值 | 說明 |
| z: | 9999 | 圖層z-index,當(dāng)蒙版遮罩不住時候適當(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)前元素的高度 | 蒙版的高度 |
希望本文所述對大家的jquery程序設(shè)計有所幫助。
- JQuery 遮罩層實現(xiàn)(mask)實現(xiàn)代碼
- jQuery操作dom實現(xiàn)彈出頁面遮罩層(web端和移動端阻止遮罩層的滑動)
- jQuery阻止移動端遮罩層后頁面滾動
- Jquery實現(xiàn)遮罩層的簡單實例(就是彈出DIV周圍都灰色不能操作)
- jquery實現(xiàn)簡單的遮罩層
- jquery下實現(xiàn)overlay遮罩層代碼
- jQuery實現(xiàn)彈出帶遮罩層的居中浮動窗口效果
- jQuery遮罩層實現(xiàn)方法實例詳解(附遮罩層插件)
- jquery實現(xiàn)點擊其他區(qū)域時隱藏下拉div和遮罩層的方法
- jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能示例
- jQuery超簡單遮罩層實現(xiàn)方法示例
相關(guān)文章
jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
jquery模擬實現(xiàn)鼠標(biāo)指針停止運(yùn)動事件
這篇文章主要介紹了jquery模擬實現(xiàn)鼠標(biāo)指針停止運(yùn)動事件示例代碼,感興趣的小伙伴們可以參考一下2016-01-01
輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12
jquery構(gòu)造器的實現(xiàn)代碼小結(jié)
jQuery的$符號非常神奇,它可以接受一個字符,也可以接受一個文檔對象或window對象,亦可以傳個函數(shù)進(jìn)行變?yōu)閐omReady加載器2011-05-05
jquery左右滾動焦點圖banner圖片鼠標(biāo)經(jīng)過顯示上下頁按鈕
jquery左右滾動焦點圖banner圖片,鼠標(biāo)經(jīng)過顯示上下頁,適合寬和高都比較大的頁面使用附演示,感興趣的朋友可以參考下2013-10-10

