nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


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 ontvangen op zowel desktopcomputers als mobiele apparaten.

Als u echter een notificatie 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, kennisgeving 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 aan 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 (op basis van de standaard voor webmeldingen), ondersteuning voor dynamische updates, callbacks voor verschillende evenementen, geschiedenisviewer om eerdere meldingen en HTML-ondersteuning in de titel en tekst te bekijken.

PNotify biedt een onopvallende melding, wat betekent dat je door elk element achter de melding 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: 'Hey, I \' a simple notification. '});}); 

En dit is het resultaat:

Kortom, om een ​​melding te maken, start u een nieuwe PNotify-functie. De titel, tekst, stijl en andere opties kunnen vervolgens in de functie worden doorgegeven. Als u het meldingstype niet opgeeft, wordt het standaardtype gebruikt dat een kennisgeving is . Er zijn ongeveer 20+ configureerbare opties die u kunt doorgeven. Klik hier om de lijst met de standaardwaarde te bekijken.

styling

Als u de stijl wilt wijzigen, kunt u de styling in de melding doorgeven en de gewenste stijl definiëren. Beschikbare stijlen zijn bootstrap2, bootstrap3, jqueryui en fontawesome . Vergeet niet om gerelateerde stijlbronnen in uw project op te nemen.

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"; 

Wijzig jqueryui met de gewenste stijl en zet deze regel vóór de melding als volgt:

 PNotify.prototype.options.styling = "jqueryui"; nieuwe PNotify ({title: "jQuery UI Style", tekst: "Hallo, 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 toestemming hebben gegeven voor de site om een ​​melding weer te geven. Als gebruikers de site niet toestaan, wordt de melding weergegeven als een normale kennisgeving .

Zoals u kunt zien, is er de extra optie om een desktop aan de code toe te voegen. De desktop: true schakelt de melding voor desktop in; als u deze op false instelt, wordt de melding een reguliere melding.

U kunt ook een aangepast pictogram gebruiken via de icon . Vul het met je pictogram url; je kunt het false om het pictogram uit te schakelen. Als u dit met null, wordt het standaardpictogram 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.

Eenvoudig opslaan, organiseren en delen van webinhoud met Dragdis

Eenvoudig opslaan, organiseren en delen van webinhoud met Dragdis

Bookmarken bestaat al een tijdje, maar er is niet veel veranderd. De vertrouwde bladwijzeringsinterface heeft waarschijnlijk een opknapbeurt nodig. Hoewel het misschien perfect was in de kinderschoenen van internet, is bladwijzering een prominent onderdeel van ons online gedrag geworden, dat de oude interfaces het gewoon niet meer kunnen verbergen

(Technische en ontwerptips)

Verzend grote bestanden gratis met Filemail

Verzend grote bestanden gratis met Filemail

Filemail is een app waarmee je elk bestand snel en gemakkelijk naar iedereen (via e-mail) kunt sturen . Voor zover ik weet, is Filemail de eenvoudigste manier om bestanden te delen. Vertrouw me, je hoeft je niet eens te registreren om het te gebruiken . Gewoon verzenden en delen van zoveel bestanden als je wilt, omdat het hoe dan ook (bijna) onbeperkt is

(Technische en ontwerptips)