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

以下就是使用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. 一个ubuntu phper的自我修养（ubuntu安装）

    ubuntu安装篇 一.ubuntu下载 到ubuntu官网下载适合自己电脑配置的系统版本,此处不做展开. 二.制作USB启动盘 在windows下制作USB启动盘,工具是universal usb ...

  2. Instantaneous Transference--POJ3592Tarjan缩点+搜索

    Instantaneous Transference Time Limit: 5000MS Memory Limit: 65536K Description It was long ago when ...

  3. Mysql修改字段长度

    alter table '表名' modify column '列名' varchar(50);

  4. WebForm基础

    客户端与网页端: C/S(客户端): 两种方式:winform WPF 数据是存在其它的电脑上或服务器上 运行时需要从服务器上下载相应的数据 数据加工的过程是在用户电脑上执行 好处是数据请求速度比较快 ...

  5. XFire完整入门教程

    网上关于XFire入门的教程不少,要么是讲得很简单,就像Hello World一样的程序,要么就是通过IDE集成的工具来开发的,这对于不同的人群有诸多不便,关于XFire的一些详细的信息就不再多讲,可 ...

  6. Maven教程

    找了一个很详细的maven教程 收藏下 学习网址:http://www.yiibai.com/maven/

  7. iOS - AppStores App 上架

    前言 1.准备 开发者账号 完工的项目 2.上架步骤 1) 创建 App ID 2) 创建证书请求文件(CSR文件) 3) 创建发布证书(CER) 4) 创建 Provisioning Profile ...

  8. mac系统安装node

    1.node 是通过brew来安装的,所以第一步先安装brew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebre ...

  9. OpenCV学习笔记（二）——OpenCV环境变量配置

    1．  假定电脑上已经安装了VS2010程序,若没有,首先安装vs2010. 下载OpenCV,下载的文件名为"OpenCV-2.3.1-win-superpack". 2．  解 ...

  10. Rdseed与SAC的安装

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...