Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Простые и функциональные уведомления на плагине Noty
Простые и функциональные уведомления на плагине Noty
AndreyДата: Понедельник, 06.01.2014, 15:00:32 | Сообщение # 1
Технарь
Offline
3

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

Смотрим Демо

Начнём, сначала подключим сам JS между <body> и </body> Прописываем:
Код
<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"

Вот и всё, думаю по примерам выше вы сможете настройть уведомления под себя

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Простые и функциональные уведомления на плагине Noty
Страница 1 из 11
Поиск: