PNotify - En mycket anpassningsbar anmälningsplugin
För några av oss som är ständigt upptagna håller vi noteringar på toppen av alla viktiga händelser, nyheter och information. Det minskar väntetiden medan du hanterar att uppdatera oss med de senaste händelserna, och det är inte konstigt att vi får meddelanden på både stationära och mobila enheter.
Om du vill skapa anmälan för din webbplats, kan du enkelt skapa det här plugin-programmet PNotify. Det är ett gratis och open source javascript-plugin med många alternativ och det är lätt att använda. Med PNotify kan du till och med visa upp till 1000 meddelanden samtidigt (se detta benchmarking test för att prova det). Hur coolt är inte det?
Varför använd PNotify?
PNotify, tidigare känd som Pines Notify, har tre huvudsakliga meddelandetyper: info, lägga märke till och fel. Den har en massa funktioner, effekter, teman och stilar. Du kan välja olika stilar från Bootstrap, jQuery UI, Font Awesome eller gå med din egen stil. Det finns också cirka 18 färdiga teman (gjorda med Bootswatch) du kan välja mellan och det finns även övergångseffekter.
Det fantastiska med PNotify är att det inte bara har fantastiska grafiska funktioner, men det är också berikat med kraftfulla och rika API (eller moduler). Dessa API: er inkluderar skrivbordsmeddelanden (baserat på standardformulär för webbmeddelanden), dynamiskt uppdateringsstöd, återuppringningar för olika händelser, historikvisare för att se tidigare meddelanden och HTML-stöd i titeln och kroppen.
PNotify ger en diskreta anmälan vilket innebär att du kan klicka igenom något element bakom meddelandet utan att avvisa det. Du kan också avgöra var meddelandet visas med staplarna, vilket gör att du kan placera meddelandet överallt: som topp / nedstångsstil eller till och med som verktygstips.
Grundläggande användning
PNotifys källor finns i anpassningsbara buntmoduler och finns här.
Komma igång
När du har källorna, ta med dem i din HTML så här:
PNotify är väldigt lätt att använda. Här är en enkel anmälan:
$ (funktion () ny PNotify (title: 'Simple Notification', text: 'Hej, jag är en enkel anmälan.'););
Och det här är resultatet:
I grund och botten, för att skapa en anmälan, initierar du en ny PNotify-funktion. Titeln, texten, stilen och andra alternativ kan sedan skickas in i funktionen. Om du inte anger meddelandetypen använder den standardtypen som är en lägga märke till. Det finns cirka 20 + konfigurerbara alternativ du kan passera. För att se listan med standardvärdet, klicka här.
styling
För att ändra stilen kan du passera styling alternativet i meddelandet och definiera önskad stil. Tillgängliga stilar är bootstrap2, bootstrap3, jqueryui och fontawesome. Glöm inte att inkludera relaterade stilkällor inom ditt projekt.
Om jag till exempel vill ändra den tidigare meddelandestilen till temat jQuery UI använder jag följande kod:
ny PNotify (title: "jQuery UI Style", text: "Hej, jag är stylad med jQuery UI-tema.", styling: "jqueryui");
Det finns ett annat sätt att utforma din notitication via denna kod:
PNotify.prototype.options.styling = "jqueryui";
Byta jqueryui med den stil du vill ha, sätt sedan den här raden före meddelandet så här:
PNotify.prototype.options.styling = "jqueryui"; ny PNotify (title: "jQuery UI Style", text: "Hej, jag är utformad med jQuery UI-tema.");
Här är ditt resultat, styled:
Lägga till moduler
Moduler är rich APIs som möjliggör avancerade meddelandefunktioner. Det finns 7 moduler i PNotify: Skrivbord, Knappar, NonBlock, Bekräfta, Historia, Återuppringningar och Referensmodul. Moduler kan användas genom att passera lämpliga alternativ i anmälan.
Som exempel nedan är koderna för att visa dig hur du använder skrivbordsmodulen:
PNotify.desktop.permission (); ny PNotify (title: 'Desktop Notification', text: 'I \' m desktop notification. Du måste ge mig tillåtelse så att jag kan visas som vad jag är. Om inte, kommer jag att bli en vanlig anmälan. ', skrivbord: skrivbord: sant, ikon: null);
PNotify.desktop.permission (); används för att se till att användarna har givet tillstånd för att webbplatsen ska visa anmälan. Om användarna inte tillåter webbplatsen kommer meddelandet att vara visas som ett regelbundet meddelande istället.
Som du kan se finns det ytterligare ett alternativ att lägga till skrivbordet till koden. De skrivbordet: sant kommer att aktivera meddelandet för skrivbordet; Om du ställer in den till fel, kommer meddelandet att bli ett regelbundet meddelande.
Du kan också använda en anpassad ikon via ikon alternativ. Fyll den med din ikonadress du kan ställa in det falsk för att inaktivera ikonen. Om du ställer in det med null, standardikonen kommer att användas.
För att se andra modul implementeringar med sina alternativ, gå till den här länken.
Du kan fortsätta genomförandet genom att gå till sin officiella webbplats. Där kan du se lite avancerad användning tillsammans med demonerna. Alternativt kan du besöka sin GitHub-sida för ytterligare information.
