Главная » Файлы » Прочие скрипты » jQuery

Простые функциональные уведомления через плагин Noty на jQuery для вашего сайта
[ Скачать с сервера (7.6 Kb) ] 24.06.14, 19:20:15



Для начала посмотрите ДЕМО

Замечательный плагин для вывода различных уведомлений на вашем сайте. Вся прелесть плагина в том, что он содержит кучу настроек, не требует подключения дополнительного css файла — все стили и настройки находятся в одном упакованном яваскрипт файле

Установка:

После < /head > на нужных страницах вставляйте:
Код
<script src="/js/jquery.noty.packaged.min.js"></script>

Вызываем уведомлялку следующим образом:
Код
<script>
noty({text:'Здесь любой ваш текст'});
</script>

Это я показал самый простой метод вызова без указания дом настроек. Ниже я привожу список доступных настроек плагина:
Код
layout: 'top', // Положение уведомлялки (top, topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, bottomRight, bottom)
theme: 'defaultTheme', // Тема по-умолчанию
type: 'alert', // Тип окна (alert, success, error, warning, information, confirm)
text: '', // Текст. Можно использовать html теги
dismissQueue: 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: false, // Через сколько закрывать окно. Значение 3000 закроет окно через 3 сек
force: false, // Добавлять ли новые уведомления НАД старыми
modal: false, // Модальное ли окно
maxVisible: 5, // Максимальное количество окон
killer: false, // Закрывать ли все старые уведомления при вызове нового
closeWith: ['click'], // При каком событии закрывать окна ['click', 'button', 'hover']
callback: { // События
onShow: function() {}, // До того, как окно появится
afterShow: function() {}, // После того, как окно появится
onClose: function() {}, // До закрытия окна
afterClose: function() {} // После закрытия окна
},
buttons: false // Массив из кнопок


Пример вызова окна с настройками:
Код
noty({
text:'Здесь любой ваш текст, который закроется через 3 сек',
timeout: 3000,
type:'success',
killer:true
});


Пример массива из кнопок:
Код
buttons: [
{addClass: 'btn btn-primary', text: 'Текст на кнопке', onClick: function($noty) {
$noty.close();
noty({text: 'Вы кликнули по первой кнопке', type: 'success'});
}
},
{addClass: 'btn btn-danger', text: 'Текст на второй кнопке', onClick: function($noty) {
$noty.close();
noty({text: 'Вы кликнули по второй кнопке', type: 'error'});
}
}
]

Скрипт из прикреплённого архива залейте в папку js

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: для, Простые, Функциональные, Уведомления, Вашего, JQuery, плагин, на, Через, Noty
Просмотров: 825 | Загрузок: 174 | Рейтинг: 1.0/1
Всего комментариев: 0
Имя *:
Email: