【问题标题】:How can I get a basic notification with Noty plugin?如何使用 Noty 插件获得基本通知?
【发布时间】: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!'
            });
    });
});

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

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

【问题讨论】:

    标签: javascript jquery noty


    【解决方案1】:

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

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

    【讨论】:

    • 这没有风格。但由于创建基本通知很难,我决定不使用 noty,我最终使用了notifyjs.com
    猜你喜欢
    • 2019-06-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-03
    • 2017-09-10
    • 1970-01-01
    • 2012-07-10
    相关资源
    最近更新 更多