js等待提示通用类

bellstar · 发表于 2013-1-29 07:38:51

这是一个非常易用的widget，参数都有默认值，默认值参见注释
wait = new WaitingTip();wait.show(document.getElementById('id')); //显示，参数1是参照对象...wait.hide(); //隐藏

使用示例
<!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>
运行效果

源码如下：
/** * @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; }}

		自动登录	找回密码
密码			立即注册

js等待提示通用类

浏览过的版块