本文實(shí)例講述了輕量級(jí)網(wǎng)頁遮罩層jQuery插件用法。分享給大家供大家參考。具體如下:
使用jQuery的好處是很多人為它寫一些組件,而在項(xiàng)目所需用到功能也都可以找到一些組件去完成。
現(xiàn)在又這樣一個(gè)需求當(dāng)用戶點(diǎn)擊一個(gè)按鈕后不允許用戶進(jìn)行任何的操作,取而代之的是彈出一個(gè)遮罩層顯示一個(gè)loading提示框,效果如下。
其實(shí)這個(gè)需求很簡單,但很多組件體積相對(duì)這個(gè)需求來說太大了,在網(wǎng)上瞎溜達(dá)了找到了一個(gè)還不錯(cuò)的組件,作者是上面也沒有寫。現(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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注