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

时间：2022-02-11 00:43:44

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

以下就是使用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、效果图

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

3、源码附件

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

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

  1. 用 ASP&period;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&period;NET MVC 实现基于 XMLHttpRequest long polling（长轮询） 的 Comet（转）

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

  3. 消息提示demo

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

  4. 基于jquery&comma;php实现AJAX长轮询&lpar;LongPoll&rpar;，类似推送机制

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

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

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

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

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

  7. Android学习系列&lpar;7&rpar;--App轮询服务器消息

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

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

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

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

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

随机推荐

  1. hash简单介绍

    hash也称"散列", 是一种基于映射关系的存储方式,将任意长度的二进制值输出为固定长度的较小的二进制值,这种输出的小的固定长度的值为hash值: 1. 散列技术是在关键字key与 ...

  2. CSS样式display&colon;none和visibility&colon;hidden的区别

    同样是隐藏,display:none与visibility:hidden有什么区别呢? 虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上, ...

  3. JavaWEB开发国际化

    1.国际化开发概述 )软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. )国际化又称为 i18n:inter ...

  4. &lbrack;动态规划&rsqb;P1378 油滴扩展

    题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放置下一个油滴. ...

  5. php简单实现发微博动态

    首先,肯定是注册成为开发者新浪微博开放平台 选择网站应用,填写一些基本信息 填完后在'我的应用'中,会看到刚创建的应用信息,我们只是简单的测试一下,所以其他复杂的注册信息都不用填写,有这些就够了 很重 ...

  6. 实验四Java Android简易开发

    实验准备 Android Studio下载 Android Studio安装 实验内容 Android Stuidio的安装测试 Android Stuidio的安装测试: 参考<Java和An ...

  7. SQLServer之修改数据库架构

    修改数据库架构注意事项 用户与架构完全分离. ALTER SCHEMA 仅可用于在同一数据库中的架构之间移动安全对象. 若要更改或删除架构中的安全对象,请使用特定于该安全对象的 ALTER 或 DRO ...

  8. PowerShell执行脚本时&OpenCurlyDoubleQuote;系统上禁止运行脚本”问题解决

    PowerShell执行脚本策略错误 错误信息:PowerShell运行脚本错误--"系统上禁止运行脚本" 原因:默认执行策略为Restricted 解决:执行Set-Execut ...

  9. Homework：奇偶性

    // 程序功能: // 要求用户从键盘输入一个整数,判断其是奇数还是偶数 #include <stdio.h> int main() { int x; printf("输入一个整 ...

  10. Python-lambda表达式和推导式

    lambda表达式和推导式,可实现使用一行语句完成功能开发的效果,减少代码量. 1.lambda表达式 匿名函数,即没有名字的函数 1.1基本语法: lambda argument_list: exp ...

相关文章