基于PNotify的消息提示Demo（轮询）

需求：有些任务需要定时更新，获取最新的消息，这样就需要定时轮询，再者需要一种友好的提示。

以下就是使用PNotify插件的消息提示：

 

1、HTML代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Demo</title>
 5         <meta charset="UTF-8">
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7         <link rel="stylesheet" href="css/bootstrap.css">
 8         <link rel="stylesheet" href="css/pnotify.css">
 9         <link rel="stylesheet" href="css/pnotify.brighttheme.css">
10         <link rel="stylesheet" href="css/pnotify.history.css">
11         <link rel="stylesheet" href="css/pnotify.buttons.css">
12         
13 
14         <script type="text/javascript" src="js/require.js"></script>
15         <script type="text/javascript" src="js/jquery.js"></script>
16         <script type="text/javascript" src="js/pnotify.js"></script>
17         <script type="text/javascript" src="js/pnotify.reference.js"></script>
18         <script type="text/javascript" src="js/pnotify.history.js"></script>
19         <script type="text/javascript" src="js/pnotify.buttons.js"></script>
20         <script type="text/javascript" src="js/bootstrap.js"></script>
21         <script type="text/javascript">
22             var timmer;
23             var counter = 1;
24             $(function(){
25                 $("#button1").click(function(){
26                     showNotice('你有一个新消息','此消息来源：【'+$(this).text()+'】');
27                 });
28                 $("#button2").click(function(){
29                     timmer = setInterval(function(){
30                         showNotice('你有一个新消息','此消息来源：【'+'定时轮询'+counter+'】','warning');
31                         counter++;
32                     },1000);
33                 });
34 
35                 $("#button3").click(function(){
36                     clearInterval(timmer);
37                     counter = 1;
38                 });
39             });
40             
41             
42             //消息展示
43             function showNotice(title, text, type = 'info', delay = 1000*10 ) {
44                 requirejs(['jquery', 'pnotify', 'pnotify.history','pnotify.buttons'], function($, PNotify){
45                     PNotify.prototype.options.styling = "bootstrap3";
46                     new PNotify({
47                         title: title,
48                         text: text,
49                         type:type,
50                         delay:delay,
51                         hide:true, //是否自动关闭
52                         mouse_reset:true,   //鼠标悬浮的时候，时间重置
53 
54                         history:{
55                             history:true,
56                             menu:true,
57                             fixed:true,
58                             maxonscreen:Infinity ,
59                             labels: {redisplay: "历史消息", all: "显示全部", last: "最后一个"}
60                         },
61                         buttons:{
62                             closer:true,
63                             closer_hover:false,
64                             sticker_hover:true,
65                             //labels: {close: "Close", stick: "Stick"}
66                         },
67 
68 
69 
70                     });
71                 });
72     }
73         </script>
74     </head>
75     <body>
76         <div style="padding: 25vh 0; text-align: center;">
77             <button id="button1" class="btn btn-info">弹出新窗口</button><hr>
78             <button id="button2" class="btn btn-success">开始定时轮询</button><hr>
79             <button id="button3" class="btn btn-warning">清除定时轮询</button>
80         </div>
81     </body>
82 </html>

 

2、效果图

3、源码附件

 　　http://download.csdn.net/detail/qq_22805437/9739394

posted @ 2016-12-26 20:24  蜗牛噢  阅读(3426)  评论(0)  编辑  收藏  举报