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(" 原来的类" ...
随机推荐
- softmax_loss.cu 和 softmax_loss.cpp源码
#include <algorithm> #include <cfloat> #include <vector> #include "caffe/laye ...
- Java习题附答案
第一章练习题(Java入门) 1．下列哪项不是JDK所包含的内容?(选一项)C 红色代表正确答案 A．Java编程语言 B．工具及工具的API C．Java EE扩展API D．Java平台虚拟机 2 ...
- MySQL 实时监控日志
简单的梳理一下为什么要写这边文章,主要是学了ORM之后,发现通过ORM插入数据真的很方便,但是通过ORM生成的SQL语句又是怎么写的呢,百思不得姐.于是就找到了这个办法 首先查看一下查看MySQL 日 ...
- DNA fingerprinting|haplotpe|frequency of polymorphism|限制性标记的多态性
5.4利用RFLP和SNP绘制遗传图 因为限制性标记可以确定那个分子水平上的突变(即已知基因座),但是无法和蛋白质功能相联系.所以我们采用限制性标记的多态性,即该限制酶识别的位点若发生突变,则大概率在 ...
- asp.net core vs2017运行控制台应用程序一闪而过没执行
在cmd中执行dotnet run,会提示当前应用程序版本高于当前安装的.net core sdk 版本 解决: 升级.net core版本到最新
- LeetCode 买卖股票的最佳时机
给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出股票. 示例 ...
- 三：MySql数据库及连接
前言: 开发中团队使用一个MYSQL数据库,我们只需要知道怎么去连接这个已经存在的数据库即可,因此关于MYSQL数据库安装部分可以去Baidu,并不是主要关心的部分 学会在windows7下使用DOS ...
- django第9天(多表操作)
django第9天 models类 class Book(Model): id = AutoField(primary_key=True) name = CharField(max_length=20 ...
- django第七天(模板的复用性,include标签和母版)
django第7天模板 include标签 模板的共用 a 模板需要到使用到 登陆界面 b 模板需要使用到 登陆界面 可以把登陆界面提取到公共的模板c 为什么要用: 都需要使用相同的界面,减少代码冗余 ...
- (原)剑指offer之位运算
题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路: count为1的位数,初始为零 每次右移一为,与1做与运算,结果不为零说明最后一位为1 c++代码如下 in ...