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>

js等待提示通用类的更多相关文章

  1. js实现操作等待提示loading……

    js实现操作等待功能,防止重复提交,界面友好,底部为灰色遮罩层,防止用户重复操作. 先看效果图:   接着看js代码: //关闭等待窗口 function closeWaiting() { var b ...

  2. NPOI MVC 模型导出Excel通用类

    通用类: public enum DataTypeEnum { Int = , Float = , Double = , String = , DateTime = , Date = } public ...

  3. MVC NPOI Linq导出Excel通用类

    之前写了一个模型导出Excel通用类,但是在实际应用中,可能不是直接导出模型,而是通过Linq查询后获取到最终结果再导出 通用类: public enum DataTypeEnum { Int = , ...

  4. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  5. poi导出excel通用类

    一.关键的通用类public class PoiExportUtils {    private static HSSFWorkbook workBook; public PoiExportUtils ...

  6. NPOI导入导出EXCEL通用类，供参考，可直接使用在WinForm项目中

    以下是NPOI导入导出EXCEL通用类,是在别人的代码上进行优化的,兼容xls与xlsx文件格式,供参考,可直接使用在WinForm项目中,由于XSSFWorkbook类型的Write方法限制,Wri ...

  7. mongdo通用类(C#版)

    日前从公司离职,很快,还没休息就步入了现在的公司,开始跟着公司的脚步走. 公司的项目基本都是大数据的,所以在数据库上大部分都是使用Mongodb和Redis,基本都是Nosql型的数据库为主.以前自己 ...

  8. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  9. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

随机推荐

  1. Asp.Net Core 入门（十）—— 模型绑定和验证

    模型绑定时将Http请求中的数据映射到控制器操作方法上对应的参数,操作方法中的参数可以是简单类型,如整形,字符串等,也可以是复杂类型,如Product,Order等. Asp.Net Core MVC ...

  2. python之编码的进阶

    识记点: ascii 不支持中文 gbk 国标 中文2 英文1 unicode 万国码 英文2 中文4 utf-8 英文1 欧洲2 亚洲3 硬盘中存储的是字节 用什么编码就用什么解码 # 一段文字的转 ...

  3. hibernate3缓存（hibernate）

    一级缓存:当应用程序调用Session 的save() .update() .savaeOrUpdate() .get() 或load() ,以及调用查询接口的list() .iterate() 或f ...

  4. [POJ] 1135 Domino Effect

    Domino Effect Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12147 Accepted: 3046 Descri ...

  5. perl：split函数用法

    本文和大家重点讨论一下Perl split函数的用法,Perl中的一个非常有用的函数是Perl split函数-把字符串进行分割并把分割后的结果放入数组中.这个Perl split函数使用规则表达式( ...

  6. python 基础知识汇总—— if else while continue

    1.if 语句 什么是if语句?if语句用来干什么的? if语句说通俗点,就是判断,如果判断条件为真,那么就执行语句,就像我们生活中例子,如果你饿了,判断为真,就要吃饭,于是你就会执行吃饭这个动作,如 ...

  7. pyhton链式赋值在可变类型/不可变类型上的区别以及其本质

    关于链式赋值的一些注意点: a=[]b=[]x=y=[]print(a==b) #Trueprint(x==y) #Trueprint(a is b) #Falseprint(x is y) #Tru ...

  8. vmalloc_init

    /* linux/mm/vmalloc.c*/ struct vmap_area { unsigned long va_start; unsigned long va_end; unsigned lo ...

  9. Spring，Mybatis，Springmvc框架整合项目(第三部分)

    一.静态资源不拦截 第二部分最后显示的几个页面其实都加载了css和js等文件,要不然不会显示的那么好看(假装好看吧),前面已经说了,我们在web.xml中配置了url的拦截形式是/,那么Dispatc ...

  10. PAT Basic 1024

    1024 科学计数法 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式[+-][1-9]"."[0-9]+E[+-][0-9]+,即数字的整数部分只有1 ...