Clienside ProgressIndicator

  1var 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
 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    };

 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
 8    ProgressIndicator.spinner = "spinner.gif";
 9
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>

仅在IE6中测试过

附件下载