Создание оповещений на странице при помощи библиотеки 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 // // добавляет кнопки в сообщение и к каждой кнопке можно добавить свою функцию