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