js等待提示通用类

2021-08-07 01:08:44

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>

js等待提示通用类