js等待提示通用类
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等待提示通用类的更多相关文章
- js实现操作等待提示loading……
js实现操作等待功能,防止重复提交,界面友好,底部为灰色遮罩层,防止用户重复操作. 先看效果图: 接着看js代码: //关闭等待窗口 function closeWaiting() { var b ...
- NPOI MVC 模型导出Excel通用类
通用类: public enum DataTypeEnum { Int = , Float = , Double = , String = , DateTime = , Date = } public ...
- MVC NPOI Linq导出Excel通用类
之前写了一个模型导出Excel通用类,但是在实际应用中,可能不是直接导出模型,而是通过Linq查询后获取到最终结果再导出 通用类: public enum DataTypeEnum { Int = , ...
- Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）
1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...
- poi导出excel通用类
一.关键的通用类public class PoiExportUtils { private static HSSFWorkbook workBook; public PoiExportUtils ...
- NPOI导入导出EXCEL通用类，供参考，可直接使用在WinForm项目中
以下是NPOI导入导出EXCEL通用类,是在别人的代码上进行优化的,兼容xls与xlsx文件格式,供参考,可直接使用在WinForm项目中,由于XSSFWorkbook类型的Write方法限制,Wri ...
- mongdo通用类(C#版)
日前从公司离职,很快,还没休息就步入了现在的公司,开始跟着公司的脚步走. 公司的项目基本都是大数据的,所以在数据库上大部分都是使用Mongodb和Redis,基本都是Nosql型的数据库为主.以前自己 ...
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- 原生js添加和删除类
原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...
随机推荐
- PAT (Basic Level) Practise （中文）-1029. 旧键盘(20)
PAT (Basic Level) Practise (中文)-1029. 旧键盘(20) http://www.patest.cn/contests/pat-b-practise/1029 旧键盘上 ...
- struts2的单个文件上传
本文主要两种方式,一:通过 FileUtils.copyFile(file, savefile);方法复制:二:通过字节流方式复制 web.xml <?xml version="1.0 ...
- javase(14)_java基础增强
一.Eclipse的使用 1.在eclipse下Java程序的编写和run as,debug as,及java运行环境的配置. 2.快捷键的配置,常用快捷键: •内容提示:Alt + / •快速修复: ...
- 【图论 动态规划拆点】luoguP3953 逛公园
经典的动态规划拆点问题. 题目描述 策策同学特别喜欢逛公园.公园可以看成一张 NN 个点 MM 条边构成的有向图,且没有 自环和重边.其中1号点是公园的入口, NN 号点是公园的出口,每条边有一个非负 ...
- 【线段树】bzoj3585: mex
非常精妙的线段树题 Description 有一个长度为n的数组{a1,a2,...,an}.m次询问,每次询问一个区间内最小没有出现过的自然数. Input 第一行n,m. 第二行为n个数. 从第三 ...
- 【NOIP2017提高A组冲刺11.6】拆网线
和syq大兄弟吐槽题目不小心yy出了正解.. 最优的选法就是选两个两个相互独立的,欸这不就是最大匹配吗?那多的企鹅就新加一条边呗?不够的就除以2上取整呗? 欸?AC了? 树也是一个二分图,最大匹配=最 ...
- verilog behavioral modeling --procedural assignments
1.procedural assignments are used for updating reg ,integer , time ,real,realtime and memory data ty ...
- python--网络通信协议
一 . osi七层协议 互联网协议按照功能不同分为osi七层或tcp/ip五层或tcp/ip四层 二 . tcp三次握手和四次挥手 我们知道网络层,可以实现两个主机之间的通信.但是这并不具体,因为,真 ...
- rootfs注册挂载过程分析
参考:Linux Filesystem: 解析 Linux 中的 VFS 文件系统机制 主要代码, init_rootfs(); init_mount_tree(); 1.init_rootfs()解 ...
- Java实现——Dom4j读写XML文件
1. dom4j概述 解析DOM4J是一个开源XML解析包,采用了Java集合框架并完全支持DOM,SAX和JAXP. 最大的特色是使用了大量的接口,主要接口都在org.dom4j里定义. 2. do ...