JQUEYR PLUGIN - Messager

 

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

你可能感兴趣的:(jquery,messager)