jQWidgets jqxNotification 完整参考

简介

jQWidgets jqxNotification 是一款基于 jQuery 和 jQWidgets 框架的弹出通知插件。它能够以多种方式展示消息，包括顶部、底部、左侧、右侧和中间等，以及提供了各种提示、警告和错误类型的消息样式。

特性

• 可以在多个位置展示弹出消息，包括顶部、底部、左侧、右侧和中间等
• 支持多种消息样式和类型，包括提示、警告和错误等
• 支持自定义消息文本、标题、图标和按钮等
• 支持显示多个消息以及消息队列管理
• 支持自定义动画效果和持续时间等
• 可以通过API动态地创建、修改和删除消息

用法

引入依赖

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

<!-- 引入 jQWidgets -->
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<!-- 引入 jQWidgets jqxNotification -->
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.notification.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqxnotification.js"></script>

创建消息

// 创建一个简单的提示消息
$('#notification').jqxNotification({ 
    width: 'auto', 
    position: 'top-right', 
    opacity: 0.9, 
    autoClose: false, 
    animationOpenDelay: 800, 
    autoCloseDelay: 3000, 
    template: 'info'
});
$('#notification').jqxNotification('open', 'This is a simple notification message.');

// 创建一个带标题和图标的消息
$('#notification').jqxNotification({ 
    width: 'auto', 
    position: 'bottom-right', 
    opacity: 0.9, 
    autoClose: false, 
    animationOpenDelay: 800, 
    autoCloseDelay: 5000, 
    template: 'warning', 
    closeOnClick: true,
    icon: 'https://jqwidgets.com/public/jqwidgets/styles/images/icon.png',
    title: 'Attention!'
});
$('#notification').jqxNotification('open', 'You have a new message.');

创建消息队列

// 创建一个消息队列
$('#notification').jqxNotification({ 
    width: 'auto', 
    position: 'top-right', 
    opacity: 0.9, 
    autoClose: false, 
    animationOpenDelay: 800, 
    autoCloseDelay: 5000,
    appendContainer: '.jqx-notification-queue', 
    template: 'success',

    // 回调函数，用于自定义消息内容
    initContent: function (message) {
        var source = '<div class="jqx-notification-content-success">'
                   + message
                   + '</div>';
        return source;
    }
});

// 打开多个消息
$('#notification').jqxNotification('open', 'First message.');
$('#notification').jqxNotification('open', 'Second message.');
$('#notification').jqxNotification('open', 'Third message.');

API 参考

属性

• width：消息的宽度，默认是 auto
• height：消息的高度，默认是 auto
• position：消息出现的位置，可以是 'top-left'、'top-right'、'bottom-left'、'bottom-right'、'center' 等，默认是 'top-right'
• opacity：消息的透明度，默认是 0.9
• autoClose：是否自动关闭消息，默认是 false
• animationOpenDelay：显示消息的动画延迟时间，默认是 800（以毫秒为单位）
• autoCloseDelay：消息自动关闭的延迟时间，默认是 3000（以毫秒为单位）
• template：消息的类型（样式），可以是 'info'、'warning'、'error'、'success' 等，默认是 'info'
• closeOnClick：点击消息是否自动关闭，默认是 false
• icon：消息的图标地址，默认为空
• title：消息的标题，默认为空
• appendContainer：消息队列的容器选择器，默认为空

方法

• open(message, title)：打开消息，message 是消息内容，title 是消息标题
• closeAll()：关闭所有消息

总结

jQWidgets jqxNotification 是一款强大的弹出通知插件，可以根据需求自定义消息样式、位置和内容等。它简单易用，支持多种类型的消息，而且还可以创建消息队列，让您的页面更具交互性。