PNotify - visoko prilagodljiv dodatak za obavijesti
Za neke od nas koji smo stalno zauzeti, obavijesti nas drže na vrhu svakog važnog događaja, vijesti i informacija. Time se smanjuje vrijeme čekanja dok nas ažurira najnovijim događanjima, a nije ni čudo da dobivamo obavijesti i na računalima i mobilnim uređajima..
Ako ipak želite izraditi obavijest za svoju web-lokaciju, možete je jednostavno izraditi pomoću ovog dodatka koji se zove PNotify. To je besplatni javascript plugin s otvorenim izvornim kodom s mnogo opcija i jednostavan je za korištenje. S PNotify možete čak prikazati do 1000 obavijesti odjednom (pogledajte ovaj test benchmarkinga da biste ga isprobali). Kako je to cool?
Zašto koristiti PNotify?
PNotify, ranije poznat kao Pines Notify, nosi tri glavna tipa obavijesti: Informacije, obavijest i greška. Ima hrpu značajki, efekata, tema i stilova. Možete odabrati različite stilove iz Bootstrap, jQuery UI, Font Awesome ili ići sa svojim stilom. Tu je i oko 18 gotovih tema (napravljenih s Bootswatch) koje možete izabrati, a postoje čak i efekti prijelaza.
Velika je stvar o PNotify je to ne samo strašan grafičke značajke, ali je također obogaćen sa snažnim i bogatim API-ja (ili modula). Ti API-ji uključuju obavijesti na radnoj površini (na temelju standarda web-obavijesti), podršku za dinamičko ažuriranje, povratne pozive za razne događaje, preglednik povijesti kako bi vidjeli prethodne obavijesti i HTML podršku u naslovu i tijelu.
PNotify pruža nenametljiva obavijest što znači da možete kliknuti bilo koji element iza obavijesti bez odbacivanja. Također možete odrediti gdje se obavijest pojavljuje s značajkama Stacks, što vam omogućuje da postavite obavijest posvuda: kao gornji / donji stil bara ili čak kao opis alata.
Osnovna upotreba
PNotifyovi izvori dolaze u prilagodljive module i dostupni su ovdje.
Početak rada
Nakon što dobijete izvore, uključite ih u HTML tako:
PNotify je vrlo jednostavan za korištenje. Evo jednostavne obavijesti:
$ (function () new PNotify (title: 'Jednostavna obavijest', tekst: 'Hej, ja sam jednostavna obavijest.'););
I to je rezultat:
U osnovi, za izradu obavijesti pokrećete novu funkciju PNotify. Naslov, tekst, stil i druge opcije tada se mogu prenijeti unutar funkcije. Ako ne navedete vrstu obavijesti, ona će koristiti zadani tip koji je a obavijest. Postoji oko Više od 20 opcija koje se mogu konfigurirati možete proći. Da biste vidjeli popis s njegovom zadanom vrijednošću, kliknite ovdje.
stil
Da biste promijenili stil, možete proći stil u obavijesti i definirajte željeni stil. Dostupni su stilovi bootstrap2, bootstrap3, jqueryui i fontawesome. Ne zaboravi uključiti povezane stilske izvore unutar vašeg projekta.
Na primjer, ako želim promijeniti prethodni stil obavijesti na temu jQuery korisničkog sučelja, koristim sljedeći isječak:
new PNotify (title: "Style jQuery UI", tekst: "Hej, ja sam stiliziran s jQuery UI temom.", styling: "jqueryui");
Postoji još jedan način oblikovanja vaše obavijesti, putem ovog koda:
PNotify.prototype.options.styling = "jqueryui";
Promijeniti jqueryui sa stilom koji želite, a zatim stavite taj redak prije obavijesti tako:
PNotify.prototype.options.styling = "jqueryui"; new PNotify (title: "JQuery UI Style", tekst: "Hej, ja sam stiliziran s jQuery UI temom.");
Ovo je vaš rezultat, stiliziran:
Dodavanje modula
Moduli su bogati API-ji koji omogućuju napredne značajke obavijesti. Tamo su 7 modula u PNotify: Desktop, gumbi, NonBlock, Potvrdi, Povijest, Callbacks i Referentni modul. Moduli se mogu upotrijebiti tako da se odgovarajuće obavijesti prenose u obavijest.
Kao primjer, u nastavku se nalaze kodovi za prikazivanje načina korištenja modula za radnu površinu:
PNotify.desktop.permission (); new PNotify (title: 'Obavijest za radnu površinu', tekst: 'Ja sam obavijest o radnoj površini. Morate mi dati dopuštenje kako bih se mogao pojaviti kao ono što sam. Ako ne, postat ću redovita obavijest. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); koristi se kako bi se osiguralo da korisnici imaju dano dopuštenje da web-lokacija prikazuje obavijest. Ako korisnici zabrane web-lokaciju, obavijest će biti prikazana kao redovita obavijest umjesto.
Kao što možete vidjeti, postoji dodatna mogućnost dodavanja desktop u kod. desktop: istina omogućit će obavijest za radnu površinu; ako ga postavite na lažno, obavijest će postati redovita obavijest.
Također možete koristiti prilagođenu ikonu putem ikona opcija. Ispunite ga URL-om ikone; možete ga postaviti lažan da biste onemogućili ikonu. Ako ga podesite nula, koristi se zadana ikona.
Da biste vidjeli ostale implementacije modula s njihovim opcijama, idite na ovu vezu.
Možete nastaviti implementaciju tako da odete na njezinu službenu web-lokaciju. Tamo možete vidjeti neke napredne upotrebe zajedno s demonstracijama. Za dodatne informacije možete posjetiti i njezinu GitHub stranicu.
