本文為原創文章，轉載請注明出處，謝謝。
1 /**
2 * @author samkin.yang
3 * @version 1.0
4 */
5 var $_yxj = new SamkinLoading();
6
7
8 (function($){
9 if($){
10 $.fn.extend({
11 showLoading : function(){
12 $_yxj.showLoading($(this).attr("id"));
13 },
14 hideLoading : function(){
15 $_yxj.hideLoading($(this).attr("id"));
16 }
17 });
18 }
19 })(jQuery);
20
21
22
23 function DomInfo(i,t,l,w,h){
24 this.id = i;
25 this.offsetTop = t;
26 this.offsetLeft = l;
27 this.width = w;
28 this.height = h;
29 };
30
31 function SamkinLoading(){
32 this.iconUrlPrix = "";
33 this.loading = function(domId){
34
35 };
36 this.getLoadingDivInfo = function(domId) {
37 var dom = document.getElementById(domId);
38 var t=dom.offsetTop;
39 var l=dom.offsetLeft;
40 var domHeight = dom.clientHeight;
41 var domWidth = dom.clientWidth;
42 while(dom=dom.offsetParent){
43 t+=dom.offsetTop;
44 l+=dom.offsetLeft;
45 }
46 return new DomInfo(domId,t,l,domWidth,domHeight);
47 };
48 this.createDiv = function(domId){
49 var domInfo = this.getLoadingDivInfo(domId);
50 var bottomDiv;// = document.createElement("div");
51
52 bottomDiv = document.getElementById("loadingDiv_" + domId);
53 if(!bottomDiv) {
54 bottomDiv = document.createElement("div");
55 bottomDiv.setAttribute("id", "loadingDiv_"+domInfo.id);
56 var topDiv = document.createElement("div");
57 topDiv.className = "samkin-loading-top-div";
58 bottomDiv.appendChild(topDiv);
59 document.body.appendChild(bottomDiv);
60 }
61 // newNode.style.filter =
62 // "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
63 // newNode.style.filter = "Alpha(Opacity=50, FinishOpacity=100, Style=1,
64 // StartX=0, StartY=0, FinishX=100, FinishY=140)";
65
66 bottomDiv.style.top = domInfo.offsetTop + "px";
67 bottomDiv.style.left = domInfo.offsetLeft + "px";
68 bottomDiv.style.width = domInfo.width + "px";
69 bottomDiv.style.height = domInfo.height + "px";
70
71 bottomDiv.setAttribute("class", "samkin-loading-bottom-div");
72 bottomDiv.className = "samkin-loading-bottom-div";
73 bottomDiv.style.display = document.getElementById(domInfo.id).style.display;
74
75
76 // bottomDiv.style.backgroundImage = "url('" + this.iconUrlPrix
77 // +"/images/star.gif')";
78 /*
79 * if(this.isIE()){ //bottomDiv.style.filter =
80 * "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
81 * //bottomDiv.style.filter = "Alpha(Opacity=50, FinishOpacity=100,
82 * Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)";
83 * bottomDiv.style.filter = "Alpha(Opacity=20)"; } else {
84 * bottomDiv.style.opacity = "0.2"; }
85 */
86
87
88
89
90 };
91 this.isIE = function() {
92 if(document.body.addEventListener) // W3C
93 {
94 return false;
95 }
96 else if(document.body.attachEvent) // IE
97 {
98 return true;
99 }
100 };
101 this.showLoading = function(domId){
102 /*
103 * var dom = document.getElementById("loadingDiv_" + domId); if(dom) {
104 * dom.style.display = "block"; } else { var domInfo =
105 * this.getLoadingDivInfo(domId); this.createDiv(domInfo); }
106 */
107 this.createDiv(domId);
108 };
109 this.hideLoading = function(domId){
110 var dom = document.getElementById("loadingDiv_" + domId);
111 if(dom) {
112 dom.style.display = "none";
113 }
114 };
115 this.createLoadingObj = function(domId){
116 return
117 };
118
119 this.test = function(domId){
120 this.showLoading(domId);
121 };
122 };
使用方法，
如果在引入了jQuery環境下，可以這樣使用：
顯示遮罩層:$("#id").showLoading();
去除遮罩層:$("#id").hideLoading();
如果沒有引入jQuery的時候可以這樣用：
顯示遮罩層:$_yxj.showLoading('id');
去除遮罩層:$_yxj.hideLoading('id');
1 @CHARSET "BIG5";
2 .samkin-loading-bottom-div {
3 position: absolute;
4 width: 100px;
5 height: 60px;
6 background-color: black;
7 overflow: hidden;
8 display: block;
9 opacity:0.8;/* w3c */
10 filter:alpha(opacity=80);/* ie */
11 }
12
13 .samkin-loading-top-div {
14 clear:both;
15 width:100%;
16 height:100%;
17 background: url('images/two-circle.gif') white no-repeat center;
18 }
