Як зробити красиві повідомлення на jquery.

Відео: Створення PUSH повідомлень на сайті (без використання плагінів)

Всім привіт! Сьогодні ми поговоримо про те, як зробити спливаючі повідомлення на JQuery, використовуючи плагін Noty.

Щоб подивитися безліч прикладів, перейдіть за цим посиланням, пролістніте сторінку до заголовка Layouts Demos і понажимайте на кнопочки.

Ці повідомлення можуть з`являтися в різних місцях на сторінці та з різним оформленням, все це ви можете задати самі.

У верхній частині сторінки ви можете знайти кнопку Download, по якій можна скачати все необхідне.

Розглянемо використання. Скачайте файли і підключіть їх

створіть об`єкт noty, як зазначено нижче

Відео: Як зробити push повідомлення на сайті / push notification

var n = noty({text:`Noty - a jquery notification library!`}) -

У властивості text ви можете вказати текст, який буде показаний в повідомленні.

Також у цього плагіна досить багато опцій

$.noty.defaults ={ 
 layout:`Top`, 
 theme:`DefaultTheme`, 
 type:`Alert`, 
 text:``,// може бути html кодом або рядком 
 dismissQueue:true,// Якщо ви хочете використовувати функцію черги, встановіть значення true 
template:``, 
 animation:{ 
 open:{height:`Toggle`}, 
 close:{height:`Toggle`}, 
 easing:`Swing`, 
 speed:500// швидкість появи і зникнення повідомлення 
}, 
 timeout:false,// затримка перед закриттям повідомлення. Встановіть 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// масив кнопок 
} -

Цього вже більш, ніж достатньо, щоб успішно використовувати даний плагін. Детальніше ви можете почитати все на тому ж офіційному сайті за посиланням на початку статті.

А у мене на цьому все. Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі