Как я могу получить базовое уведомление с плагином Noty?

Question

Я пытаюсь использовать плагин Noty для создания уведомлений в моем приложении.

К сожалению, документация более полна, что я могу понять. поэтому мне не удается сгенерировать простое предупреждение, которое появляется в верхнем правом углу экрана.

Вот что я сделал.

Сначала я включил следующие два файла

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!'
            });
    });
});

Когда я нажимаю кнопку тестирования, я ничего не получаю на экране и никаких ошибок в консоли.

Что я здесь не так делаю? Как я могу создать простое уведомление, которое появляется в верхнем правом углу?

Answer 1

Ваш template установка в $.noty.defaults пусто Попробуйте поставить один:

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