PNotify - Egy rendkívül testreszabható értesítési bővítmény

Néhányunk számára, akik állandóan elfoglaltak, az értesítések minden fontos esemény, hírlevél és információ tetején maradnak. Ez csökkenti a várakozási időt, miközben sikerül frissíteni minket a legújabb eseményekkel, és nem csoda, hogy értesítéseket kapunk mind az asztali számítógépekről, mind a mobilokról.

Ha azonban értesítést szeretne létrehozni a webhelyére, akkor könnyen létrehozhatja ezt a PNotify nevű bővítményt. Ez egy ingyenes és nyílt forráskódú javascript plugin, sok lehetőséggel és könnyen használható. A PNotify segítségével akár 1000 értesítést is megjeleníthet egyszerre (lásd ezt a benchmarking tesztet a kipróbáláshoz). Hűvös ez?

Miért használja a PNotify-t?

A PNotify, korábban Pines Notify néven ismert, három fő értesítési típust hordoz: info, értesítés és hiba. Van egy csomó funkciója, hatásai, témái és stílusai is. Választhat a különböző stílusok közül a Bootstrap, a jQuery UI, a Font Awesome vagy a saját stílusával. Körülbelül 18, a Bootswatch-el készült kész téma közül választhat, és az átmeneti hatások is vannak.

A PNotify nagyszerű dolog az, hogy nem csak félelmetes grafikai jellemzői vannak, hanem erős és gazdag API-kkal (vagy modulokkal) is gazdagodnak. Ezek az API-k tartalmazzák az asztali értesítéseket (a webes értesítési tervezet alapján), a dinamikus frissítési támogatást, a különböző események visszahívásait, a korábbi előzmények és a HTML-támogatás címét és testét..

PNotify egy észrevétlen értesítés ez azt jelenti, hogy a hirdetmény mögötti bármely elemre kattintva elutasíthatja azt. Azt is meghatározhatja, hogy hol jelenik meg az értesítés a Stacks funkciókkal, ami lehetővé teszi, hogy az értesítést mindenhol pozícionálja: felső / alsó sávként vagy akár eszköztippként is.

Alaphasználat

A PNotify forrásai testreszabható kötegmodulokból állnak, és itt érhetők el.

Elkezdeni

Miután megkapta a forrásokat, vegye fel őket a HTML-be:

A PNotify használata nagyon egyszerű. Itt egy egyszerű értesítés:

 $ (függvény () new PNotify (title: 'Simple Notification', szöveg: 'Hé, én egy egyszerű értesítés.');); 

És ez az eredmény:

Alapvetően egy értesítés létrehozásához új PNotify funkciót kezdeményez. A cím, a szöveg, a stílus és az egyéb opciók ezután átadhatók a funkción belül. Ha nem adja meg az értesítés típusát, akkor az alapértelmezett típust használja, amely a értesítés. Körülbelül 20 + konfigurálható opció átadhatod. Az alapértelmezett értékkel rendelkező lista megtekintéséhez kattintson ide.

Styling

A stílus megváltoztatásához átmegy a styling opciót, és határozza meg a kívánt stílust. A rendelkezésre álló stílusok bootstrap2, bootstrap3, jqueryui és fontawesome. Ne felejtsd el tartalmazza a kapcsolódó stílusforrásokat a projekten belül.

Ha például az előző értesítési stílust a jQuery UI témakörre szeretném módosítani, az alábbi részletet használom:

 új PNotify (title: "jQuery UI Style", szöveg: "Hé, én jQuery UI témájú vagyok.", stílus: "jqueryui"); 

Ezzel a kóddal egy másik módja van a bejelentés stílusának:

 PNotify.prototype.options.styling = "jqueryui"; 

változás jqueryui a kívánt stílussal, majd tegye ezt a sort az értesítés előtt:

 PNotify.prototype.options.styling = "jqueryui"; új PNotify (title: "jQuery UI Style", szöveg: "Hé, én jQuery UI témájú vagyok."); 

Íme az eredményed:

Modulok hozzáadása

A modulok gazdag API-k, amelyek lehetővé teszik a fejlett értesítési funkciókat. Vannak 7 modul PNotify: Desktop, Gombok, NonBlock, Confirm, History, Callbacks és Reference Module. A modulok felhasználhatók a megfelelő opcióknak az értesítésben való átadásával.

Példaként az alábbi kódok mutatják be, hogyan kell használni az asztali modult:

 PNotify.desktop.permission (); új PNotify (title: 'Desktop Notification', szöveg: 'Én asztali értesítés. Engedélyt kell adni nekem, így úgy tűnhetem, mint amit én. Ha nem, rendszeres értesítéssé válok. ', desktop: desktop: true, icon: null); 

PNotify.desktop.permission (); használják, hogy a felhasználók rendelkezzenek adott engedélyt hogy a webhely értesítést jelenítsen meg. Ha a felhasználók nem engedélyezik a webhelyet, az értesítés lesz rendszeres értesítésként jelenik meg helyette.

Mint látható, van egy további lehetőség a hozzáadáshoz asztali a kódhoz. A asztal: igaz lehetővé teszi az asztali értesítést; ha hamisra állítja, az értesítés rendszeres értesítéssé válik.

Ön is használhat egyéni ikont a ikon választási lehetőség. Töltse ki az ikon URL-jével; beállíthatja hamis az ikon letiltásához. Ha beállítja nulla, az alapértelmezett ikon kerül felhasználásra.

A többi modul implementációjának megtekintéséhez az opcióval lépjen a linkre.

A megvalósítást a hivatalos honlapján keresztül továbbfejlesztheti. Itt láthatunk néhány speciális felhasználást a demókkal együtt. Alternatív megoldásként további információkat találhat a GitHub oldalon.