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

以下就是使用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. java cef3 禁止右键菜单项

    如下图所示,在context_menu_handler.cpp中ContextMenuHandler::OnBeforeContextMenu添加以下代码即可: ){ model->Clear( ...

  2. dynamic与匿名对象

    用dynamic接收匿名对象很方便,因为不需要去定义model了,但是也有一个弊端,就是匿名对象的作用范围是internal的,也就是只能存在于当前程序域,所以用dynimic跨程序域去接收一个匿名对 ...

  3. eclipse 用links 安装插件

    eclipse 用links 安装插件: 1.在eclipse目录下新建文件夹links 2.在links里新建文件 "控件名".link controlName.link 3.在 ...

  4. javascript 值类型与引用类型

    写的比较简单哈,只是用来记忆下 (1)值类型:undefined.null.Boolean.Number和String (2)引用类型:对象.数组.函数

  5. webdriver杀死浏览器和Chromedriver进程

    /**     * 执行dos命令     * @param command     */    public static void command(String command) {       ...

  6. Chapter 2: 随机变量

    1. 随机变量, 离散型随机变量,连续型随机变量 设$\Omega$为随机试验的样本空间,$X:\Omega \rightarrow R$是定义在样本空间$\Omega$上的实值函数,则称$X$为随机 ...

  7. React Native for Android 学习笔记

    C:\Users\Vic Lee\AwesomeProject>react-native run-android Starting JS server... Running D:\Android ...

  8. 一篇说尽Excel常见函数用法

    一篇说尽Excel常见函数用法 Word,PPT,Excel这三个Office软件是职场办公里最常用的三个软件,但是我发现简书上写PPT的教程多,Excel的少,即使有,也是零零散散.因为Excel的 ...

  9. MySQL INSERT插入条件判断：如果不存在则插入

    摘要: 我们经常需要进行sql的批量插入,要求:该条记录不存在则插入,存在则不插入.如果使用一条INSERT语句实现呢? 普通的 INSERT INTO 插入: INSERT INTO card(ca ...

  10. [QT学习]拷贝文件

    sourceDir源绝对路径,toDir目标绝对路径 //拷贝文件: bool FileOperation::copyFileToPath(QString sourceDir ,QString toD ...