PNotify - Настроюваний плагін сповіщень
Для деяких з нас, хто постійно зайнятий, повідомлення залишають нас на вершині кожної важливої події, новини та інформації. Це зменшує час очікування, допомагаючи нам оновлювати нас останніми подіями, і не дивно, що ми отримуємо сповіщення про стільниці та мобільні телефони.
Якщо ви хочете створити сповіщення для свого сайту, ви можете легко створити його за допомогою цього плагіна під назвою PNotify. Це безкоштовний і відкритий джерело JavaScript плагін з великою кількістю опцій, і він простий у використанні. З PNotify, ви можете навіть показати до 1000 сповіщень відразу (див. Цей тест тестування, щоб спробувати його). Як це здорово?
Навіщо використовувати PNotify?
PNotify, раніше відомий як Pines Notify, містить три основні типи сповіщень: інформація, повідомлення і помилка. Він має безліч функцій, ефектів, тем і стилів. Ви можете вибрати різні стилі з Bootstrap, jQuery UI, Font Awesome або скористатися власним стилем. Є також близько 18 готових тем (зроблених з Bootswatch), які ви можете вибрати, і є навіть ефекти переходу.
Велика річ про PNotify це не просто дивовижні графічні функції, але він також збагачений потужними і багатими API (або модулів). Ці API включають сповіщення на робочому столі (на основі стандарту веб-сповіщень Проект), підтримку динамічного оновлення, зворотні виклики для різних подій, перегляд історії, щоб побачити попередні сповіщення та підтримку HTML у заголовку та тілі.
PNotify забезпечує ненав'язливе повідомлення це означає, що ви можете натиснути будь-який елемент за повідомленням, не відкидаючи його. Ви також можете визначити, де з'являється повідомлення з функціями Stacks, що дозволяє розміщувати повідомлення повсюдно: як верхній / нижній стиль панелі або навіть як підказку.
Базове використання
Джерела PNotify приходять у налаштовувані модулі комплекту і доступні тут.
Починаємо
Після отримання джерел включіть їх у свій HTML-код так:
PNotify дуже проста у використанні. Ось просте сповіщення:
$ (function () new PNotify (title: 'Просте сповіщення', текст: 'Ей, я просте повідомлення.'););
І це результат:
В основному для створення сповіщення ви ініціюєте нову функцію PNotify. Заголовок, текст, стиль та інші параметри можуть бути передані всередині функції. Якщо ви не вкажете тип сповіщення, він буде використовувати тип за замовчуванням, який є a повідомлення. Є приблизно 20 + конфігуруються параметри ви можете пройти. Щоб переглянути список зі значенням за замовчуванням, натисніть тут.
Стиль
Щоб змінити стиль, можна передавати стиль у сповіщенні та визначити потрібний стиль. Доступні стилі bootstrap2, bootstrap3, jqueryui і fontawesome. Не забудьте включати пов'язані джерела стилів у вашому проекті.
Наприклад, якщо я хочу змінити попередній стиль сповіщення на тему інтерфейсу jQuery, я використовую такий фрагмент:
new PNotify (title: "Стиль JQuery UI", текст: "Гей, я стилізований з темою jQuery UI.", стиль: "jqueryui");
Існує ще один спосіб налаштування вашого повідомлення: через цей код:
PNotify.prototype.options.styling = "jqueryui";
Змінити jqueryui з потрібним стилем, а потім поставте цей рядок перед сповіщенням так:
PNotify.prototype.options.styling = "jqueryui"; new PNotify (title: "Стиль jQuery UI", текст: "Гей, я стилізований з темою jQuery UI.");
Ось ваш результат:
Додавання модулів
Модулі - це багатофункціональні API, які надають передові функції оповіщення. Існує 7 модулів в PNotify: робочий стіл, кнопки, NonBlock, підтвердження, історія, зворотний виклик і довідковий модуль. Модулі можуть бути використані шляхом передачі відповідних варіантів у сповіщення.
Нижче наведено коди, які показують, як використовувати модуль робочого столу:
PNotify.desktop.permission (); new PNotify (title: 'Повідомлення на робочому столі', текст: 'Я оповіщення на робочому столі. Ви повинні дати мені дозвіл, щоб я міг виглядати як те, що я. Якщо ні, то я стану регулярним повідомленням. ', робочий стіл: desktop: true, icon: null);
PNotify.desktop.permission (); використовується для забезпечення користувачів отримали дозвіл щоб сайт показував сповіщення. Якщо користувачі забороняють сайт, сповіщення буде як звичайне повідомлення замість цього.
Як бачите, є додатковий варіант додавання робочого столу до коду. The desktop: true дозволить сповіщення для робочого столу; якщо ви встановите значення "Неправда", сповіщення буде регулярним.
Ви також можете використовувати спеціальну піктограму через значок опції. Заповніть його URL-адресою піктограми; його можна встановити помилковий , щоб вимкнути піктограму. Якщо ви встановили його нуль, буде використано піктограму за умовчанням.
Щоб побачити інші реалізації модуля з їхніми варіантами, перейдіть за цим посиланням.
Ви можете продовжити реалізацію, перейшовши на його офіційний сайт. Там ви можете побачити деякі додаткові використання разом з демонстраціями. Крім того, можна отримати додаткову інформацію на сторінці GitHub.
