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