1
var ProgressIndicator = {
2
isShow : false,
3
height : 100,
4
width : 300,
5
target : self,
6
spinner : "../images/spinner.gif",
7
show : function(width,height,target)
8
{
9
if(this.isShow==false)
10
{
11
if(arguments.length >= 2)
12
{
13
this.width = width;
14
this.height = height;
15
if(arguments.length>2)
16
this.target = target;
17
}
18
var size = this.getMaskSize();
19
this.target.document.body.insertAdjacentHTML("beforeEnd","<div id=\"maskskin\" style=\"position:absolute;left:0px;top:0px;background-color:#333333;opacity: .4;filter: alpha(opacity=40);z-index:1000;width:"+size.width+"px;height:"+size.height+"px;\"></div>");
20
var position = this.getCenterPosition();
21
this.target.document.body.insertAdjacentHTML("beforeEnd","<IFRAME name=\"masklayer\" style=\"border:1px solid buttontext;position:absolute;z-index:1001;left:"+position.left+"px;top:"+position.top+"px;\" frameborder=0 width=\""+this.width+"\" height=\""+this.height+"\" src=\"about:blank\"/>");
22
var frameDoc = this.target.document.frames["masklayer"].document;
23
frameDoc.open();
24
frameDoc.write("<table width=\"100%\" height=\"100%\"><tr><td><img src=\""+this.spinner+"\"></td><td style=\"color:black;font-size:10pt;\"><b>Waiting
</b></td></tr><tr><td></td><td style=\"color:black;font-size:10pt;\">Be patient,processing
</td></tr></table>");
25
frameDoc.close();
26
this.isShow = true;
27
this.addEvent(this.target, "resize", ProgressIndicator.centerProgressBar);
28
this.addEvent(this.target, "scroll", ProgressIndicator.centerProgressBar);
29
}
30
//window.onscroll = this.centerProgressBar;
31
},
32
hide : function()
33
{
34
var maskFrame = this.target.document.getElementById("masklayer");
35
maskFrame.parentNode.removeChild(maskFrame);
36
var maskSkin = this.target.document.getElementById("maskskin");
37
maskSkin.parentNode.removeChild(maskSkin);
38
this.isShow = false;
39
this.removeEvent(this.target, "resize", ProgressIndicator.centerProgressBar);
40
this.removeEvent(this.target, "scroll", ProgressIndicator.centerProgressBar);
41
},
42
updateMessage : function(msg)
43
{
44
if(this.isShow)
45
{
46
var table = this.target.document.frames["masklayer"].document.getElementsByTagName("TABLE")[0];
47
table.rows[1].cells[1].innerHTML = msg;
48
}
49
},
50
addEvent : function(obj, evType, fn){
51
if (obj.addEventListener){
52
obj.addEventListener(evType, fn, false);
53
return true;
54
} else if (obj.attachEvent){
55
var r = obj.attachEvent("on"+evType, fn);
56
return r;
57
} else {
58
return false;
59
}
60
},
61
removeEvent : function(obj, evType, fn, useCapture){
62
if (obj.removeEventListener){
63
obj.removeEventListener(evType, fn, useCapture);
64
return true;
65
} else if (obj.detachEvent){
66
var r = obj.detachEvent("on"+evType, fn);
67
return r;
68
} else {
69
alert("Handler could not be removed");
70
}
71
},
72
getViewportHeight : function() {
73
if (this.target.innerHeight!=this.target.undefined) return this.target.innerHeight;
74
if (this.target.document.compatMode=='CSS1Compat') return this.target.document.documentElement.clientHeight;
75
if (this.target.document.body) return this.target.document.body.clientHeight;
76![](/Images/OutliningIndicators/InBlock.gif)
77
return this.target.undefined;
78
},
79
getViewportWidth : function(){
80
var offset = 17;
81
var width = null;
82
if (this.target.innerWidth!=this.target.undefined) return this.target.innerWidth;
83
if (this.target.document.compatMode=='CSS1Compat') return this.target.document.documentElement.clientWidth;
84
if (this.target.document.body) return this.target.document.body.clientWidth;
85
},
86
getScrollTop : function(){
87
if (self.pageYOffset) // all except Explorer
88
{
89
return self.pageYOffset;
90
}
91
else if (this.target.document.documentElement && this.target.document.documentElement.scrollTop)
92
// Explorer 6 Strict
93
{
94
return this.target.document.documentElement.scrollTop;
95
}
96
else if (this.target.document.body) // all other Explorers
97
{
98
return this.target.document.body.scrollTop;
99
}
100
},
101
getScrollLeft : function(){
102
if (self.pageXOffset) // all except Explorer
103
{
104
return self.pageXOffset;
105
}
106
else if (this.target.document.documentElement && this.target.document.documentElement.scrollLeft)
107
// Explorer 6 Strict
108
{
109
return this.target.document.documentElement.scrollLeft;
110
}
111
else if (this.target.document.body) // all other Explorers
112
{
113
return this.target.document.body.scrollLeft;
114
}
115
},
116
getMaskSize : function()
117
{
118
var theBody = this.target.document.getElementsByTagName("BODY")[0];
119
120
var fullHeight = this.getViewportHeight();
121
var fullWidth = this.getViewportWidth();
122
123
// Determine what's bigger, scrollHeight or fullHeight / width
124
if (fullHeight > theBody.scrollHeight) {
125
popHeight = fullHeight;
126
} else {
127
popHeight = theBody.scrollHeight;
128
}
129
130
if (fullWidth > theBody.scrollWidth) {
131
popWidth = fullWidth;
132
} else {
133
popWidth = theBody.scrollWidth;
134
}
135
136
return {width:popWidth,height:popHeight+this.height};
137
},
138
getCenterPosition : function()
139
{
140
//var theBody = document.documentElement;
141
var theBody = this.target.document.getElementsByTagName("BODY")[0];
142
//theBody.style.overflow = "hidden";
143
var scTop = parseInt(this.getScrollTop(),10);
144
var scLeft = parseInt(theBody.scrollLeft,10);
145
146
var fullHeight = this.getViewportHeight();
147
var fullWidth = this.getViewportWidth();
148
149
var top = scTop + ((fullHeight - this.height) / 2);
150
var left = scLeft + ((fullWidth - this.width) / 2);
151
152
return {top:top,left:left};
153
},
154
centerProgressBar : function()
155
{
156
if(ProgressIndicator.isShow)
157
{
158
var position = ProgressIndicator.getCenterPosition();
159
var maskdiv = ProgressIndicator.target.document.getElementsByName("masklayer")[0];
160
maskdiv.style.top = position.top + "px";
161
maskdiv.style.left = position.left + "px";
162
}
163
}
164
};
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](/Images/OutliningIndicators/InBlock.gif)
3
![](/Images/OutliningIndicators/InBlock.gif)
4
![](/Images/OutliningIndicators/InBlock.gif)
5
![](/Images/OutliningIndicators/InBlock.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
![](/Images/dot.gif)
![](/Images/dot.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/InBlock.gif)
27
![](/Images/OutliningIndicators/InBlock.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
32
![](/Images/OutliningIndicators/InBlock.gif)
33
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/InBlock.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
44
![](/Images/OutliningIndicators/InBlock.gif)
45
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
50
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
60
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
61
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
62
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
71
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
72
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
73
![](/Images/OutliningIndicators/InBlock.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
79
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/InBlock.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
86
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
87
![](/Images/OutliningIndicators/InBlock.gif)
88
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
96
![](/Images/OutliningIndicators/InBlock.gif)
97
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
98
![](/Images/OutliningIndicators/InBlock.gif)
99
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
100
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
101
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
102
![](/Images/OutliningIndicators/InBlock.gif)
103
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
106
![](/Images/OutliningIndicators/InBlock.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
113
![](/Images/OutliningIndicators/InBlock.gif)
114
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
115
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
116
![](/Images/OutliningIndicators/InBlock.gif)
117
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/InBlock.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/InBlock.gif)
124
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
125
![](/Images/OutliningIndicators/InBlock.gif)
126
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
127
![](/Images/OutliningIndicators/InBlock.gif)
128
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
131
![](/Images/OutliningIndicators/InBlock.gif)
132
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
135
![](/Images/OutliningIndicators/InBlock.gif)
136
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
137
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
138
![](/Images/OutliningIndicators/InBlock.gif)
139
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/InBlock.gif)
143
![](/Images/OutliningIndicators/InBlock.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/InBlock.gif)
146
![](/Images/OutliningIndicators/InBlock.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/InBlock.gif)
151
![](/Images/OutliningIndicators/InBlock.gif)
152
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
153
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
154
![](/Images/OutliningIndicators/InBlock.gif)
155
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
156
![](/Images/OutliningIndicators/InBlock.gif)
157
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
158
![](/Images/OutliningIndicators/InBlock.gif)
159
![](/Images/OutliningIndicators/InBlock.gif)
160
![](/Images/OutliningIndicators/InBlock.gif)
161
![](/Images/OutliningIndicators/InBlock.gif)
162
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
163
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
164
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
1
<html>
2
<head>
3
<title>ProgressIndicator Demo</title>
4
<script language="javascript" type="text/javascript" src="ProgressIndicator.js"></script>
5
<script language="javascript" type="text/javascript">
6
<!--
7![](/Images/OutliningIndicators/InBlock.gif)
8
ProgressIndicator.spinner = "spinner.gif";
9![](/Images/OutliningIndicators/InBlock.gif)
10
//-->
11
</script>
12
</head>
13
<body>
14
<h2>ProgressIndicator Demo</h2>
15
<hr/>
16
<input type="button" value="Show ProgressIndicator
" onclick="ProgressIndicator.show()"><br/><br/>
17
<input type="button" value="Show ProgressIndicator
[400,150]" onclick="ProgressIndicator.show(400,150,top)">
18
</body>
19
</html>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
6
![](/Images/OutliningIndicators/InBlock.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
17
![](/Images/OutliningIndicators/None.gif)
![](/Images/dot.gif)
18
![](/Images/OutliningIndicators/None.gif)
19
![](/Images/OutliningIndicators/None.gif)
仅在IE6中测试过
附件下载