js等待提示通用类

最新推荐文章于 2024-03-14 20:28:54 发布

iteye_2251

最新推荐文章于 2024-03-14 20:28:54 发布

阅读量114

点赞数

分类专栏： javascript 文章标签： Ajax prototype JavaScript CSS UP ViewUI

javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

这是一个非常易用的widget，参数都有默认值，默认值参见注释


wait = new WaitingTip();
wait.show(document.getElementById('id')); //显示，参数1是参照对象
...
wait.hide(); //隐藏

[b]使用示例[/b]


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

[b]运行效果[/b]
[img]/upload/attachment/76304/8105ca64-3c3b-3f24-8f1a-326e0f8fdf34.jpg[/img]
[b]源码如下：[/b]


/**
 * @praam <String>containerElId=" ____waiting____随机数" 指定一个容器的id
 * @param <String>styleClassName 容器的css样式类
 * @param <String>innerHTML ＝"<img alt='running...' src='/images/waiting.gif' /> "  内容
 * @param <String>anchor ="down"  停放位置 ["down","up","left","right","center"];
 * @param <Number>gap =2与参照节点位置的间距
 */
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.getElementById(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("div") 
        div.id = id;
        div.style.position = "absolute";
        div.style.display = "none";
        if(options.styleClassName)div.className = styleClassName;            
        document.body.appendChild(div);
        if(options.innerHTML){
            div.innerHTML = options.innerHTML;
        }
        else{
            var waitingImg = document.createElement("img");
            waitingImg.src = "/images/waiting.gif";
            waitingImg.alt = "running...";
            div.appendChild(waitingImg);
        }
        searchingEl  = div;
    }
    init();
}

/**
 *获取某个HTML Element绝对位置
 *@private
 */
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 };
}

/**
 *隐藏
 *@public
 */
WaitingTip.prototype.hide = function(){
    this.getWaitEl().style.display = "none";
}    


/**
 *显示
 *@public
 *@param <String> relativelyElId 参照节点的id
 *@param <String>anchor  默认为初始化设置时值
 */
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;
    }
}