js等待提示通用类

bellstar

浏览: 150705 次
性别:
来自: 上海

最近访客更多访客>>

qingshou117

z09026040

zjxysl

michaelyn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

Ajax prototype JavaScript CSS UP

这是一个非常易用的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;
    }
}

waitingtip.zip (4.6 KB)
下载次数: 1205

查看图片附件

分享到：

仿Gmail中输入多个收件人的Autocomplete组 ... | SUI-渲染一个简单的页面

2009-02-17 22:08
浏览 2623
评论(2)
论坛回复 / 浏览 (2 / 9589)
分类:Web前端
查看更多

2 楼 playfish 2009-09-13

呵呵，楼主这个功能整理得还可以。就是代码感觉不够漂亮。：）
楼上说的不知道是不是处理这个loading响应的过程。。？过程，就是发起ajax请求的时候调用loading的启动，ajax请求成功的时候在回调函数里面调用loading的关闭

1 楼 641216927 2009-09-13

谢谢!这是一个友好提示功能,但是有什么好解决方案获得服务端响应客户端,并完成响应处理数据?

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js等待提示通用类

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js等待提示通用类

评论

发表评论

相关推荐

amplifyjs--有关组件通讯与请求管理与本地存储的js库

一个JavaScript的oo库

KISSY之KISSY.JS速记

面试题-做一个聊天原型

javascript总结（七）浏览器兼容性

javascript总结（六）页面元素的创建调整与关联

javascript总结（五）获取设置元素样式与监听元素事件

javascript总结（四）ajax局部刷新与RPC

javascript总结（三）js与FLASH的交互

javascript总结（二）文件组织与代码组织

javascript总结（一）有关框架

HTML标记不匹配引起的问题

结合使用setTimeout和setInterval模拟QQ头像闪动

使用 window.name 解决跨域问题

用EXT的CHECKBOX表示BOOL型字段

javascript的namespace声明

分享一个VIM的JS代码格式化插件

Ext组件继承层次图

重构增强版通用滚动widget，鼠标移入可暂停滚动

通用滚动widget

最近访客更多访客>>