首页
所有分类
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 相关文章推荐
JavaScript和JQuery实用代码片段（一）
Apr 07 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
JavaScript 继承使用分析
May 12 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
js验证密码强度解析
Mar 18 Javascript
js观察者模式的弹幕案例
Nov 23 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
calc(1) Hive(5) swing(1) OpenFeign(1) SandBox(1) Windows Server(4) HttpClient(1) K8s(1) NTP(1) Windows Server 2022(3)
You might like
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
不安全的常用的js写法
2009/09/15 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
2019/08/29 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
微信小程序绘制半圆（弧形）进度条
2020/11/18 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python实现公司年会抽奖程序
2019/01/22 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
手术室护士自我鉴定
2013/10/14 职场文书
现金会计岗位职责
2013/12/05 职场文书
陕西导游词
2015/02/04 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
辩论赛新闻稿
2015/07/17 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书