一个仿QQ消息弹出效果

 点击这里下载需要的jar

 
  
  1. <script src="jquery.messager.js"></script> 
  2. <script> 
  3. $(document).ready(function(){ 
  4.     $.messager.show(0,'送你一个Jquery Messager消息弹出插件！'); 
  5.     $("#showMessager300x200").click(function(){ 
  6.         $.messager.lays(300, 200); 
  7.         $.messager.show(0, '300x200的消息'); 
  8.     }); 
  9.     $("#showMessagerFadeIn").click(function(){ 
  10.         $.messager.anim('fade', 2000); 
  11.         $.messager.show(0, 'fadeIn动画消息'); 
  12.     }); 
  13.     $("#showMessagerShow").click(function(){ 
  14.         $.messager.anim('show', 1000); 
  15.         $.messager.show(0, 'show动画消息'); 
  16.     }); 
  17.     $("#showMessagerDim").click(function(){ 
  18.         $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>'); 
  19.     }); 
  20.     $("#showMessagerSec").click(function(){ 
  21.         $.messager.show(0, '一秒钟关闭消息', 1000); 
  22.     }); 
  23.     $("#showMessagerNoClose").click(function(){ 
  24.         $.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦！', 0); 
  25.     }); 
  26. }); 
  27. </script> 
  28. <style type="text/css"> 
  29. <!-- 
  30. body,td,th { font-size: 12px; } 
  31. body { background-color: #fefefe; } 
  32. p   { width:80%; height:auto; padding:10px; background-color:#D6F097; border:solid 1px #FF9900; color:#333; margin-left:auto; margin-right:auto;} 
  33. input   { background-color:#F5D99E; color:#333; border:solid 1px #993300; font-size:12px;} 
  34. p.new input { background-color:#FF0000; color:#fff;} 
  35. --> 
  36. </style>
 
  
 
 
  
 
  
  1. <p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p> 
  2. <p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p> 
  3. <p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p> 
  4. <p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p> 
  5. <p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p> 
  6. <p class="new"><input type="button" id="showMessagerNoClose" value="不自动关闭消息" /></p> 
 
  
     
 
  
  实际 需求实例：
 
  
     定时刷新由客人自己下的在线预定订单，然后提醒她们及时处理。
 
  
       插件：
 
  
       jquery.messager.js，实现通过定时查询数据库记录，并通过消息插件弹出提醒客户。
 
  
       首先下载插件：jquery.messager.rar(可以查看压缩包里的demo.htm文件，来了解怎么使用此插件)
        1、先将jquery.js 和jquery.message.js文件引到页面文件里
 
  
       2、在 .cs文件里 编写 查询数据库记录数的函数
 
  
       3、在页面里写js代码来实现定时查询
 
  
 
   

       
   
 
   
 
   
  1. functionGetOrderCount() 
  2. { 
  3. $.ajax({ 
  4. type: "get", 
  5. dataType: "html", 
  6. url: "/Jquery/ashx/order.ashx", 
  7. data: "", 
  8. success: function(data){ 
  9. if(data>0) 
  10. { 
  11. $.messager.anim('fade', 2000); 
  12. $.messager.show('客人自助单提醒',' 
  13.  目前尚有'+data+'个客人自助单未处理，请相关客服尽快处理！进入处理',10000); 
  14. } 
  15. } 
  16. });  
  17. } 
  18.  
  19. $(document).ready(function(){ 
  20. GetOrderCount() 
  21. window.setInterval("GetOrderCount()",60000);//1分钟刷新1次 
  22. });