noty це jQuery плагін, за допомогою якого можна легко створити різні оповіщення типу: alert, success, error, warning, information, confirmation (повідомлення з підтвердженням), в місце стандартного діалогового вікна браузера. Кількість відображуваних повідомлення на сторінці можна регулювати, например не більше 5 повідомлень, і тоді не відобразилися повідомлення будуть додані в чергу.
Для повідомлень передбачені наступні позиції:
API плагіна надає безліч інших параметрів, таких як настройки тексту, анімації, швидкості, кнопок і багато іншого.
Для роботи плагіна потрібно його підключити, думаю якщо ви на цьому сайті то вже знаєте як підключати скрипти =). До відома, плагін працює з версією jQuery від 1.6+.
створення об'єкта
В плагіні реалізовано просте створення повідомлень. Досить просто використовувати наступний код:
function generate # 40; layout # 41; # 123;
var n = noty # 40; # 123;
text. layout.
type. 'Alert'.
dismissQueue. true.
layout. layout.
theme. 'DefaultTheme'
# 125; # 41; ;
# 125;
function generateAll # 40; # 41; # 123;
generate # 40; 'Top' # 41; ;
generate # 40; 'TopCenter' # 41; ;
generate # 40; 'TopLeft' # 41; ;
generate # 40; 'TopRight' # 41; ;
generate # 40; 'Center' # 41; ;
generate # 40; 'CenterLeft' # 41; ;
generate # 40; 'CenterRight' # 41; ;
generate # 40; 'Bottom' # 41; ;
generate # 40; 'BottomCenter' # 41; ;
generate # 40; 'BottomLeft' # 41; ;
generate # 40; 'BottomRight' # 41; ;
# 125;
$ # 40; document # 41 ;. ready # 40; function # 40; # 41; # 123;
generateAll # 40; # 41; ;
# 125; # 41; ;
Думаю тут зрозуміло як все працює, але про всяк випадок коротко опишу.
Спочатку створює функцію з об'єктом плагіна і купою властивостей, значення text дорівнюватиме назвою виведеної позиції, тобто значенням отриманої з функції generateAll (). тип повідомлення буде alert. інші опції розглянемо пізніше. В кінці викликаємо функцію generateAll () яка викликає по черзі функцію з плагіном.
Не обов'язково використовувати саме такий виклик плагіна, це тільки приклад.
Нижче представлений повний список налаштувань використовуваних за замовчуванням:
$. noty. defaults = # 123;
layout. 'Top'. // позиція повідомлення
theme. 'DefaultTheme'. // стиль повідомлення
type. 'Alert'. // тип повідомлення. позиції і типи повідомлень перераховані на початку поста
text. ''. // Текст повідомлення
dismissQueue. true. // якщо включено то повідомлення будуть з'являтися в порядку виклику, тобто шикуватися в чергу
template. '
animation. # 123; // анімація
open. # 123; height. 'Toggle' # 125 ;.
close. # 123; height. 'Toggle' # 125 ;.
easing. 'Swing'.
speed. 500 // швидкість відкриття і закриття повідомлення
# 125 ;.
timeout. false. // затримка перед закриттям повідомлення
force. false. // додає повідомлення про додавання в чергу
modal. false. // створює ефект модального вікна, затемнює фон сторінки
maxVisible. 5. // максимальна кількість відображуваних повідомлень на екрані, якщо викликано більше то вони будуть додані в чергу
killer. false. // якщо включено то закриває всі відкриті повідомлення крім себе
closeWith. # 91; 'Click' # 93 ;. // [ 'click', 'button', 'hover'] спосіб закриття повідомлення
callback. # 123; // зворотні функції
onShow. function # 40; # 41; # 123; # 125 ;. // спрацьовує перед показом повідомлення
afterShow. function # 40; # 41; # 123; # 125 ;. // після показу
onClose. function # 40; # 41; # 123; # 125 ;. // перед закриттям
afterClose. function # 40; # 41; # 123; # 125; // після закриття
# 125 ;.
buttons. false // додає кнопки в повідомлення і до кожної кнопки можна додати свою функцію!
# 125; ;
Призначений для користувача контейнер
За допомогою цього коду можна виводити повідомлення в будь-якому контейнері на сторінці.