jQuery响应式消息通知插件-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery响应式消息通知插件</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background: #f5f7fa;
padding: 20px;
min-height: 100vh;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
}

.demo-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 30px;
}

.notify-btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.notify-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.notify-btn.success {
background: #2ecc71;
color: white;
}

.notify-btn.error {
background: #e74c3c;
color: white;
}

.notify-btn.warning {
background: #f39c12;
color: white;
}

.notify-btn.info {
background: #3498db;
color: white;
}

.notify-btn.custom {
background: #9b59b6;
color: white;
}

/* 通知容器样式 */
.notification-container {
position: fixed;
top: 20px;
right: 20px;
width: 100%;
max-width: 350px;
z-index: 9999;
}

/* 通知项样式 */
.notification {
position: relative;
padding: 15px 20px;
margin-bottom: 15px;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
color: white;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
display: flex;
align-items: center;
}

.notification.show {
opacity: 1;
transform: translateX(0);
}

.notification.hide {
opacity: 0;
transform: translateX(100%);
}

.notification.success {
background: #2ecc71;
}

.notification.error {
background: #e74c3c;
}

.notification.warning {
background: #f39c12;
}

.notification.info {
background: #3498db;
}

.notification.custom {
background: #9b59b6;
}

.notification-icon {
margin-right: 15px;
font-size: 24px;
}

.notification-content {
flex: 1;
}

.notification-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 16px;
}

.notification-message {
font-size: 14px;
line-height: 1.4;
}

.notification-close {
margin-left: 15px;
cursor: pointer;
font-size: 18px;
opacity: 0.7;
transition: opacity 0.2s;
}

.notification-close:hover {
opacity: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
.notification-container {
max-width: 90%;
left: 5%;
right: 5%;
top: 10px;
}

.notification {
padding: 12px 15px;
}
}

.link-container {
text-align: center;
margin-top: 50px;
}

.more-link {
display: inline-block;
padding: 10px 20px;
background: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s;
}

.more-link:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery响应式消息通知插件</h1>

<div class="demo-controls">
<button class="notify-btn success" id="successBtn">成功通知</button>
<button class="notify-btn error" id="errorBtn">错误通知</button>
<button class="notify-btn warning" id="warningBtn">警告通知</button>
<button class="notify-btn info" id="infoBtn">信息通知</button>
<button class="notify-btn custom" id="customBtn">自定义通知</button>
</div>

<p style="text-align: center; margin-bottom: 20px;">点击上面的按钮测试不同类型的通知消息</p>

</div>


<div class="notification-container" id="notificationContainer"></div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
(function($) {
// 通知插件定义
$.fn.notify = function(options) {
// 默认设置
const settings = $.extend({
type: 'info',
title: '',
message: '',
duration: 5000,
icon: '',
closeButton: true,
onClose: null
}, options);

// 创建通知元素
const notification = $('<div class="notification ' + settings.type + '"></div>');

// 添加图标
if (settings.icon) {
notification.append('<div class="notification-icon">' + settings.icon + '</div>');
} else {
// 默认图标
let icon = '';
switch(settings.type) {
case 'success':
icon = '✓';
break;
case 'error':
icon = '✕';
break;
case 'warning':
icon = '⚠';
break;
case 'info':
icon = 'ℹ';
break;
default:
icon = '★';
}
notification.append('<div class="notification-icon">' + icon + '</div>');
}

// 添加内容
const content = $('<div class="notification-content"></div>');
if (settings.title) {
content.append('<div class="notification-title">' + settings.title + '</div>');
}
content.append('<div class="notification-message">' + settings.message + '</div>');
notification.append(content);

// 添加关闭按钮
if (settings.closeButton) {
notification.append('<div class="notification-close">×</div>');
}

// 添加到容器
$('#notificationContainer').append(notification);

// 显示通知
setTimeout(() => {
notification.addClass('show');
}, 100);

// 关闭通知函数
const closeNotification = function() {
notification.removeClass('show');
notification.addClass('hide');

setTimeout(() => {
notification.remove();
if (typeof settings.onClose === 'function') {
settings.onClose();
}
}, 300);
};

// 点击关闭按钮
notification.find('.notification-close').on('click', closeNotification);

// 自动关闭
if (settings.duration > 0) {
setTimeout(closeNotification, settings.duration);
}

// 返回通知元素以便进一步操作
return notification;
};
})(jQuery);

// 页面加载完成后初始化
$(document).ready(function() {
// 成功通知按钮
$('#successBtn').click(function() {
$.fn.notify({
type: 'success',
title: '操作成功',
message: '您的数据已成功保存到服务器。',
duration: 3000
});
});

// 错误通知按钮
$('#errorBtn').click(function() {
$.fn.notify({
type: 'error',
title: '发生错误',
message: '无法连接到服务器，请检查您的网络设置。',
duration: 4000
});
});

// 警告通知按钮
$('#warningBtn').click(function() {
$.fn.notify({
type: 'warning',
title: '警告',
message: '您的存储空间即将用完，请及时清理。',
duration: 5000
});
});

// 信息通知按钮
$('#infoBtn').click(function() {
$.fn.notify({
type: 'info',
title: '信息',
message: '系统将在今晚12点进行维护升级，请提前保存您的工作。',
duration: 6000
});
});

// 自定义通知按钮
$('#customBtn').click(function() {
$.fn.notify({
type: 'custom',
title: '自定义通知',
message: '这是一个完全自定义样式的通知消息，您可以自由配置。',
icon: '❤',
duration: 0, // 不会自动关闭
onClose: function() {
console.log('自定义通知已关闭');
}
});
});

// 页面加载时显示欢迎通知
setTimeout(() => {
$.fn.notify({
type: 'info',
title: '欢迎使用',
message: '这是一个jQuery响应式消息通知插件演示页面。',
duration: 4000
});
}, 1000);
});
</script>
</body>
</html>