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(" 原来的类" ...
随机推荐
- Java调用存储过程出现Bug,sql语法错误
因为SQL Server运行没有正常,检查了传入参数的值,发现问题,然后传入默认参数,解决了问题.
- HITICS || 2018大作业 程序人生 Hello's P2P
摘 要 本文通过分析一个hello.c的完整的生命周期,从它开始被编译,到被汇编.链接.在进程中运行,讲解了Linux计算机系统执行一个程序的完整过程. 关键词:操作系统,进程,程序的生命周期 目 ...
- Linux文件系统概述二
VFS-目录项对象(dentry) 每个文件除了有一个索引节点 inode 数据结构外,还有一个目录项 dentry 数据结构 dentry 结构代表的是逻辑意义上的文件,描述的是文件逻辑上的属性,目 ...
- Java创建图片文件缩略图
public static void uploadImg(InputStream file, String filePath, String fileName, int widthdist, int ...
- shell脚本，编程题练习。
题目是:将 文件file为 b+b+b+b+b+b+b+b 变为 b+b=b+b=b+b=b+b 解答方法如下:
- makeObjectsPerformSelector用法
亲测 makeObjectsPerformSelector 的用法. - (void)makeObjectsPerformSelector:(SEL)aSelector NS_SWIFT_UNAVAI ...
- JS与IOS、安卓的交互
最近做的项目中涉及到了与安卓和ios的交互问题,对于一个新手来说,多多少少会有点迷糊.在调用安卓和ios的callback回调时,很轻松的就调用成功了,而且,步骤也不那么繁琐.刚开始,只知道那样使用可 ...
- C++系统学习之八：IO库
新的C++标准中有三分之二的内容都是描述标准库.接下来重点学习其中几种核心库设施,这些是应该熟练掌握的. 标准库的核心是很多容器类(顺序容器和关联容器等)和一簇泛型算法(该类算法通常在顺序容器一定范围 ...
- nxlog安装配置
Nxlog安装配置文档 任 帅 1.安装nxlog,全部默认即可. 如果拷贝直接安装,没有拷贝可以下载.下载链接: https://nxlog.co/system/files/products ...
- 【ios】IOS返回3824错误
后台接口数据返回有NULL格式的数据