輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法實(shí)例
本文實(shí)例講述了輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法。分享給大家供大家參考。具體如下:
使用jQuery的好處是很多人為它寫一些組件,而在項(xiàng)目所需用到功能也都可以找到一些組件去完成。
現(xiàn)在又這樣一個(gè)需求當(dāng)用戶點(diǎn)擊一個(gè)按鈕后不允許用戶進(jìn)行任何的操作,取而代之的是彈出一個(gè)遮罩層顯示一個(gè)loading提示框,效果如下。
其實(shí)這個(gè)需求很簡(jiǎn)單,但很多組件體積相對(duì)這個(gè)需求來說太大了,在網(wǎng)上瞎溜達(dá)了找到了一個(gè)還不錯(cuò)的組件,作者是上面也沒有寫?,F(xiàn)在就來分析一下這個(gè)組件的源碼和使用
/** * @部分參數(shù)說明 */ (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)值 | 說明 |
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)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jQuery阻止移動(dòng)端遮罩層后頁面滾動(dòng)
- Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
- 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)打開網(wǎng)頁自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
- jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
相關(guān)文章
jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件
這篇文章主要介紹了jquery模擬實(shí)現(xiàn)鼠標(biāo)指針停止運(yùn)動(dòng)事件示例代碼,感興趣的小伙伴們可以參考一下2016-01-01jQuery Jcrop插件實(shí)現(xiàn)圖片選取功能
今天我們要在ASP.NET中用jQuery.Jcrop插件實(shí)現(xiàn)圖片的選取功能,你想選取美女的哪個(gè)部位你說了算,我就管不著了2011-11-11輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12jquery構(gòu)造器的實(shí)現(xiàn)代碼小結(jié)
jQuery的$符號(hào)非常神奇,它可以接受一個(gè)字符,也可以接受一個(gè)文檔對(duì)象或window對(duì)象,亦可以傳個(gè)函數(shù)進(jìn)行變?yōu)閐omReady加載器2011-05-05jquery對(duì)象和DOM對(duì)象的區(qū)別介紹
jquery對(duì)象和DOM對(duì)象在使用過程很頻繁,正是因?yàn)槿绱耍枚嗯笥讯疾恢浪鼈冎g有什么區(qū)別,下面為大家詳細(xì)介紹下,希望對(duì)大家有所幫助2013-08-08jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過顯示上下頁按鈕
jquery左右滾動(dòng)焦點(diǎn)圖banner圖片,鼠標(biāo)經(jīng)過顯示上下頁,適合寬和高都比較大的頁面使用附演示,感興趣的朋友可以參考下2013-10-10