PNotify - Et stærkt tilpasset meddelelsesprogram
For nogle af os, der er konstant optaget, holder vi besked på toppen af alle vigtige begivenheder, nyheder og informationer. Det mindsker ventetiden, mens du administrerer at opdatere os med de seneste hændelser, og det er ikke underligt, at vi får beskeder på både stationære og mobile enheder.
Hvis du imidlertid ønsker at oprette besked til dit websted, kan du nemt oprette det med dette plugin kaldet PNotify. Det er et gratis og open source javascript plugin med mange muligheder og det er nemt at bruge. Med PNotify kan du endda se op til 1000 meddelelser på én gang (se denne benchmarking test for at prøve det). Hvor sej er det?
Hvorfor brug PNotify?
PNotify, tidligere kendt som Pines Notify, bærer tre primære meddelelsestyper: info, varsel og fejl. Det har en masse funktioner, effekter, temaer og stilarter. Du kan vælge forskellige stilarter fra Bootstrap, jQuery UI, Font Awesome eller gå med din egen stil. Der er også omkring 18 færdige temaer (lavet med Bootswatch), du kan vælge imellem, og der er endda overgangseffekter.
Den fantastiske ting ved PNotify er, at den ikke kun har fantastiske grafiske egenskaber, men det er også beriget med kraftige og rige API'er (eller moduler). Disse API'er indeholder desktop-underretninger (baseret på web-meddelelsesudkast-standarden), dynamisk opdateringssupport, tilbagekald for forskellige begivenheder, historikviseren for at se tidligere meddelelser og HTML-support i titlen og kroppen.
PNotify giver en diskret notifikation hvilket betyder at du kan klikke gennem et element bag varselet uden at afvise det. Du kan også afgøre, hvor meddelelsen vises med stablerne, som giver dig mulighed for at placere meddelelsen overalt: som top / bottom bar stil eller endda som en værktøjstip.
Grundlæggende brug
PNotify s kilder kommer i tilpasses bundle moduler og er tilgængelige her.
Kom i gang
Når du har kilderne, skal du inkludere dem i din HTML som sådan:
PNotify er meget nem at bruge. Her er en simpel meddelelse:
$ (funktion () ny PNotify (title: 'Simple Notification', tekst: 'Hej, jeg er en simpel meddelelse.'););
Og det er resultatet:
Grundlæggende for at oprette en anmeldelse starter du en ny PNotify-funktion. Titlen, teksten, stilen og andre muligheder kan derefter sendes ind i funktionen. Hvis du ikke angiver meddelelsestypen, vil den bruge standardtypen, som er en varsel. Der er omkring 20 + konfigurerbare muligheder du kan passere. For at se listen med standardværdien, klik her.
Styling
For at ændre stilen kan du passere styling valg i anmeldelsen og definer din ønskede stil. Tilgængelige stilarter er bootstrap2, bootstrap3, jqueryui og fontawesome. Glem ikke at inkludere relaterede stilkilder inden for dit projekt.
Hvis jeg f.eks. Vil ændre den tidligere meddelelsesstil til jQuery UI-temaet, bruger jeg følgende uddrag:
ny PNotify (title: "jQuery UI Style", tekst: "Hej, jeg er stylet med jQuery UI tema.", styling: "jqueryui");
Der er en anden måde at style din notitication på, via denne kode:
PNotify.prototype.options.styling = "jqueryui";
Lave om jqueryui med den stil du vil have, så sæt denne linje før meddelelsen som sådan:
PNotify.prototype.options.styling = "jqueryui"; ny PNotify (title: "jQuery UI Style", tekst: "Hej, jeg er stylet med jQuery UI tema.");
Her er dit resultat, stilet:
Tilføjelse af moduler
Moduler er rige API'er, der aktiverer avancerede meddelelsesfunktioner. Der er 7 moduler i PNotify: Desktop, Buttons, NonBlock, Bekræft, History, Tilbagekaldelser og Referencemodul. Moduler kan bruges ved at overføre sine passende muligheder til anmeldelsen.
Som et eksempel nedenfor er koderne for at vise dig, hvordan du bruger skrivebordsmodulet:
PNotify.desktop.permission (); ny PNotify (title: 'Desktop Notification', tekst: 'I'm desktop besked. Du skal give mig tilladelse, så jeg kan vises som hvad jeg vil. Hvis ikke, bliver jeg en regelmæssig meddelelse. ', desktop: desktop: true, icon: null);
PNotify.desktop.permission (); bruges til at sikre, at brugerne har givet tilladelse for webstedet at vise underretning. Hvis brugerne afviser webstedet, vil meddelelsen være vist som en regelmæssig meddelelse i stedet.
Som du kan se, er der den ekstra mulighed for at tilføje desktop til koden. Det desktop: true vil aktivere meddelelsen til skrivebordet; Hvis du angiver den for falsk, bliver meddelelsen regelmæssig.
Du kan også bruge et brugerdefineret ikon via ikon mulighed. Udfyld det med din ikon url; du kan indstille det falsk for at deaktivere ikonet. Hvis du sætter det med nul, standardikonet vil blive brugt.
For at se andre modul implementeringer med deres muligheder, gå til dette link.
Du kan videreføre implementeringen ved at gå til dens officielle side. Der kan du se nogle avancerede brug sammen med demoerne. Alternativt kan du besøge sin GitHub side for yderligere information.
