PNotify - Wtyczka powiadomień o wysokim stopniu dostosowania do potrzeb użytkownika
Dla niektórych z nas, którzy są ciągle zajęci, powiadomienia utrzymują nas na szczycie każdego ważnego wydarzenia, newsbitu i informacji. Zmniejsza to czas oczekiwania, jednocześnie udoskonalając nas o najnowsze wydarzenia, i nic dziwnego, że otrzymujemy powiadomienia zarówno na komputerach stacjonarnych, jak i mobilnych.
Jeśli jednak chcesz utworzyć powiadomienie dla swojej witryny, możesz je łatwo utworzyć za pomocą tej wtyczki o nazwie PNotify. Jest to bezpłatna i otwarta wtyczka javascript z wieloma opcjami i jest łatwa w użyciu. Dzięki PNotify możesz nawet wyświetlić do 1000 powiadomień jednocześnie (zobacz ten test porównawczy, aby go wypróbować). Jakie to jest świetne?
Dlaczego warto użyć PNotify?
PNotify, wcześniej znany jako Pines Notify, zawiera trzy główne typy powiadomień: informacje, ogłoszenie i błąd. Ma wiele funkcji, efektów, motywów i stylów. Możesz wybrać różne style z Bootstrap, jQuery UI, Font Awesome lub wybrać własny styl. Istnieje również około 18 gotowych motywów (wykonanych za pomocą Bootswatch), z których możesz wybierać i są nawet efekty przejścia.
Wspaniałą rzeczą w PNotify jest to, że ma nie tylko niesamowite funkcje graficzne, ale także jest wzbogacony o potężne i bogate API (lub moduły). Te interfejsy API obejmują powiadomienia na pulpicie (oparte na standardzie Draft Web Notifications), obsługę aktualizacji dynamicznych, wywołania zwrotne dla różnych zdarzeń, przeglądarkę historii, aby zobaczyć poprzednie powiadomienia i obsługę HTML w tytule i treści.
PNotify zapewnia dyskretne powiadomienie co oznacza, że możesz kliknąć dowolny element za powiadomieniem bez odrzucania go. Możesz również określić, gdzie pojawia się powiadomienie z funkcjami stosów, co pozwala na umieszczenie ogłoszenia wszędzie: jako styl paska górnego / dolnego lub nawet jako podpowiedź.
Podstawowe użycie
Źródła PNotify są dostępne w konfigurowalnych modułach pakietów i są dostępne tutaj.
Rozpoczęcie pracy
Po znalezieniu źródeł dołącz je do swojego kodu HTML w następujący sposób:
PNotify jest bardzo łatwy w użyciu. Oto proste powiadomienie:
$ (function () new PNotify (title: 'Simple Notification', tekst: 'Hej, jestem prostym powiadomieniem.'););
Oto rezultat:
Zasadniczo, aby utworzyć powiadomienie, inicjujesz nową funkcję PNotify. Tytuł, tekst, styl i inne opcje można następnie przekazać do funkcji. Jeśli nie określisz typu powiadomienia, użyje on domyślnego typu a ogłoszenie. Istnieje około 20+ konfigurowalnych opcji możesz przejść. Aby zobaczyć listę z jej domyślną wartością, kliknij tutaj.
Stylizacja
Aby zmienić styl, możesz przekazać stylizacja opcja w powiadomieniu i określ pożądany styl. Dostępne są style bootstrap2, bootstrap3, jqueryui i fontawesome. Nie zapomnij o zawierać powiązane źródła stylu w ramach twojego projektu.
Jeśli na przykład chcę zmienić poprzedni styl powiadomienia na temat interfejsu użytkownika jQuery, używam następującego fragmentu kodu:
new PNotify (title: "jQuery UI Style", tekst: "Hej, jestem stylizowany motywem jQuery UI.", stylizacja: "jqueryui");
Istnieje inny sposób na stylizację powiadomień za pomocą tego kodu:
PNotify.prototype.options.styling = "jqueryui";
Zmiana jqueryui z wybranym stylem, a następnie umieść ten wiersz przed powiadomieniem, tak
PNotify.prototype.options.styling = "jqueryui"; new PNotify (title: "jQuery UI Style", tekst: "Hej, jestem stylizowany motywem jQuery UI.");
Oto twój wynik, stylizowany:
Dodawanie modułów
Moduły są bogatymi interfejsami API, które umożliwiają zaawansowane funkcje powiadomień. Tam są 7 modułów w PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callback and Reference Module. Moduły można wykorzystać, przekazując odpowiednie opcje do powiadomienia.
Jako przykład poniżej podano kody pokazujące, jak korzystać z modułu Desktop:
PNotify.desktop.permission (); new PNotify (title: 'Desktop Notification', tekst: 'I' to powiadomienie na pulpicie. Musisz dać mi pozwolenie, abym mógł wyglądać jak to, co ja. Jeśli nie, stanę się regularnym powiadomieniem. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); służy do upewnienia się, że użytkownicy mają dane pozwolenie aby strona wyświetlała powiadomienie. Jeśli użytkownicy zabronią witryny, powiadomienie będzie wyświetlane jako regularne zawiadomienie zamiast.
Jak widać, istnieje dodatkowa opcja dodawania pulpit do kodu. The pulpit: prawda włączy powiadomienie na pulpicie; jeśli ustawisz na false, powiadomienie stanie się powiadomieniem regularnym.
Możesz także użyć niestandardowej ikony za pomocą Ikona opcja. Wypełnij go swoim adresem URL ikony; możesz to ustawić fałszywy aby wyłączyć ikonę. Jeśli go ustawisz zero, zostanie użyta domyślna ikona.
Aby zobaczyć inne implementacje modułów z ich opcjami, przejdź do tego łącza.
Możesz kontynuować implementację, przechodząc na jej oficjalną stronę. Tam możesz zobaczyć zaawansowane użycie wraz z demami. Możesz też odwiedzić stronę GitHub, aby uzyskać dodatkowe informacje.
