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

以下就是使用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. SVN图形管理工具-Submint

    1.安装svn及相关依赖包 yum install subversion httpd mod_dav_svn apr-util-sqlite   2.下载submin wget https://sup ...

  2. linux内核追踪——find_next_bit函数详详详解

    写在前面 宗旨:把话说清楚,把道理讲透彻. 约定:所有代码均来自Linux内核2.6.24版. 建议:本文介绍得十分详细,但也略显繁琐,读者可以先看“Ⅴ.总结”部分带注释的源码,如果哪里不清楚,再回头 ...

  3. matplotlib绘制动画

    matplotlib从1.1.0版本以后就开始支持绘制动画,具体使用可以参考官方帮助文档.下面是一个很基本的例子: """ A simple example of an ...

  4. iOS NSURLConnection POST异步请求封装,支持转码GBK,HTTPS等

    .h文件 #import <Foundation/Foundation.h> //成功的回调 typedef void(^successBlock)(id responseObj); // ...

  5. js类型检测

    1.typeof  或者  typeof() 适合基本类型及function检测,遇null失效 ex: typeof 100      返回值为 "number" typeof ...

  6. Openstack+Kubernetes+Docker微服务实践之路--Kubernetes

    经过几番折腾终于搞定Kubernetes了,我们要在Openstack上部署Kubernetes集群,使用最新工具Kubeadm来安装,由于不能直接访问Kubernetes的源,我们需要一台可以穿墙的 ...

  7. How to fix the conflict between ROS Python and Conda

    Problem: Ever since I have installed Conda, ROS does not seem to work. And predictably it is because ...

  8. Docker常见问题解决

    一.Docker中运行ubuntu容器,字体颜色太深导致无法看清 解决方案: 1. 利用dircolors命令,查看我们的系统当前的文件名称显示颜色的值,然后利用管道重定向到用户目录下的任意一个文件( ...

  9. lucene 搜索demo

    package com.ljq.utils; import java.io.File; import java.util.ArrayList; import java.util.List; impor ...

  10. JDBC + MySQL 示例

    jdbc mysql connection 教程 翻译自:JDBC MySQL Connection Tutorial Java Database Connectivity (JDBC) 是一个基于J ...