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

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

1、HTML代码

 <!DOCTYPE html>

 <html>

     <head>

         <title>Demo</title>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <link rel="stylesheet" href="css/bootstrap.css">

         <link rel="stylesheet" href="css/pnotify.css">

         <link rel="stylesheet" href="css/pnotify.brighttheme.css">

         <link rel="stylesheet" href="css/pnotify.history.css">

         <link rel="stylesheet" href="css/pnotify.buttons.css">

         <script type="text/javascript" src="js/require.js"></script>

         <script type="text/javascript" src="js/jquery.js"></script>

         <script type="text/javascript" src="js/pnotify.js"></script>

         <script type="text/javascript" src="js/pnotify.reference.js"></script>

         <script type="text/javascript" src="js/pnotify.history.js"></script>

         <script type="text/javascript" src="js/pnotify.buttons.js"></script>

         <script type="text/javascript" src="js/bootstrap.js"></script>

         <script type="text/javascript">

             var timmer;

             var counter = 1;

             $(function(){

                 $("#button1").click(function(){

                     showNotice('你有一个新消息','此消息来源：【'+$(this).text()+'】');

                 });

                 $("#button2").click(function(){

                     timmer = setInterval(function(){

                         showNotice('你有一个新消息','此消息来源：【'+'定时轮询'+counter+'】','warning');

                         counter++;

                     },1000);

                 });

                 $("#button3").click(function(){

                     clearInterval(timmer);

                     counter = 1;

                 });

             });

             //消息展示

             function showNotice(title, text, type = 'info', delay = 1000*10 ) {

                 requirejs(['jquery', 'pnotify', 'pnotify.history','pnotify.buttons'], function($, PNotify){

                     PNotify.prototype.options.styling = "bootstrap3";

                     new PNotify({

                         title: title,

                         text: text,

                         type:type,

                         delay:delay,

                         hide:true, //是否自动关闭

                         mouse_reset:true,   //鼠标悬浮的时候，时间重置

                         history:{

                             history:true,

                             menu:true,

                             fixed:true,

                             maxonscreen:Infinity ,

                             labels: {redisplay: "历史消息", all: "显示全部", last: "最后一个"}

                         },

                         buttons:{

                             closer:true,

                             closer_hover:false,

                             sticker_hover:true,

                             //labels: {close: "Close", stick: "Stick"}

                         },

                     });

                 });

     }

         </script>

     </head>

     <body>

         <div style="padding: 25vh 0; text-align: center;">

             <button id="button1" class="btn btn-info">弹出新窗口</button><hr>

             <button id="button2" class="btn btn-success">开始定时轮询</button><hr>

             <button id="button3" class="btn btn-warning">清除定时轮询</button>

         </div>

     </body>

 </html>

2、效果图

3、源码附件

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

基于PNotify的消息提示Demo（轮询）的更多相关文章

  1. 用 ASP.NET MVC 实现基于 XMLHttpRequest long polling（长轮询） 的 Comet

    ASP.NET 计时器   http://www.cnblogs.com/dudu/archive/2011/10/17/2215321.html   http://www.cnblogs.com/w ...

  2. 用 ASP.NET MVC 实现基于 XMLHttpRequest long polling（长轮询） 的 Comet（转）

    轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 优点:后端程序编写比较容易. 缺点:请求中有大半是无用,浪费带宽和服务器资源. 实例:适于小型应用. 长轮询:客 ...

  3. 消息提示demo

    我们做网站,经常会遇到消息提示. 我仿照腾讯的邮箱做了个小demo. 提示出现后,几秒消失.提示的位置是固定的.不受布局的影响. 效果如下: 提示通常分两种,一种使错误提示,一种是成功提示.用不同的c ...

  4. 基于jquery,php实现AJAX长轮询(LongPoll)，类似推送机制

    HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到“ 服务器推送技术(Comet)” ...

  5. 基于jquery的消息提示框toastr.js

    //消息提示全局配置 toastr.options = { "closeButton": false,//是否配置关闭按钮 "debug": false,//是 ...

  6. 基于JQuery 的消息提示框效果代码

    提示框效果 一下是封装到 Jquery.L.Message.js 中的JS文件内容 var returnurl = ''; var messagebox_timer; $.fn.messagebox ...

  7. Android学习系列(7)--App轮询服务器消息

    这篇文章是android开发人员的必备知识. 1.轮询服务器     一般的应用,定时通知消息可以采用轮询的方法从服务器拿取消息,当然实时消息通知的话,建议采用推送服务.    其中需要注意轮询的频率 ...

  8. 三周，用长轮询实现Chat并迁移到Azure测试

    公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...

  9. 长轮询实现Chat并迁移到Azure测试

    长轮询实现Chat并迁移到Azure测试 公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都 ...

随机推荐

  1. centos中基于随机数，再加入班级学生姓名

    这只需要在上一篇的随机数中加入数值就可以了 代码如下 #!/bin/bash num=$(date +%N); c=(wanghao xieyunsheng) a=`expr $num % 39 ` ...

  2. spring配置文件

    pom文件: <properties> <commons-lang.version>2.6</commons-lang.version> <slf4j.ver ...

  3. asp.net timer viewstate

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. Boostrap

    基本认知: Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面. Bootstrap的优缺点: 缺点: 1. ...

  5. 一个ubuntu phper的自我修养（atom）

    将atom打造成二十一世纪最装那啥的php IDE 之前在windows平台使用的php IDE一直是eclipse for php,因为之前做java开发,所以对eclipse很有感情,debug. ...

  6. java Http编程小结

    1:什么是HTTP? 超文本传输协议(HyperText Transfer Protocol -- HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议. HTTP在客户端和服务器之间以reque ...

  7. Android BinderService 过程

    步骤:建立服务器端服务,暴露接口 1.BinderService /** * @Title BinderService.java * @package cn.boxai.binderservice * ...

  8. Angular Mobile UI API文档

    这个是angular-mobile-ui的主要模块 应用这个模块你也将同时获取到mobile-angular-ui.core和mobile-angular-ui.components的特性 他不在需要 ...

  9. Windows 服务快捷启动命令

    gpedit.msc-----组策略sndrec32-----录音机nslookup----- ip地址侦测器explorer------ 打开资源管理器logoff-------注销命令tsshut ...

  10. Attribute

    Attribute介绍 咱们来说Attribute,他是一个类,所以自定义的Attribute都是继承自System.Attribute,一般命名的时候都是以Attribute结尾.在使用的时候我们可 ...