Создание оповещений на странице при помощи библиотеки Noty.js V3

Простая, но очень мощная, быстрая и производительная библиотека для создания пользовательских уведомлений для вашего сайта или приложения.

Noty.js V3

Noty.js - это javascript библиотека, с помощью которой можно легко создать различные пользовательские оповещения (уведомления) типа: alert, success, error, warning, information, Количество отображаемых сообщений на странице можно регулировать, абсолютно каждое сообщение можно настроить.

Установка

Данная библиотека не зависит от jQuery, с версии V3 переписана на нативном JS. Достаточно подключить в проект файлы стилей и скриптов. Если предполагается использование анимаций (библиотека работает с другими библиотеками как: animate.css, bounce.js и др.), то соответствующие библиотеки необходимо тоже подключить.

Сайт библиотеки здесь .

Подключаем файлы библиотеки из директории lib (я сразу подключу и animate.css):

<link href="lib/noty.css" rel="stylesheet">
<!-- Подключаем нужную тему -->
<link href="lib/themes/metroui.css" rel="stylesheet">
<link href="lib/animate.css" rel="stylesheet">
<script src="lib/noty.js" type="text/javascript"></script>

Примеры использования

// Способ #1
var notify = new Noty();
notify.show();
notify.setType('error');
notify.setText('Выводит анимированные уведомления. Возможность настройки множества параметров выводимых уведомлений');
notify.setTimeout(1000);

// Способ #2
function generate(text, type, layout) {
  new Noty({
    text        : text,
    type        : type,
    dismissQueue: true,
    layout      : layout,
    theme       : 'metroui'
  }).show();
}

generate('Some notification text', 'info', 'topRight');

// Способ #3
new Noty({
  type: 'alert',
  layout: 'topRight',
  theme: 'metroui',
  timeout: 1000, 
  text: 'Выводит анимированные уведомления. Возможность настройки множества параметров выводимых уведомлений',
  animation: {
    open: 'animated bounceInRight', // Animate.css class names
    close: 'animated bounceOutRight' // Animate.css class names
  }
}).show();

Настройки по умолчанию

layout: 'top', //позиция сообщения
theme: 'defaultTheme', // стиль сообщения
type: 'alert', //тип сообщения
text: '', // текст сообщения может быть html кодом или строкой
dismissQueue: true, // Если вы хотите использовать функцию очереди, установите значение true
// шаблон сообщения
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
animation: { // анимация
  open: {height: 'toggle'},
  close: {height: 'toggle'},
  easing: 'swing',
  speed: 500 // скорость появления и исчезновения уведомления
},
timeout: 1000, // задержка перед закрытием уведомления (1000 мсекунд = 1 сек). Установите false для липких уведомлений
force: false, // добавляет уведомление в начало очереди, если установлено true
modal: false, // создает эффект модального окна, затемняет фон страницы
maxVisible: 5, // вы можете установить максимальную видимость уведомления для удаления из очереди
killer: false, // для закрытия всех уведомлений до показа
closeWith: ['click'], // ['click', 'button', 'hover'] способ закрытия сообщения
callback: { // обратные функции
  onShow: function() {}, // срабатывает перед показом сообщения
  afterShow: function() {}, // после показа
  onClose: function() {}, // перед закрытием
  afterClose: function() {} // после закрытия
},
buttons: false // // добавляет кнопки в сообщение и к каждой кнопке можно добавить свою функцию