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

时间:2016-09-10 23:06:03

标签: javascript jquery noty

我正在尝试使用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 个答案:

答案 0 :(得分:0)

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

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