PNotify - Plugin de notificare extrem de personalizabil
Pentru unii dintre noi care sunt în mod constant ocupați, notificările ne mențin în fruntea tuturor evenimentelor importante, știrilor și informațiilor. Reduce timpul de așteptare în timp ce reușesc să ne actualizeze cu cele mai recente întâmplări și nu e de mirare că primim notificări atât pe desktop, cât și pe telefoane mobile.
Dacă totuși doriți să creați o notificare pentru site-ul dvs., o puteți crea cu ușurință cu acest plugin numit PNotify. Este un plugin javascript gratuit și open source cu multe opțiuni și ușor de utilizat. Cu PNotify, puteți afișa chiar până la 1000 de notificări simultan (consultați acest test de benchmarking pentru al încerca). Cat de tare e asta?
De ce folosiți PNotify?
PNotify, cunoscut anterior sub numele de Pines Notify, poartă trei tipuri principale de notificări: info, înștiințare și eroare. Are o grămadă de trăsături, efecte, teme și, de asemenea, stiluri. Aveți posibilitatea să alegeți diferite stiluri din Bootstrap, jQuery UI, Font Awesome sau mergeți cu propriul dvs. stil. Există, de asemenea, aproximativ 18 de teme gata făcute (realizate cu Bootswatch) pe care le puteți alege și există chiar și efecte de tranziție.
Lucrul excelent despre PNotify este că nu are doar caracteristici grafice minunate, dar este, de asemenea, îmbogățit cu puternice și bogate API-uri (sau module). Aceste interfețe API includ notificări desktop (bazate pe standardul Notificări Web), suport dinamic de actualizare, apeluri de apel pentru diverse evenimente, vizualizator de istoric pentru a vedea notificările anterioare și suport HTML în titlu și în corp.
PNotify oferă un o notificare neobișnuită ceea ce înseamnă că puteți să faceți clic pe orice element din spatele anunțului fără a îl respinge. De asemenea, puteți determina unde se afișează notificarea cu ajutorul funcțiilor Stacks, care vă permite să poziționați anunțul peste tot: ca stil bar superior / jos sau chiar ca o sugestie.
Utilizare de bază
Sursa PNotify vine în module personalizabile și sunt disponibile aici.
Noțiuni de bază
După ce ați primit sursele, includeți-le în codul HTML astfel:
PNotify este foarte usor de folosit. Iată o notificare simplă:
$ (function () new PNotify (title: 'Notificare simplă', text: 'Hey, sunt o notificare simplă'););
Și acesta este rezultatul:
Practic, pentru a crea o notificare, inițiați o nouă funcție PNotify. Titlul, textul, stilul și alte opțiuni pot fi apoi transmise în interiorul funcției. Dacă nu specificați tipul de notificare, acesta va utiliza tipul implicit, care este a înștiințare. Sunt aproape 20+ opțiuni configurabile poți trece. Pentru a vedea lista cu valoarea implicită, faceți clic aici.
Coafura
Pentru a schimba stilul, puteți trece Coafura în notificare și definiți stilul dorit. Stilurile disponibile sunt bootstrap2, bootstrap3, jqueryui și fontawesome. Nu uita includ surse de stil asociate în cadrul proiectului dvs..
De exemplu, dacă vreau să schimb stilul de notificare anterior la tema jQuery UI, folosesc următorul fragment:
noul PNotify (title: "jQuery UI Style", text: "Hei, eu sunt stil cu tema jQuery UI", stil: "jqueryui");
Există și un alt mod de a vă felicita notificarea, prin intermediul acestui cod:
PNotify.prototype.options.styling = "jqueryui";
Schimbare jqueryui cu stilul pe care îl doriți, apoi puneți această linie înaintea notificării, astfel:
PNotify.prototype.options.styling = "jqueryui"; noul PNotify (title: "jQuery UI Style", text: "Hei, eu sunt cu tema jQuery UI");
Iată rezultatul dvs., în stil:
Adăugarea modulelor
Modulele sunt API-uri bogate, care permit funcții avansate de notificare. Sunt 7 module în PNotify: Desktop, Butoane, NonBlock, Confirmare, Istoric, Comenzi de apel și Modul de referință. Modulele pot fi utilizate prin transmiterea opțiunilor corespunzătoare în notificare.
De exemplu, mai jos sunt codurile care vă arată cum să utilizați modulul Desktop:
PNotify.desktop.permission (); noul PNotify (title: "Notificare desktop", text: "Sunt o notificare de pe desktop. Trebuie să îmi dai permisiunea pentru a putea apărea ca și pentru ceea ce sunt eu. Dacă nu, voi deveni o notificare obișnuită. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); este folosit pentru a vă asigura că utilizatorii au da permisiune pentru ca site-ul să fie notificat. Dacă utilizatorii nu permit site-ul, notificarea va fi afișată ca o notificare obișnuită in schimb.
După cum puteți vedea, există opțiunea suplimentară de adăugare desktop- la cod. desktop: adevărat va permite notificarea pentru desktop; dacă îl setați la fals, notificarea va deveni o notificare obișnuită.
De asemenea, puteți utiliza o pictogramă personalizată prin icoană opțiune. Completați-l cu adresa URL a pictogramei; îl puteți seta fals pentru a dezactiva pictograma. Dacă îl stabiliți nul, va fi utilizată pictograma implicită.
Pentru a vedea alte implementări ale modulelor cu opțiunile lor, accesați acest link.
Puteți continua punerea în aplicare prin accesarea site-ului său oficial. Acolo puteți vedea o utilizare avansată împreună cu demo-urile. Alternativ, puteți vizita pagina GitHub pentru informații suplimentare.
