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

Question

Я пытаюсь использовать 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!' 
      }); 
    }); 
}); 

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

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

Answer 1

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

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