輕量級網(wǎng)頁遮罩層jQuery插件用法實例
本文實例講述了輕量級網(wǎng)頁遮罩層jQuery插件用法。分享給大家供大家參考。具體如下:
使用jQuery的好處是很多人為它寫一些組件,而在項目所需用到功能也都可以找到一些組件去完成。
現(xiàn)在又這樣一個需求當用戶點擊一個按鈕后不允許用戶進行任何的操作,取而代之的是彈出一個遮罩層顯示一個loading提示框,效果如下。
其實這個需求很簡單,但很多組件體積相對這個需求來說太大了,在網(wǎng)上瞎溜達了找到了一個還不錯的組件,作者是上面也沒有寫。現(xiàn)在就來分析一下這個組件的源碼和使用
/** * @部分參數(shù)說明 */ (function($){ $.fn.extend({ //主函數(shù) toggleLoading: function(options){ // 找到遮罩層 var crust = this.children(".x-loading-wanghe"); // 當前操作的元素 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; } // 擴展參數(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({//圖標 '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)設置 return this; } }); })(jQuery);
相關配置
配置&configure
全部配置 | 默認值 | 說明 |
z: | 9999 | 圖層z-index,當蒙版遮罩不住時候適當增大其值 |
msg: | 數(shù)據(jù)加載中... | 提示信息 |
iconUrl: | images/loading.gif | 提示圖片url |
height: | 18 | 圖標默認高(px) |
width: | 18 | 圖標默認寬(px) |
borderColor | #6bc4f5 | 提示的邊框顏色 |
opacity: | 0.5 | 蒙版的透明度 |
agentW: | 當前元素的寬度 | 蒙版的寬度 |
agentH: | 當前元素的高度 | 蒙版的高度 |
希望本文所述對大家的jquery程序設計有所幫助。
- 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)方法示例
相關文章
jquery操作checkbox火狐下第二次無法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無法勾選問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12jquery左右滾動焦點圖banner圖片鼠標經(jīng)過顯示上下頁按鈕
jquery左右滾動焦點圖banner圖片,鼠標經(jīng)過顯示上下頁,適合寬和高都比較大的頁面使用附演示,感興趣的朋友可以參考下2013-10-10