一個輕量級的網頁遮罩層jQuery插件

使用jQuery的好處是很多人為它寫一些組件，而在項目所需用到功能也都可以找到一些組件去完成。

現在又這樣一個需求當用戶點擊一個按鈕後不允許用戶進行任何的操作，取而代之的是彈出一個遮罩層顯示一個loading提示框，效果如下。

其實這個需求很簡單，但很多組件體積相對這個需求來說太大了，在網上瞎溜達了找到了一個還不錯的組件，作者是上面也沒有寫。現在就來分析一下這個組件的源碼和使用

[javascript]

1. /**
2. * @部分參數說明
3. */
4. (function($){
5. $.fn.extend({
6. //主函數
7. toggleLoading: function(options){
8. // 找到遮罩層
9. var crust = this.children(".x-loading-wanghe");
10. // 當前操作的元素
11. var thisjQuery = this;
12. // 實現toogle(切換遮罩層出現與消失)效果的判斷方法
13. if(crust.length>0){
14. if(crust.is(":visible")){
15. crust.fadeOut(500);
16. }else{
17. crust.fadeIn(500);
18. }
19. return this;
20. }
21. // 擴展參數
22. var op = $.extend({
23. z: 9999,
24. msg:'數據加載中...',
25. iconUrl:'images/loading.gif',
26. width:18,
27. height:18,
28. borderColor:'#6bc4f5',
29. opacity:0.5,
30. agentW:thisjQuery.outerWidth(),
31. agentH:thisjQuery.outerHeight()
32. },options);
34. if(thisjQuery.css("position")=="static")
35. thisjQuery.css("position","relative");
36. //var w = thisjQuery.outerWidth(),h = thisjQuery.outerHeight();
38. var w = op.agentW,h = op.agentH;
39. crust = $("<div></div>").css({//外殼
40. 'position': 'absolute',
41. 'z-index': op.z,
42. 'display':'none',
43. 'width':w+'px',
44. 'height':h+'px',
45. 'text-align':'center',
46. 'top': '0px',
47. 'left': '0px',
48. 'font-family':'arial',
49. 'font-size':'12px',
50. 'font-weight':'500'
51. }).attr("class","x-loading-wanghe");
53. var mask = $("<div></div>").css({//蒙版
54. 'position': 'absolute',
55. 'z-index': op.z+1,
56. 'width':'100%',
57. 'height':'100%',
58. 'background-color':'#333333',
59. 'top': '0px',
60. 'left': '0px',
61. 'opacity':op.opacity
62. });
63. //71abc6,89d3f8,6bc4f5
64. var msgCrust = $("<span></span>").css({//消息外殼
65. 'position': 'relative',
66. 'top': (h-30)/2+'px',
67. 'z-index': op.z+2,
68. 'height':'24px',
69. 'display':'inline-block',
70. 'background-color':'#cadbe6',
71. 'padding':'2px',
72. 'color':'#000000',
73. 'border':'1px solid '+op.borderColor,
74. 'text-align':'left',
75. 'opacity':0.9
76. });
77. var msg = $("<span>"+op.msg+"</span>").css({//消息主體
78. 'position': 'relative',
79. 'margin': '0px',
80. 'z-index': op.z+3,
81. 'line-height':'22px',
82. 'height':'22px',
83. 'display':'inline-block',
84. 'background-color':'#efefef',
85. 'padding-left':'25px',
86. 'padding-right':'5px',
87. 'border':'1px solid '+op.borderColor,
88. 'text-align':'left',
89. 'text-indent':'0'
90. });
91. var msgIcon = $("<img src="+op.iconUrl+" />").css({//圖標
92. 'position': 'absolute',
93. 'top': '3px',
94. 'left':'3px',
95. 'z-index': op.z+4,
96. 'width':'18px',
97. 'height':'18px'
98. });
99. // 拼裝遮罩層
100. msg.prepend(msgIcon);
101. msgCrust.prepend(msg);
102. crust.prepend(mask);
103. crust.prepend(msgCrust);
104. thisjQuery.prepend(crust);
105. // alert(thisjQuery.html());
106. crust.fadeIn(500);
107. //模態設置
108. return this;
109. }
110. });
111. })(jQuery);

相關配置

配置&configure 全部配置 默認值 說明 z: 9999 圖層z-index,當蒙版遮罩不住時候適當增大其值 msg: 數據加載中... 提示信息 iconUrl: images/loading.gif 提示圖片url height: 18 圖標默認高(px) width: 18 圖標默認寬(px) borderColor #6bc4f5 提示的邊框顏色 opacity: 0.5 蒙版的透明度 agentW: 當前元素的寬度 蒙版的寬度 agentH: 當前元素的高度 蒙版的高度