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

<!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>

type类型：

success

notice

error

info

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

转载地址：https://www.cnblogs.com/reader/p/6223862.html

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

相关推荐