类似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.jb51.net/js/gmail_info/demo.htm

赞 (0)

相关推荐

  • 类似GMAIL的Ajax信息反馈显示

    类似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 docume

  • 使用base64对图片的二进制进行编码并用ajax进行显示

    使用base64对图片的二进制进行编码并用ajax进行显示 有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的. 直接返回字节流给img标签的src是可以的,如<img src="servlet/CheckCode">,但在之后进行切换的时候使用ajax请求,如果

  • Yii使用ajax验证显示错误messagebox的解决方法

    本文实例讲述了Yii使用ajax验证显示错误messagebox的解决方法.分享给大家供大家参考.具体方法如下: yii 自带了ajax 表单验证 这个可能有些朋友不知道了,但我今天在使用yii 自带的ajax 表单验证 时碰到一些问题,下面我来整理例子与大家参考一下. 在Yii中,可以利用ajax执行一个action,但是这个action有时候会有弹出错误讯息的需求,这时候的处理方式如下 基本思想 利用exception,比如: 复制代码 代码如下: throw new CHttpExcept

  • Ajax.net 显示错误信息的设置

    <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" /> 将ScriptManager 中的 EnablePartialRendering="false" 就会显示错误信息

  • 用Ajax来控制书签和回退按钮的代码

    用Ajax来控制书签和回退按钮的代码

    这篇文章描述了一个支持Ajax应用书签和回退按钮的开源的javascript库.在这个指南的最后,开发者将会得出一个甚至不是Google Maps 或者 Gmail那样处理的Ajax的解决方案:健壮的,可用的书签和向前向后的动作能够象其他的web页面一样正确的工作. Ajax:怎样去控制书签和回退按钮 这篇文章说明了一个重要的成果,Ajax应用目前面对着书签和回退按钮的应用,描述了非常简单的历史库(Really Simple History),一个开源的解决这类问题的框架,并提供了一些能够运行的

  • Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

  • ASP+AJAX+ACCESS数据库实例讲解三个步骤分享

    看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用. 你也可以直接访问:http://www.jb51.net/codes/57017.html 下载ajax教程的源码示例. 好,下面我们就始一步步让你了解AJAX+ASP基础应用,我们将分三步讲解,如下. 1. 前台AJAX代码(javascript)的创建. 2. 后台服务端ASP AJAX代码的编写. 3. ASP+AJAX+数据库的实例演示及讲解. 第一步:前台AJAX代码(javascript)的创建. 我们先创建一

  • jQuery实现ajax无刷新分页页码控件

    jQuery实现ajax无刷新分页页码控件

    这段时间在做公司项目的时候需要用到ajax进行分页(点击页码也是无刷新的显示上一页或下一页的内容,不是一般的选择跳转),但是在网上找了一下,大部分分页插件都是直接刷新跳转的,感觉和我的需求差距比较大,就自己动手写了一个可以实现自己需要的功能的js来实现这个控件,实现的效果如下: 因为业务需要,我需要在一个页面创建多个这样的页码控件(有些是在ajax中生成的),显然为每一个控件写一个专属的js是不现实的,所以,我将公共部分提取出来,然后通过传入的选择器不同,对不同的控件进行相应方法的调用. 下面是

  • Ajax 汇总以及初步评价

    Ajax接触不久,我只是为了挑选一款 Ajax 库,才收集的资料,并测试,我的测试很简单,直接看他们网站上的联机demo页面的速度,速度慢的就淘汰! 辅助js:www.formassembly.com\wForms 44k(压缩版)对表单的js扩充可实现本地校验等功能.Ajax: http://www.sarmal.com/sardalya/Download.aspx不错!速度快!有hint控件.75k. free for non-commercial http://openrico.org感觉

  • ajax原理总结附简单实例及其优点

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 详情请移步Ajax: A New Approach to Web Applications [原理] 简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面

随机推荐