PNotify - En svært tilpasselig varslingsplugin
For noen av oss som er konstant opptatt, holder varslene oss på toppen av alle viktige hendelser, newsbit og informasjon. Det reduserer ventetiden mens du klarer å oppdatere oss med de siste hendelsene, og det er ikke rart at vi får varsler på både stasjonære og mobiler.
Hvis du imidlertid vil opprette varsel for nettstedet ditt, kan du opprette det enkelt med dette pluginet kalles PNotify. Det er en gratis og åpen kildekode javascript-plugin med mange alternativer, og det er enkelt å bruke. Med PNotify kan du til og med vise opptil 1000 varsler på en gang (se denne benchmarking testen for å prøve det). Hvor kult er det?
Hvorfor bruk PNotify?
PNotify, tidligere kjent som Pines Notify, har tre hovedvarslingstyper: info, legge merke til og feil. Den har en rekke funksjoner, effekter, temaer og stilarter. Du kan velge forskjellige stilarter fra Bootstrap, jQuery UI, Font Awesome eller gå med din egen stil. Det er også rundt 18 ferdige temaer (laget med Bootswatch) du kan velge mellom, og det er til og med overgangseffekter.
Den gode tingen om PNotify er at den ikke bare har fantastiske grafiske funksjoner, men det er også beriket med kraftige og rike APIer (eller moduler). Disse APIene inkluderer skrivebordsbeskjeder (basert på webvarsler Draft standard), dynamisk oppdateringsstøtte, tilbakeringinger for ulike hendelser, historikkviseren for å se tidligere varsler og HTML-støtte i tittelen og kroppen..
PNotify gir en ikke-påtrengende varsel som betyr at du kan klikke gjennom et hvilket som helst element bak varselet uten å avvise det. Du kan også avgjøre hvor varslingen dukker opp med Stacks-funksjonene, som gjør at du kan plassere varselet overalt: som topp / nederst barstil eller til og med som et verktøytips.
Grunnleggende bruk
PNotifys kilder kommer i tilpassbare buntmoduler og er tilgjengelige her.
Starter
Når du har kildene, ta dem med i HTML-koden din slik:
PNotify er veldig enkelt å bruke. Her er et enkelt varsel:
$ (funksjon () ny PNotify (title: 'Simple Notification', tekst: 'Hei, jeg er et enkelt varsel.'););
Og dette er resultatet:
I utgangspunktet, for å opprette et varsel, initierer du en ny PNotify-funksjon. Tittelen, teksten, stilen og andre alternativer kan da sendes inn i funksjonen. Hvis du ikke angir varsel typen, vil den bruke standardtypen som er en legge merke til. Det er omtrent 20 + konfigurerbare alternativer du kan passere. For å se listen med standardverdien, klikk her.
styling
For å endre stilen, kan du passere styling alternativet i varslingen og definer ønsket stil. Tilgjengelige stiler er bootstrap2, bootstrap3, jqueryui og fontawesome. Ikke glem å inkludere relaterte stilkilder innenfor ditt prosjekt.
Hvis jeg for eksempel vil endre forrige varslingsstil til jQuery UI-temaet, bruker jeg følgende utdrag:
Ny PNotify (tittel: "jQuery UI Style", tekst: "Hei, jeg er stylet med jQuery UI tema.", styling: "jqueryui");
Det er en annen måte å style notitication på, via denne koden:
PNotify.prototype.options.styling = "jqueryui";
Endring jqueryui med stilen du vil ha, sett så denne linjen før varselet slik:
PNotify.prototype.options.styling = "jqueryui"; Ny PNotify (title: "jQuery UI Style", tekst: "Hei, jeg er stylet med jQuery UI tema.");
Her er resultatet ditt, stilet:
Legge til moduler
Moduler er rike APIer som aktiverer avanserte varslingsfunksjoner. Det er 7 moduler i PNotify: Skrivebord, Knapper, NonBlock, Bekreft, Historikk, Tilbakeringinger og Referansemodul. Moduler kan brukes ved å sende de riktige alternativene i varslingen.
Som et eksempel, er kodene nedenfor for å vise deg hvordan du bruker skrivebordsmodulen:
PNotify.desktop.permission (); Ny PNotify (title: 'Desktop Notification', tekst: 'Jeg' s desktop melding. Du må gi meg tillatelse, så jeg kan vises som hva jeg vil. Hvis ikke, blir jeg en vanlig melding. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); brukes til å sikre at brukerne har gitt tillatelse for at nettstedet skal vise varsel. Hvis brukerne tillater nettstedet, vil varslingen være vises som en vanlig varsel i stedet.
Som du kan se, er det det ekstra alternativet å legge til desktop til koden. De skrivebord: sant vil aktivere varslingen for skrivebordet; Hvis du setter den til feil, vil varselet bli regelmessig.
Du kan også bruke et egendefinert ikon via ikon alternativ. Fyll det med ikonet url; du kan sette det falsk for å deaktivere ikonet. Hvis du setter det med null, standardikonet vil bli brukt.
For å se andre modul implementeringer med sine alternativer, gå til denne linken.
Du kan videreføre implementeringen ved å gå til det offisielle nettstedet. Der kan du se noen avansert bruk sammen med demoene. Alternativt kan du besøke sin GitHub-side for mer informasjon.
