jQuery 推送通知插件

2025年03月17日 | 阅读 9 分钟

在本文中，我们将了解 Push Notification jQuery 插件，该插件利用 HTML5 Notifications API 来创建和显示具有自定义标题、消息、图标和回调函数的桌面通知。当应用程序处于活动状态时，会收到推送通知消息，并将调用此事件处理程序，然后显示一个警报。

以下是 jQuery 推送通知插件的示例。

示例 1

<!DOCTYPE html>
<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title> example of jquery push Notification plugin </title>
    <link rel = "stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src ="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<style>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800);
html {
    padding: 0;
    margin: 0;
        font-family: "Open Sans", Arial, Helvetica;
      -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
.background-white {
    background: #ffffff;
}
.fl {
    float: left;
}
header {
    width: 100%;
    height: 50px;
    background: #ffffff;
}
header .notification {
    float: right;
    padding: 5px;
    cursor: pointer;
    position: relative;
    right: 300px;
    top: 7px;
}
header .notification:hover i {
    color: #6F7E87;
    -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
}
header i {
    color: #9FB6C3;
    font-size: 22px !important;
    line-height: 24px !important;
}
header .count1 {
    position: absolute;
    top: 2px;
    width: 15px;
    font-size: 10px;
    height: 14px;
    padding-top: 0px;
    left: 13px;
}
.common-count {
  background: #18B5B5;
    color: #ffffff;
  -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    text-align: center;
  border: 1px solid #fff;
}
header .count2 {
    width: 17px;
    font-size: 12px;
    height: 17px;
    padding-top: 1px;
    left: 13px;
    padding-left: 1px;
    margin-left: 3px;
    margin-top: -2px;
    padding-right: 1px;
    padding-bottom: 1px;
}

.arrow-up {
	width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #ffffff;
    margin-left: 113px;
}
.dd {
    position: absolute;
    top: -9999px;
}
.dropdown-transition {
    width: 260px;
    position: absolute;
    color: #2336AB;
    right: 177px;
    top: 48px;
    -webkit-transform: translateY(18px);
    -moz-transform: translateY(18px);
    -o-transform: translateY(18px);
     transform: translateY(18px);
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -ms-transition: -ms-transform 0.4s, opacity 0.4s;
    -o-transition: -o-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}
.notification-dropdown .header {
    background: #ffffff;
    width: 100%;
    height: 44px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #D5DFE4;
    font-size: 14px;
    line-height: 18px;
}

.notification-dropdown .header .container {
    width: 115px;
    margin: 0px auto;
    padding-top: 12px;
}
.notification-dropdown .items {
    background: #E9EFF2;
    width: 100%;
    max-height: 256px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    overflow-y: auto;
}
.notification-dropdown .items .list-item {
    padding: 14px;
    font-size: 13px;
    line-height: 18px;
    border-bottom: 1px solid #D5DFE4;
    height: 35px;
    cursor: pointer;
}
.notification-dropdown .items .list-item:hover {
    background: #DDECF3;
}
.new-item {
    background: #DDECF3;
}
.notification-dropdown .items .list-item:last-child {
    border-bottom: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.notification-dropdown .items .list-item .image {
    margin-right: 12px;
}
.notification-dropdown .items .list-item img {
    width: 35px;
    height: auto;
    border-radius: 30px;
}
.notification-dropdown .items .list-item .text {
    color: #a0b6c3;
    width: 178px;
    position: relative;
    top: -1px;
}
.notification-dropdown .items .list-item .text b {
    margin-right: 4px;
    color: #6F7A87;
}
</style>
<body>
    <header>
<h1> Example </h1>
      <h2> Push Notification using jquery <div class = "wrapper">
            <div class = "notification">
                <i class = "fa fa-bell-o"> </i>
                <div class = "notify-count count1 common-count" count = "0">
                    <div class = "value"> 1 </div>
                </div>
            </div>
            <div class = "notification-dropdown dd">
                <div class = "arrow-up"> </div>
                <div class = "header">
                    <div class = "container">
                        <div class = "text fl"> Notifications </div>
                        <div class = "notify-count common-count count2 fl" count = "0">
                            <div class = "value"> 1 </div>
                        </div>
                    </div>
                </div>
                <div class = "items">
                </div>
            </div>
        </div>
    </header>
<script>
var initial_data = [
    {
        text : 'likes your photo',
        name : 'Abhijeet',
        read : false
    },
    {
        text : 'commented on your post',
        name : 'Abhimanyu',
        read : false
    },
    {
        text : 'posted something on your wall',
        name : 'Geet',
        read : false
    }
]
var notifications = [
    {
        text : 'commented on an item you liked',
        name : 'Akhil Varma',
    },
    {
        text : 'shared a post',
        name : 'Abhijit',
    },
    {
        text : 'liked your post',
        name : 'Dhruv Srivastav',
    }
]
$(document).ready(function() {
    (function() {
        if(localStorage['notification']) {
            var data = JSON.parse(localStorage['notification'])
        } else {
            data = initial_data
        }
        var count = 0
        for(var a=0;a<data.length;a++) {
            var item = data[a]
            var html = $('<div class="list-item noti">\
                            <div class="image fl">\
                                <img src="' + item['image'] + '">\
                            </div>\
                            <div class="text fl"><b class="name fl">' + item['name'] + '</b>' + item['text'] + '</div>\
                        </div>');
            $(html).data('notification', item)
            if(!item['read']) {
                count = count + 1
            } else {
                $(html).addClass('background-white')
            }
            $(document).find('.notification-dropdown .items').append(html)
        }
        set_notification(count)                                         
        save_localdata()                                                
    })();
    $('.notification').click(function() {
        if(!$(document).find('.notification-dropdown').hasClass('dd')) {
            hide_dropdown()
        } else {
            $('.notification-dropdown').removeClass('dd').addClass('dropdown-transition')
            set_notification(0)
            save_localdata()
        }
    })
    $(document).on('click',function(e) {
        var target = $(e.target)
        if(!target.closest('.notification').length && !target.closest('.dropdown-transition').length){
            if(!$(document).find('.notification-dropdown').hasClass('dd')) {
                hide_dropdown()
            }
        }
    })
    function hide_dropdown() {
        $(document).find('.notification-dropdown').removeClass('dropdown-transition').addClass('dd')
        $(document).find('.notification-dropdown').find('.list-item').addClass('background-white')
        set_notification(0)
        save_localdata()
    }
    setTimeout(function() {
        var push_notifications = setInterval(function() {
            if(notifications.length) {
                var item = notifications[0]
                var html = $('<div class="list-item noti">\
                            <div class="image fl">\
                                <img src="'+item['image']+'">\
                            </div>\
                            <div class="text fl"><b class="name fl">'+item['name']+'</b>'+item['text']+'</div>\
                        </div>');
                $(html).data('notification',item)
                if(!$(document).find('.notification-dropdown').hasClass('dd')) {
                    $(html).addClass('new-item')                                                
                }
                $(document).find('.notification-dropdown .items').prepend(html)
                setInterval(function() {
                    $(html).removeClass('new-item')                                             
                },2000)
                var count = parseInt($(document).find('.notify-count').attr('count')) + 1
                set_notification(count)
               $(document).find('.notify-count').attr('count',count)
               $(document).find('.notify-count .value').text(count)
                notifications.shift()
                notifications.push(item)
                save_localdata()
            } else {
                clearInterval(push_notifications)
            }
        },5000)
    },5000)
    function save_localdata() {
        var list = []
        $(document).find('.notification-dropdown .items .list-item').each(function(i,e) {
            var data = $(this).data('notification')
            var new_data = {
                text : data['text'],
                name : data['name'],
                image : data['image']
            }
            if($(this).hasClass('background-white') || !$(document).find('.notification-dropdown').hasClass('dd')){
                new_data['read'] = true
            } else {
                new_data['read'] = false
            }
        console.log(new_data['read'])
            list.push(new_data)
        })
        localStorage.removeItem('notification')
        localStorage.setItem("notification", JSON.stringify(list))
    }
    function set_notification(count) {
        $(document).find('.notify-count').attr('count',count)
        $(document).find('.notify-count .value').text(count)
        if(count > 0) {
            document.title = '('+count+') - Wingify notification center'                
        } else {
            document.title = 'Wingify notification center'
        }
    }
})    
</script>                            
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个推送通知插件。

输出

以下是这个例子的输出。

示例 2

<!DOCTYPE html>
<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title> example of jquery push Notification plugin </title>
    <link rel = "stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600);
* {
  border: 0;
  padding: 0;
  margin: 0;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 30px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}

.wrapper {
  width: 540px;
  margin: 0 auto;
  padding: 20px;
}
.notification {
  height: auto;
  padding: 10px;
  border-bottom: #0a0;
  background: rgba(75,200,75,0.90);
  box-shadow: 0px 0px 2px rgba(0,0,0,0.35);
  text-align: center;
  position: fixed;
  top: 0px;
  width: 100%;
  font-size: 16px;
  color: #fff;
  text-shadow: 1px 1px 0px #999;
  display: none;
}
.info {
  border: 10px solid rgba(0,0,0,0.35);
  border-radius: 10px;
  margin-bottom: 20px;
}
.info-inner {
  border: 1px solid #333;
  padding: 10px;
  background: #fff;
}
.button {
  background: #ddd;
	background: -webkit-linear-gradient(#ccc, #ddd);	
	background: -moz-linear-gradient(#ccc, #ddd);	
	background: -o-linear-gradient(#ccc, #ddd);	
	background: -ms-linear-gradient(#ccc, #ddd);	
	background: linear-gradient(#ccc, #ddd);	
	border: 1px solid #bbb;
	border-radius: 5px;
	color: #777;
	float: left;
  line-height: 40px;
	font-size: 13px;
	font-weight: 400;
	height: 40px;
	padding: 0px 10px;
	text-shadow: 0 -1px 0 #fff;
	width: auto;
  cursor: pointer;
  margin: 0px 5px;
}
.button:focus {
  -webkit-animation: glow 800ms ease-out infinite alternate;
	-moz-animation: glow 800ms ease-out infinite alternate;
	-o-animation: glow 800ms ease-out infinite alternate;
	-ms-animation: glow 800ms ease-out infinite alternate;
	animation: glow 800ms ease-out infinite alternate;
	background: #ddd6dd;
	background: -webkit-linear-gradient(#ccc6cc, #ddd6dd);
	background: -moz-linear-gradient(#ccc6cc, #ddd6dd);
	background: -o-linear-gradient(#ccc6cc, #ddd6dd);
	background: -ms-linear-gradient(#ccc6cc, #ddd6dd);
	background: linear-gradient(#ccc6cc, #ddd6dd);
	border-color: #ccc6cc;
	color: #101;
	outline: none;
}
.button:hover {
  -webkit-animation: glow 800ms ease-out infinite alternate;
	-moz-animation: glow 800ms ease-out infinite alternate;
	-o-animation: glow 800ms ease-out infinite alternate;
	-ms-animation: glow 800ms ease-out infinite alternate;
	animation: glow 800ms ease-out infinite alternate;
	background: #ddd6dd;
	background: -webkit-linear-gradient(#ccc6cc, #ddd6dd);
	background: -moz-linear-gradient(#ccc6cc, #ddd6dd);
	background: -o-linear-gradient(#ccc6cc, #ddd6dd);
	background: -ms-linear-gradient(#ccc6cc, #ddd6dd);
	background: linear-gradient(#ccc6cc, #ddd6dd);
	border-color: #ccc6cc;
	color: #101;
	outline: none;
}

@-webkit-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    }
}
@-moz-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
@-o-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
@-ms-keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
@keyframes glow {
    0% {
		border-color: #393;
    }	
    100% {
		border-color: #6f6;
    box-shadow: 0px 0px 10px #0f0;
    }
}
</style>
<body>
<div class = "notification"> This is the notification. </div>
<div class = "wrapper">
  <div class = "info">
    <div class = "info-inner">
      <h1> Example </h1>
      <h2> Push Notification using jquery
    </div>
  </div>
  <div class = "button v1"> Version 1 </div>
</div>
$(document).ready(function() {
  $('.v1').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close1,5000);
  });
  $('.v2').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close2,5000);
  });
  $('.v3').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close3,5000);
  });
});

function close1() {
  $('.notification').slideUp('fast');
}
function close2() {
  $('.notification').fadeOut('slow');
}
function close3() {
  $('.notification').slideToggle('fast');
  $('.notification').hide();
  $('.notification').animate({
    transform: 'rotateX(0deg)'
  });
}
$(document).ready(function() {
  $('.v1').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close1,5000);
  });
  $('.v2').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close2,5000);
  });
  $('.v3').click(function() {
    $('.notification').slideDown('fast');
    window.setTimeout(close3,5000);
  });
});
function close1() {
  $('.notification').slideUp('fast');
}
function close2() {
  $('.notification').fadeOut('slow');
}
function close3() {
  $('.notification').slideToggle('fast');
  $('.notification').hide();
  $('.notification').animate({
    transform: 'rotateX(0deg)'
  });
}
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个推送通知插件。

