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(" 原来的类" ...
随机推荐
- pb2.text_format.Merge(f.read(), self.solver_param) AttributeError: 'module' object has no attribute 'text_format'
http://blog.csdn.net/qq_33202928/article/details/72526710
- Open Cascade：AIS_InteractiveContext如何调用函数选择AIS对象
AIS_InteractiveContext如何调用函数选择AIS对象 myAISContext->MoveTo(point.x, point.y, myView); myAISContext- ...
- javase(14)_java基础增强
一.Eclipse的使用 1.在eclipse下Java程序的编写和run as,debug as,及java运行环境的配置. 2.快捷键的配置,常用快捷键: •内容提示:Alt + / •快速修复: ...
- 268. Missing Number@python
Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...
- linux中添加一个用户到指定用户组的两种方式，修改一个用户到指定用户组的一种方式
添加一个用户到指定用户组: gpasswd –a 用户名 组名usermod –G 组名 用户名 //第一种:gpasswd –a 用户名 组名 [root@localhost ~]# id user ...
- CSS3-媒体类型
一.媒体类型(Media Type) 1.link方法引入 <link rel="stylesheet" type="text/css" href=&qu ...
- Cassandra 数据库安装部署
安装版本 cassandra-3.11.4 系统版本 more /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 准备工作 Cassan ...
- u-boot顶层Makefile分析
1.u-boot制作命令 make forlinx_nand_ram256_config: make all; 2.顶层mkconfig分析,参考 U-BOOT顶层目录mkconfig分析 mkcon ...
- linux下ls出现文件的后缀有@，* ,/之类的解释
ls -Fafptool* img_maker* lzcmp@ lzfgrep@ lzma* lzmore* node-pre-gyp@bower@ ...
- shell相关指令介绍$*和$#以及$?和if [[ ! -z $1 ]]
$#,脚本运行时后跟的参数个数 #! /bin/bash case "$#" in 0) printf "Enter a number: " read n=$R ...