Clienside ProgressIndicator

Posted on 2008-04-03 16:32 bestcomy 阅读(2483) 评论(12) 编辑收藏举报

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

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

};

<html>
2

<head>
3

<title>ProgressIndicator Demo</title>
4

<!--
7

ProgressIndicator.spinner = "spinner.gif";
9

//-->
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>

仅在IE6中测试过

附件下载

刷新页面返回顶部

Bestcomy.net blog

导航

公告

Clienside ProgressIndicator