`
bellstar
  • 浏览: 148495 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js等待提示通用类

AjaxprototypeJavaScriptCSSUP 
阅读更多
这是一个非常易用的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;
    }
}

  • 大小: 18.2 KB
分享到：
| SUI-渲染一个简单的页面
评论
2 楼 playfish 2009-09-13  
呵呵，楼主这个功能整理得还可以。就是代码感觉不够漂亮。：）
楼上说的不知道是不是处理这个loading响应的过程。。？过程，就是发起ajax请求的时候调用loading的启动，ajax请求成功的时候在回调函数里面调用loading的关闭
1 楼 641216927 2009-09-13  
谢谢!这是一个友好提示功能,但是有什么好解决方案获得服务端响应客户端,并完成响应处理数据?
发表评论

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

相关推荐

    jQuery 通用dialog/popup弹出层，提示窗口插件

    内容索引:脚本资源,jQuery,提示框,弹出层　jQuery 通用dialog/popup弹出层，提示窗口插件，包括有弹出自定义的帮助窗口（根据位置自动判断在底部或头部弹出）、显示和隐藏Loading信息、显示自定义Loading信息、在...

    employee-tracker

    员工追踪器 描述 用于在SQL数据库中添加，删除和修改员工记录的命令行工具。 目录 安装 如果还没有节点，请安装它 ...该程序是免费软件：您可以根据自由软件基金会发布的GNU通用公共许可证的条款（许可证的版本3）

    大河门户网源码 v1.1.rar

    注意中间用|线隔开，这样就完成设置了，请等待支付宝公司审核通过后就可以正常使用。 财富通等其他支付，按照上面的说明设置就可以了。 6、用户登陆里的QQ登陆和支付宝登陆怎么修改？ 进后台--系统管理--API通用...

    大河生活网 7.1.rar

    进后台，标签设置--自定义静态标签里，点“全站频道导航”直接修改全站频道名称和连接，点“头部通用”修改全站头部，点“底部通用”修改全站底部。 提示：修改完这些地方的信息后，需要重新生成下html静态文件. 3...

    JAVA上百实例源码以及开源项目源代码

    第一步：运行ServerData.java 启动服务器，然后服务器处于等待状态 第二步：运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步：在登陆后的界面文本框输入文本，然后发送 可以同时启动...

    从零开始学习JQuery

    有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则...

    精易模块[源码] V5.15

    4、改善“类_通用对话框”打开与保存对话框拥有易全部属性，感谢易友【詠不言敗】提议。 5、新增“类_通用对话框-&gt;选择字体”成功返回字体相关信息，调用格式如； 编辑框.字体=选择字体() 6、修复“网页_创建快捷...

    JAVA上百实例源码以及开源项目

    第一步：运行ServerData.java 启动服务器，然后服务器处于等待状态 第二步：运行LoginData.java 启动(客户端)登陆界面 输入用户名 ip为本机localhost 第三步：在登陆后的界面文本框输入文本，然后发送 可以同时启动...

    易想最新升级包V4.0

    16、优化程序代码的可用性和通用性； 17、优化会员等级图片显示功能； 18、优化联系信息权限控制问题，细节了访问权限控制； 19、优化会员中心人才管理“未审核”和“未通过”重复问题； 20、完善水印功能，可根据...

    大河生活网 6.5

    进后台，标签设置--自定义静态标签里，点“全站频道导航”直接修改全站频道名称和连接，点“头部通用”修改全站头部，点“底部通用”修改全站底部。 提示：修改完这些地方的信息后，需要重新生成下html静态文件. 3、...

    精易官方免费模块v3.60版

    3.增加“系统_屏蔽任务管理器1”“系统_恢复任务管理器1”的备注提示信息 4.增加 “时间_取现行时间戳” 一个可选参数，是否为 十位时间戳 感谢 H婶 的提醒 5.修复 “时间_转为GMT格式” 日期缩写错误 感谢 H婶 的...

    ZXV10 H608B 破解

    它规定了家庭网关进行远程管理配置时的通用框架和协议，用于从网络侧“电信”对家庭网关“H608B”进行远程集中管理。）好了保存重启之后，开始设置你的网络了。 ==============================================...

    cms后台管理

    安 装成功后将提示信息，请再重启Tomcat 完成安装。 Tomcat重启完毕之后，在浏览器的地址栏中输入http://localhost:8080/jeecms， 若系统正常显示默认的站点首页则表示JEECMS 已经顺利安装完成. 附： 系统管理...

    网管教程 从入门到精通软件篇.txt

    网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp（2000）的光盘，安装时候选R，修复！ Windows XP（包括 ...JS：javascript源文件 JSP：HTML网页，其中包含有对一个Java servlet...

Magicbox
Global site tag (gtag.js) - Google Analytics