PNotify - Erittäin muokattavissa oleva ilmoitusliitin

Joillekin meistä, jotka ovat jatkuvasti kiireisiä, ilmoitukset pitävät meidät tärkeimpien tapahtumien, uutislehtien ja tietojen päällä. Se vähentää odotusaikaa, kun pystyt päivittämään meidät uusimpiin tapahtumiin, eikä ole ihme, että saamme ilmoituksia työpöydistä ja matkapuhelimista..

Jos haluat kuitenkin luoda ilmoituksen sivustoosi, voit luoda sen helposti tämän pluginin nimellä PNotify. Se on ilmainen ja avoimen lähdekoodin JavaScript-laajennus, jossa on paljon vaihtoehtoja, ja se on helppo käyttää. PNotify-toiminnolla voit jopa näyttää jopa 1000 ilmoitusta kerralla (kokeile tätä vertailuanalyysitestiä). Kuinka siistiä?

Miksi PNotify?

PNotify, aiemmin tunnettu nimellä Pines Notify, sisältää kolme päätyyppiä: tiedot, ilmoitus ja virhe. Siinä on joukko ominaisuuksia, tehosteita, teemoja ja tyylejä. Voit valita eri tyylejä Bootstrap, jQuery UI, Font Awesome tai omalla tyylilläsi. On myös noin 18 valmiita teemoja (tehty Bootswatchin avulla), joista voit valita ja joissa on jopa siirtymävaiheita.

Suuri asia PNotify on se, että siinä ei ole vain mahtavia graafisia ominaisuuksia, vaan se on myös rikastettu tehokkailla ja rikkailla API: lla (tai moduuleilla). Nämä sovellusliittymät sisältävät työpöydän ilmoituksia (Web-ilmoitusten luonnoksen perusteella), dynaamisen päivityksen tuen, eri tapahtumien soittopyynnöt, historian katseluohjelman, jotta voit nähdä aiemmat ilmoitukset ja HTML-tuen otsikossa ja rungossa.

PNotify tarjoaa huomaamaton mikä tarkoittaa sitä, että voit napsauttaa minkä tahansa ilmoituksen elementin läpi hylkäämättä sitä. Voit myös määrittää, missä ilmoitukset näkyvät Stacks-ominaisuuksien avulla, jolloin voit sijoittaa ilmoituksen kaikkialle: ylä- / alareunan tyyliin tai jopa työkaluvihjeenä.

Peruskäyttö

PNotifyn lähteet tulevat muokattaviin nipumoduuleihin ja ovat saatavilla täältä.

Päästä alkuun

Kun olet saanut lähteet, lisää ne HTML-muodossasi seuraavasti:

PNotify on erittäin helppokäyttöinen. Tässä on yksinkertainen ilmoitus:

 $ (toiminto () new PNotify (title: 'Simple Notification', teksti: 'Hei, olen yksinkertainen ilmoitus' '));); 

Ja tämä on tulos:

Periaatteessa ilmoituksen luomiseksi aloitat uuden PNotify-toiminnon. Otsikko, teksti, tyyli ja muut vaihtoehdot voidaan sitten siirtää toiminnon sisällä. Jos et määritä ilmoitustyyppiä, se käyttää oletustyyppiä, joka on a ilmoitus. Siellä on noin 20 + konfiguroitavia vaihtoehtoja voit siirtää. Jos haluat nähdä luettelon oletusarvollaan, napsauta tätä.

Muotoilu

Voit muuttaa tyyliä siirtämällä muotoilu vaihtoehto ja määritä haluamasi tyyli. Käytettävissä olevat tyylit ovat bootstrap2, bootstrap3, jqueryui ja fontawesome. Älä unohda sisällyttää niihin liittyviä tyylilähteitä hankkeen sisällä.

Jos esimerkiksi haluan muuttaa edellistä ilmoitustyyliä jQuery-käyttöliittymän teemaan, käytän seuraavaa katkelmaa:

 uusi PNotify (title: "jQuery UI Style", teksti: "Hei, olen tyylillä jQuery UI -teemalla.", muotoilu: "jqueryui"); 

Tämän koodin avulla voit myös muokata ilmoitustasi seuraavasti:

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

Muuttaa jqueryui aseta haluamasi tyyli ja aseta tämä rivi ennen ilmoitusta näin:

 PNotify.prototype.options.styling = "jqueryui"; uusi PNotify (title: "jQuery UI Style", teksti: "Hei, olen tyylillä jQuery UI -teeman kanssa."); 

Tässä on tulos, joka on tyylillä:

Moduulien lisääminen

Moduulit ovat rikkaita sovellusliittymiä, jotka mahdollistavat kehittyneiden ilmoitusominaisuuksien käyttämisen. On 7 moduulia PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks ja Reference Module. Moduuleja voidaan käyttää siirtämällä ilmoituksen mukaiset vaihtoehdot.

Seuraavassa on esimerkkejä työpöytämoduulin käyttämistä koskevista koodeista:

 PNotify.desktop.permission (); uusi PNotify (title: 'Desktop Notification', teksti: 'Olen työpöydän ilmoitus. Sinun on annettava minulle lupa, jotta voin ilmestyä niin kuin minä. Jos näin ei ole, ilmoitan siitä säännöllisesti. ', työpöytä: työpöytä: totta, kuvake: null); 

PNotify.desktop.permission (); käytetään varmistamaan käyttäjien olevan lupaa sivusto näyttää ilmoituksen. Jos käyttäjät eivät salli sivustoa, ilmoitus tulee olemaan näytetään säännöllisesti sen sijaan.

Kuten näette, on myös lisätoiminto pöytä- koodiin. työpöytä: totta mahdollistaa työpöydän ilmoituksen; jos asetat sen vääräksi, ilmoitus tulee säännöllisesti.

Voit myös käyttää mukautettua kuvaketta ikoni vaihtoehto. Täytä se kuvakkeen URL-osoitteella; voit asettaa sen väärä poistaa kuvakkeen käytöstä. Jos asetat sen tyhjä, oletuskuvaketta käytetään.

Jos haluat nähdä muita moduulin toteutuksia niiden vaihtoehdoilla, siirry tähän linkkiin.

Voit jatkaa toteutusta siirtymällä sen viralliseen sivustoon. Siellä voit nähdä joitakin edistyneitä käyttökohteita demojen kanssa. Vaihtoehtoisesti voit vierailla GitHub-sivulla lisätietojen saamiseksi.