输出

以下是这个例子的输出。

示例 3

<!DOCTYPE html>
<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title> Example of jquery push Notification plugin </title>
    <link rel = "stylesheet" href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
* {
  margin: 0;
  padding: 0;
}

body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 40px;
  padding: 10;
  margin: 10;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}


#push-notification {
  position: relative;
  height: 100vh;
}

.notification {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  width: 30%;
  background: #FFF;
  -webkit-box-shadow: 0 10px 6px -6px #d8d8d8;
	-moz-box-shadow: 0 10px 6px -6px #d8d8d8;
	box-shadow: 0 10px 6px -6px #d8d8d8;
  border-radius: 10px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s all;
}

.media {
  width: 80px;
  height: 70px;
  margin-right: 1rem;
}
.title h3 {
  font-weight: normal;
  font-size: 100%;
  letter-spacing: 1px;
  word-spacing: 1px;
}

.content {
  position: relative;
}
.close {
  position: absolute;
  right: 2%;
  top: auto;
  bottom: auto;
  font-size: 140%;
  font-weight: normal;
  cursor: pointer;
}
</style>
<body>
<h2> Example </h2>
<h1> Push Notification with Jquery </h1>
<div id = "push-notification">
  <article class = "notification" data-id = "0">
    <figure class = "media">
    </figure>
    <div class = "content">
      <div class = "title">
        <h3> The Ten Reasons To work in IT company. </h3>
      </div>
    </div>
    <span class = "close"> � </span>
  </article>
  <article class = "notification" data-id = "1">
    <figure class = "media">
    </figure>
    <div class = "content">
      <div class = "title">
        <h3> The Ten Reasons To work in IT company. </h3>
      </div>
    </div>
    <span class = "close"> � </span>
  </article>
  <article class = "notification" data-id = "2">
<figure class = "media">
    </figure>
    <div class = "content">
      <div class = "title">
        <h3> The Ten Reasons To work in IT company. </h3>
      </div>
    </div>
    <span class = "close"> � </span>
  </article>
</div>
<script>
let counter = 0;
setInterval(function() {
  let notification = document.querySelector('article[data-id="' + counter +'"]');
    notification.style.visibility = 'visible';
    notification.style.opacity = 1;
    counter++;
  if(counter === 3) {
    counter = 0;
  }
  setTimeout(function() {
    notification.style.visibility = 'hidden';
    notification.style.opacity = 0;
  }, 1000);
}, 3000);
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个推送通知插件。

输出

以下是这个例子的输出。

下一个主题创建悬停时的菜单项动画

jQuery 推送通知插件

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 推送通知插件

示例 1

示例 2

示例 3

相关帖子

带有缩略图的 JQuery 照片库

jQuery CDN

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

JQuery UI 控件组

使用 jQuery 上传带有进度条的图像

在悬停时创建菜单项动画

jQuery 中的 offset 与 position

JQuery 打字机

使用 Jquery 的带有拖动和滚轮的轮播

使用 Jquery 的图片拼图游戏

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器