PNotify - Een zeer aanpasbare meldingsplugin

Voor sommigen van ons die voortdurend bezig zijn, houden meldingen ons op de hoogte van alle belangrijke gebeurtenissen, nieuwsbestedingen en informatie. Het vermindert de wachttijd terwijl we ons kunnen blijven updaten met de nieuwste gebeurtenissen en het is geen wonder dat we meldingen krijgen op zowel desktopcomputers als mobiele apparaten.

Als u echter een melding voor uw site wilt maken, kunt u deze eenvoudig maken met deze plug-in genaamd PNotify. Het is een gratis en open source JavaScript-plug-in met veel opties en het is gemakkelijk te gebruiken. Met PNotify kunt u zelfs maximaal 1000 meldingen tegelijk weergeven (zie deze benchmarkingtest om het uit te proberen). Hoe cool is dat?

Waarom PNotify gebruiken?

PNotify, voorheen bekend als Pines Notify, heeft drie typen hoofdaankondigingen: info, merk op en fout. Het heeft een heleboel functies, effecten, thema's en ook stijlen. Je kunt verschillende stijlen kiezen in Bootstrap, jQuery UI, Font Awesome of met je eigen stijl. Er zijn ook ongeveer 18 kant-en-klare thema's (gemaakt met Bootswatch) waaruit je kunt kiezen en er zijn zelfs overgangseffecten.

Het mooie van PNotify is dat het niet alleen geweldige grafische functies heeft, maar ook is verrijkt met krachtige en rijke API's (of modules). Deze API's bevatten bureaubladmeldingen (gebaseerd op de webnotificaties-conceptstandaard), ondersteuning voor dynamische updates, callbacks voor verschillende evenementen, geschiedenisviewer om eerdere meldingen en HTML-ondersteuning in de titel en in de body te zien.

PNotify biedt een onopvallende kennisgeving wat betekent dat je door elk element achter het bericht kunt klikken zonder het te negeren. U kunt ook bepalen waar de melding wordt weergegeven met de functies van Stacks, waarmee u de melding overal kunt plaatsen: als boven- / onderbalkstijl of zelfs als tooltip.

Standaard gebruik

De bronnen van PNotify zijn beschikbaar in aanpasbare bundelmodules en zijn hier beschikbaar.

Ermee beginnen

Nadat u de bronnen hebt ontvangen, neemt u ze op in uw HTML zoals:

PNotify is heel gemakkelijk te gebruiken. Hier is een eenvoudige melding:

 $ (function () new PNotify (title: 'Simple Notification', tekst: 'Hé, ik ben een eenvoudige melding.'););

En dit is het resultaat:

Kortom, om een melding te maken, start u een nieuwe functie PNotify. De titel, tekst, stijl en andere opties kunnen vervolgens in de functie worden doorgegeven. Als u het meldingstype niet opgeeft, gebruikt het het standaardtype a merk op. Er zijn ongeveer 20+ configureerbare opties je kan slagen. Klik hier om de lijst met de standaardwaarde te bekijken.

styling

Als u de stijl wilt wijzigen, kunt u de styling optie in de melding en definieer de gewenste stijl. Beschikbare stijlen zijn bootstrap2, bootstrap3, jQueryUI en fontawesome. Vergeet het niet omvatten gerelateerde stijlbronnen binnen uw project.

Als ik bijvoorbeeld de vorige meldingsstijl wil wijzigen in het jQuery-gebruikersinterfacethema, gebruik ik het volgende fragment:

 nieuwe PNotify (title: "jQuery UI Style", tekst: "Hey, ik ben gestileerd met jQuery UI-thema.", styling: "jqueryui");

Er is een andere manier om je aanwijzing te stylen, via deze code:

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

Verandering jQueryUI met de stijl die je wilt, zet dan deze regel voor de melding als volgt:

 PNotify.prototype.options.styling = "jqueryui"; nieuwe PNotify (title: "jQuery UI Style", tekst: "Hey, ik ben gestileerd met jQuery UI-thema.");

Hier is uw resultaat, gestileerd:

Modules toevoegen

Modules zijn rijke API's die geavanceerde meldingsfuncties mogelijk maken. Er zijn 7 modules in PNotify: Desktop, Buttons, NonBlock, Confirm, History, Callbacks en Reference Module. Modules kunnen worden gebruikt door de juiste opties in de melding door te geven.

Hieronder ziet u bijvoorbeeld de codes om u te laten zien hoe u de Desktop Module gebruikt:

 PNotify.desktop.permission (); nieuwe PNotify (title: 'Desktop Notification', text: 'I \' m desktop notificatie. Je moet me toestemming geven zodat ik kan verschijnen als wat ik ben. Zo niet, dan word ik een reguliere melding. ', desktop: desktop: true, icon: null);

PNotify.desktop.permission (); wordt gebruikt om ervoor te zorgen dat gebruikers het hebben toestemming gegeven voor de site om melding te tonen. Als gebruikers de site niet toestaan, is de melding dat weergegeven als een reguliere kennisgeving in plaats daarvan.

Zoals je kunt zien, is er de extra optie om toe te voegen desktop naar de code. De bureaublad: waar zal de melding inschakelen voor desktop; als u dit op false instelt, wordt de melding een reguliere melding.

U kunt ook een aangepast pictogram gebruiken via de icoon keuze. Vul dit in met je pictogram url; je kunt het instellen vals om het pictogram uit te schakelen. Als je het instelt met nul, het standaardpictogram wordt gebruikt.

Ga naar deze link om andere module-implementaties met hun opties te bekijken.

U kunt de implementatie verderzetten door naar zijn officiële site te gaan. Daar zie je wat geavanceerd gebruik samen met de demo's. Je kunt ook de GitHub-pagina bezoeken voor meer informatie.