首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

类似GMAIL的Ajax信息反馈显示

Posted in Javascript onFebruary 16, 2010

类似GMAIL的Ajax信息反馈显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE> 
<META http-equiv=Content-Type content="text/html; charset=gb2312"> 
<META content="MSHTML 6.00.2900.2180" name=GENERATOR> 
<META content="" name=author> 
<META content="" name=keywords> 
<META content="" name=description> 
<STYLE type=text/css>#show_feedBack_message { 
BORDER-RIGHT: #f00 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #f00 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 12px; BACKGROUND: #fc0; PADDING-BOTTOM: 3px; BORDER-LEFT: #f00 1px solid; LINE-HEIGHT: 18px; PADDING-TOP: 3px; BORDER-BOTTOM: #f00 1px solid 
} 
{ 
FONT-SIZE: 12px 
} 
OL LI { 
MARGIN: 15px 0px 
} 
OL LI A { 
FONT-SIZE: 14px; COLOR: #00f 
} 
</STYLE> 
</HEAD> 
<BODY> 
<SCRIPT type=text/javascript> 
<!-- 
/* 
message:要显示的消息 
x,y:显示消息框的坐标,默认为左上角 
delay:延迟多长时间消失，-1为永不消失，单位为毫秒 
*/ 
function feedBackMessage(message,x,y,delay){ 
if(!message) return; 
//只允许百分数或数值参数 
x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px"; 
y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px"; 
delay=parseInt(delay)||-1; 
var fdDiv=document.getElementById('show_feedBack_message'); 
if(!fdDiv){ 
var showMessage=document.createElement("<div id='show_feedBack_message' style='z-index:10000;filter:alpha(opacity=100);position:absolute;white-space:nowrap'></div>"); 
document.body.appendChild(showMessage); 
fdDiv=document.getElementById('show_feedBack_message'); 
} if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)} 
fdDiv.innerHTML=message; 
fdDiv.style.display=""; 
var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth; 
var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight; 
if(/left|right/.test(x)){ 
x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px"; 
} 
if(/top|bottom/.test(y)){ 
y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px"; 
} 
fdDiv.style.left=x; 
fdDiv.style.top=y; 
fdDiv.filters.Alpha.Opacity=100; 
//渐隐效果 
var step=parseInt(delay/100); 
var alpha=fdDiv.filters.Alpha.Opacity; 
if(delay!=-1){ 
feedBackMessage.timer=setInterval(function(){ 
if(fdDiv.filters.Alpha.Opacity>0){ 
fdDiv.filters.Alpha.Opacity-- 
}else{ 
clearInterval(feedBackMessage.timer); 
fdDiv.style.display="none" 
} 
},step); 
} 
} 
//--> 
</SCRIPT> 
<DIV style="TEXT-ALIGN: center"> 
<DIV style="MARGIN: 15px auto; WIDTH: 96%; TEXT-ALIGN: left"> 
<OL> 
<LI>(默认设置)显示位置：左上角 消失时间：不消失<BR><BR><A 
onclick="feedBackMessage('消息提示测试1......');return false" 
href="#">feedBackMessage('消息提示测试......')</A> 
<LI>显示位置：left:200px,top:200px 消失时间：5秒后<BR><BR><A 
onclick="feedBackMessage('消息提示测试1......','200','200',5000);return false" 
href="#">feedBackMessage('消息提示测试1......','200','200',5000)</A> 
<LI>显示位置：页面右上部 消失时间：3秒后<BR><BR><A 
onclick="feedBackMessage('消息提示测试2......','right','top',3000);return false" 
href="#">feedBackMessage('消息提示测试2......','right','top',3000)</A> 
<LI>显示位置：left:50%,top:50% 消失时间：2秒后<BR><BR><A 
onclick="feedBackMessage('消息提示测试3......','50%','50%',2000);return false" 
href="#">feedBackMessage('消息提示测试3......','50%','50%',2000)</A> 
<LI>显示位置：left:500px,top:200px 消失时间：不消失<BR><BR><A 
onclick="feedBackMessage('消息提示测试4......','500','200',-1);return false" 
href="#">feedBackMessage('消息提示测试4......','500','200',-1)</A> </LI></OL></DIV> 
<DIV 
style="FONT-SIZE: 14px; MARGIN: 15px auto; WIDTH: 96%; LINE-HEIGHT: 20px; TEXT-ALIGN: left">函数语法：feedBackMessage(Message,X,Y,Delay) 
<BR><BR><STRONG>参数介绍：</STRONG> <BR><U>Message：</U>必填参数。该参数为要显示的消息内容，可以为html内容 
<BR><U>X：</U>水平方向的位置，可以是数值如50，250等，也可以是百分比如50%，或者是以下两个参数：left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。 
<BR><U>Y：</U>垂直方向的位置，可以是数值，也可以是百分比，或者是以下两个参数：top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。 
<BR><U>Delay：</U>显示时间，即多长时间后消失，单位为毫秒，如5000即5秒后消失，设定为-1则永不消失。默认为-1 
</DIV></DIV> 
</BODY> 
</HTML>

在线演示 http://demo.3water.com/js/gmail_info/demo.htm

类似GMAIL的Ajax信息反馈显示

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js身份证验证超强脚本
Oct 26 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
JavaScript 10件让人费解的事情
Feb 15 #Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 #Javascript
jQuery 处理表单元素的代码
Feb 15 #Javascript
jQuery 树形结构的选择器
Feb 15 #Javascript
jQuery 处理网页内容的实现代码
Feb 15 #Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 #Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 #Javascript
i5 9400(1) R72E(1) R71E(1) i5 10400(1) 对讲机(1) i7 6700(1) win11(40) GTX1660(1) win10(43) React(6)
You might like
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Js+XML 操作
2006/09/20 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
JavaScript 学习笔记（六）
2009/12/31 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
js类型检查实现代码
2010/10/29 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
python简单文本处理的方法
2015/07/10 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
详解Python中的分组函数groupby和itertools）
2018/07/11 Python
详解Python用户登录接口的方法
2019/04/17 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
教你怎样写好自我评价
2013/10/05 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
和谐社区口号
2014/06/19 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
电工实训报告总结
2014/11/05 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
Python3接口性能测试实例代码
2021/06/20 Python