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