浏览 9589 次
|
锁定老帖子 主题：js等待提示通用类
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-02-17
最后修改：2009-02-17
这是一个非常易用的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;
}
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-09-13
谢谢!这是一个友好提示功能,但是有什么好解决方案获得服务端响应客户端,并完成响应处理数据?
|
| 返回顶楼 | |
|
发表时间：2009-09-13
呵呵，楼主这个功能整理得还可以。就是代码感觉不够漂亮。：）
楼上说的不知道是不是处理这个loading响应的过程。。？过程，就是发起ajax请求的时候调用loading的启动，ajax请求成功的时候在回调函数里面调用loading的关闭 |
| 返回顶楼 | |
