js等待提示通用类

function WaitingTip (options){  
    if(!options){  
             options = {  
             containerElId: null,  
             styleClassName: null,  
             innerHTML:null,  
             anchor:null,  
             gap:null  
      }  
    }  
    var id = options.containerElid ||" ____waiting" + Math.floor(Math.random() * 1000000);  
    this.getWaitEl = function(){  
        return document.getElementByIdx_x_x(id);  
    }  
      
    var anchor = options.anchor ? options.anchor.toLowerCase() : "down" ;  
    this.getAnchor = function(){  
        return anchor;  
    }  
      
    var gap = options.gap || 2;  
    this.getGap = function(){  
        return gap;  
    }  
      
    var init = function(){  
        var div = document_createElement_x_x("div")   
        div.id = id;  
        div.style.position = "absolute";  
        div.style.display = "none";  
        if(options.styleClassName)div.className = styleClassName;              
        document.body.a(div);  
        if(options.innerHTML){  
            div.innerHTML = options.innerHTML;  
        }  
        else{  
            var waitingImg = document_createElement_x_x("img");  
            waitingImg.src = "/images/waiting.gif";  
            waitingImg.alt = "running...";  
            div.a(waitingImg);  
        }  
        searchingEl  = div;  
    }  
    init();  
}  
  
  
WaitingTip.prototype.GetAbsoluteLocation = function (element)  
{  
    if ( arguments.length != 1 || element == null )  
    {  
        return null;  
    }  
    var offsetTop = element.offsetTop;  
    var offsetLeft = element.offsetLeft;  
    var offsetWidth = element.offsetWidth;  
    var offsetHeight = element.offsetHeight;  
    while( element = element.offsetParent )  
    {  
        offsetTop += element.offsetTop;  
        offsetLeft += element.offsetLeft;  
    }  
    return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,  
        offsetWidth: offsetWidth, offsetHeight: offsetHeight };  
}  
      
  
WaitingTip.prototype.hide = function(){  
    this.getWaitEl().style.display = "none";  
}      
      
      
  
WaitingTip.prototype.show = function(relativelyEl,anchor){  
    var p = this.GetAbsoluteLocation(relativelyEl);  
    var waitEl = this.getWaitEl();  
    var gap = this.getGap();  
    var _anchor = anchor || this.getAnchor();  
    waitEl.style.display = "block";  
    switch(_anchor){  
        case "down":  
            waitEl.style.top = p.absoluteTop + p.offsetHeight + gap + "px";  
            waitEl.style.left = p.absoluteLeft + "px";  
            break;  
        case "right":  
            waitEl.style.top = p.absoluteTop + "px";  
            waitEl.style.left = p.absoluteLeft + p.offsetWidth + gap +  "px";              
            break;  
        case "left":  
             waitElpos = this.GetAbsoluteLocation(waitEl);  
            waitEl.style.top = p.absoluteTop + "px";  
            waitEl.style.left = p.absoluteLeft - gap - waitElpos.offsetWidth +  "px";                          
            break;  
        case "up":  
             waitElpos = this.GetAbsoluteLocation(waitEl);  
            waitEl.style.top = p.absoluteTop - gap -  waitElpos.offsetHeight +  "px";  
            waitEl.style.left = p.absoluteLeft +  "px";               
            break;  
        case "center":  
            try{  
               waitElpos = this.GetAbsoluteLocation(waitEl);  
              waitEl.style.top = p.absoluteTop  + Math.floor((p.offsetHeight - waitElpos.offsetHeight)  / 2) +  "px";  
              waitEl.style.left = p.absoluteLeft +  Math.floor((p.offsetWidth  - waitElpos.offsetWidth)  / 2) + "px";                        
            }  
            catch(error){  
                waitEl.style.top = p.absoluteTop  + Math.floor(p.offsetHeight  / 2) +  "px";  
                waitEl.style.left = p.absoluteLeft +  Math.floor(p.offsetWidth   / 2) + "px";                        
            }  
            break;  
    }  
}  

 

测试页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml"  >  
<head>  
    <title>waiting tip</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">       
    <script src="waitingTip.js"></script>  
    <script>  
    function bodyload(){  
        var w1 = new WaitingTip({innerHTML:"<img src=‘images/w2.gif‘ />正在搜索..."});  
        var txt1El = document.getElementById("txt1");  
        w1.show(txt1El);  
  
        var w2 = new WaitingTip({innerHTML:"<img src=‘images/waiting.gif‘ />正在载入..."});  
        var div1El = document.getElementById("div1");  
        w2.show(div1El,"center");  
  
        var w3 = new WaitingTip({gap:10,innerHTML:"<img src=‘images/w2.gif‘ />正在搜索..."});  
        var txt2El = document.getElementById("txt2");  
        w3.show(txt2El,"right");  
    }  
    window.onload = bodyload;  
    </script>  
<body>  
<ul>  
    <li>  
    等待动画默认在相对HTML元素的下方<br/>  
        <input id="txt1" type="text" value="北京" />  
    </li>  
    <li>  
        <div id="div1" style="margin:50px;width:200px;height:100px;border:1px solid black">  
            等待动画在中间<br/>  
        </div>  
    </li>  
    <li>  
    等待动画在右边,且和相对HTML元素的距离为10px<br/>  
        <input id="txt2" type="text" value="北京" />  
    </li>  
</ul>  
</body>  
</html>  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。