如何使用 Noty 插件获得基本通知？

Posted 2023-05-08

【中文标题】如何使用 Noty 插件获得基本通知？

【英文标题】：How can I get a basic notification with Noty plugin?

【发布时间】：2017-01-18 18:32:49

【问题描述】：

我正在尝试使用Noty plugin 在我的应用程序中创建通知。

不幸的是，我可以理解的文档更复杂。所以我无法生成出现在屏幕右上角的简单警报。

这是我所做的。

首先，我包含了以下两个文件

noty/js/noty/jquery-noty.js
noty/js/noty/layouts/topRight.js

我添加了这样的默认配置

$(function()

    $.noty.defaults = 
        layout: 'topRight',
        theme: 'defaultTheme',
        type: 'alert',
        text: '',
        dismissQueue: true, // If you want to use queue feature set this true
        template: '',
        animation: 
            open:  height: 'toggle' ,
            close:  height: 'toggle' ,
            easing: 'swing',
            speed: 500 // opening & closing animation speed
        ,
        timeout: true, // delay for closing event. Set false for sticky notifications
        force: false, // adds notification to the beginning of queue when set to true
        modal: false,
        maxVisible: 5, // you can set max visible notification for dismissQueue true option
        closeWith: ['click'], // ['click', 'button', 'hover']
        callback: 
            onShow: function ()  ,
            afterShow: function ()  ,
            onClose: function ()  ,
            afterClose: function ()  
        ,
        buttons: false // an array of buttons
    ;

);

然后我添加了一个点击事件来触发这样的通知

$(function()

    $('#test').click(function()
            noty(
                text: 'Simple Test!'
            );
    );
);

当我单击测试按钮时，屏幕上什么也没有，控制台中也没有错误。

我在这里做错了什么？如何创建显示在右上角的简单通知？

【参考方案1】：

$.noty.defaults 中的 template 设置为空白。尝试提供一个：

template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',

【讨论】：

这没有风格。但由于创建基本通知很难，我决定不使用 noty，我最终使用了notifyjs.com