Ajax信息反馈显示(类似GMAIL、126等)

JavaScript技术    2010-02-03 18:13  

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  
  2. <!-- saved from url=http://blog.huangchao.org/?action=show&id=20 -->
  3. <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>new document</TITLE>  
  4. <META http-equiv=Content-Type content="text/html; charset=gb2312">  
  5. <META content="MSHTML 6.00.2900.2180" name=GENERATOR>  
  6. <META content="" name=author>  
  7. <META content="" name=keywords>  
  8. <META content="" name=description>  
  9. <STYLE type=text/css>#show_feedBack_message {   
  10. 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   
  11. }   
  12. {   
  13. FONT-SIZE: 12px   
  14. }   
  15. OL LI {   
  16. MARGIN: 15px 0px   
  17. }   
  18. OL LI A {   
  19. FONT-SIZE: 14px; COLOR: #00f   
  20. }   
  21. </STYLE>  
  22. </HEAD>  
  23. <BODY>  
  24. <SCRIPT type=text/javascript>  
  25. <!--   
  26. /*   
  27. message:要显示的消息   
  28. x,y:显示消息框的坐标,默认为左上角   
  29. delay:延迟多长时间消失，-1为永不消失，单位为毫秒   
  30. */   
  31. function feedBackMessage(message,x,y,delay){   
  32. if(!message) return;   
  33. //只允许百分数或数值参数   
  34. x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";   
  35. y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";   
  36. delay=parseInt(delay)||-1;   
  37. var fdDiv=document.getElementById('show_feedBack_message');   
  38. if(!fdDiv){   
  39. var showMessage=document.createElement("<div id='show_feedBack_message' style='z-index:10000;filter:alpha(opacity=100);position:absolute;white-space:nowrap'></div>");   
  40. document.body.appendChild(showMessage);   
  41. fdDiv=document.getElementById('show_feedBack_message');   
  42. }   
  43.   
  44. if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)}   
  45. fdDiv.innerHTML=message;   
  46. fdDiv.style.display="";   
  47. var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;   
  48. var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight;   
  49. if(/left|right/.test(x)){   
  50. x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px";   
  51. }   
  52. if(/top|bottom/.test(y)){   
  53. y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px";   
  54. }   
  55. fdDiv.style.left=x;   
  56. fdDiv.style.top=y;   
  57. fdDiv.filters.Alpha.Opacity=100;   
  58.   
  59. //渐隐效果   
  60. var step=parseInt(delay/100);   
  61. var alpha=fdDiv.filters.Alpha.Opacity;   
  62. if(delay!=-1){   
  63. feedBackMessage.timer=setInterval(function(){   
  64. if(fdDiv.filters.Alpha.Opacity>0){   
  65. fdDiv.filters.Alpha.Opacity--   
  66. }else{   
  67. clearInterval(feedBackMessage.timer);   
  68. fdDiv.style.display="none"  
  69. }   
  70. },step);   
  71. }   
  72. }   
  73. //-->  
  74. </SCRIPT>  
  75.   
  76. <DIV style="TEXT-ALIGN: center">  
  77. <DIV style="MARGIN: 15px auto; WIDTH: 96%; TEXT-ALIGN: left">  
  78. <OL>  
  79. <LI>(默认设置)显示位置：左上角 消失时间：不消失<BR><BR><A    
  80. onclick="feedBackMessage('消息提示测试1......');return false"    
  81. href="http://book.chinaz.com/ajax/example/message1.html#">feedBackMessage('消息提示测试......')</A>    
  82.   
  83. <LI>显示位置：left:200px,top:200px 消失时间：5秒后<BR><BR><A    
  84. onclick="feedBackMessage('消息提示测试1......','200','200',5000);return false"    
  85. href="http://book.chinaz.com/ajax/example/message1.html#">feedBackMessage('消息提示测试1......','200','200',5000)</A>    
  86.   
  87. <LI>显示位置：页面右上部 消失时间：3秒后<BR><BR><A    
  88. onclick="feedBackMessage('消息提示测试2......','right','top',3000);return false"    
  89. href="http://book.chinaz.com/ajax/example/message1.html#">feedBackMessage('消息提示测试2......','right','top',3000)</A>    
  90.   
  91. <LI>显示位置：left:50%,top:50% 消失时间：2秒后<BR><BR><A    
  92. onclick="feedBackMessage('<a href=\'#\'>消息</a>提示测试3......','50%','50%',2000);return false"    
  93. href="http://book.chinaz.com/ajax/example/message1.html#">feedBackMessage('<a    
  94. href=#>消息</a>提示测试3......','50%','50%',2000)</A>    
  95. <LI>显示位置：left:500px,top:200px 消失时间：不消失<BR><BR><A    
  96. onclick="feedBackMessage('消息提示测试4......','500','200',-1);return false"    
  97. href="http://book.chinaz.com/ajax/example/message1.html#">feedBackMessage('<a    
  98. href=#>消息</a>提示测试4......','500','200',-1)</A> </LI></OL></DIV>  
  99. <DIV    
  100. style="FONT-SIZE: 14px; MARGIN: 15px auto; WIDTH: 96%; LINE-HEIGHT: 20px; TEXT-ALIGN: left">函数语法：feedBackMessage(Message,X,Y,Delay)    
  101. <BR><BR><STRONG>参数介绍：</STRONG> <BR><U>Message：</U>必填参数。该参数为要显示的消息内容，可以为html内容    
  102. <BR><U>X：</U>水平方向的位置，可以是数值如50，250等，也可以是百分比如50%，或者是以下两个参数：left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。    
  103. <BR><U>Y：</U>垂直方向的位置，可以是数值，也可以是百分比，或者是以下两个参数：top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。    
  104. <BR><U>Delay：</U>显示时间，即多长时间后消失，单位为毫秒，如5000即5秒后消失，设定为-1则永不消失。默认为-1    
  105. </DIV></DIV>  
  106. </BODY>  
  107. </HTML>  

　　代码演示： /tools/message1.htm

上一条： AJAX模拟HTTP LongPoll 实现“服务器推”技术
下一条： jQuery对象与dom对象相互转换

在线留言

我要留言