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

最新推荐文章于 2024-05-14 09:37:10 发布

.NET跨平台

最新推荐文章于 2024-05-14 09:37:10 发布

阅读量487

点赞数

分类专栏： Html+Javascript

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

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

以下就是使用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、效果图
在这里插入图片描述

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于PNotify.js的消息提示Demo（轮询）

需求：有些任务需要定时更新，获取最新的消息，这样就需要定时轮询，再者需要一种友好的提示。以下就是使用PNotify插件的消息提示：1、HTML代码<!DOCTYPE html><html> <head> <title>Demo</title> <meta charset="UTF-8...
复制链接

扫一扫

专栏目录