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


Overhang.js - Een jQuery-plug-in voor meldingen over uitvallers

Hoe vervelend zijn de standaard JS-waarschuwingsvakken ? Ze voelen als een overblijfsel uit een primitief vervlogen tijdperk van webontwikkeling.

Tegenwoordig kunnen we onopvallende notificatieberichten maken die dezelfde informatie delen, maar de gebruikerservaring niet onderbreken . En dat is precies wat je kunt doen met overhang.js .

Deze gratis jQuery-plug-in kan aangepaste meldingsbalken toevoegen aan de bovenkant van het scherm. Ze zijn gepositioneerd via CSS en geanimeerd met JavaScript, zodat ze vanaf een vast punt bovenaan kunnen worden neergezet, ongeacht de paginalengte .

U kunt berichten bouwen die na een bepaalde tijd automatisch sluiten, of andere waarvoor gebruikersinvoer nodig is .

Berichten kunnen succes, fouten, fouten of eenvoudige meldingen doorgeven met informatie over de gebruiker of de pagina. Berichten kunnen ook hun eigen ja / nee-knoppen hebben om gebruikers vragen te stellen zoals een waarschuwing voor een JavaScript-prompt.

Er is zelfs een optie om aanwijzingen te maken die verschijnen met een invoerveld . Dit zou perfect zijn voor een e-mailaanmeldingsformulier.

Overhang.js ondersteunt alle belangrijke browsers die door jQuery worden ondersteund en het wordt ook aangedreven door jQuery UI voor de geanimeerde functies.

Samen met de jQuery & jQuery UI-bibliotheken, moet u ook een aangepast CSS-bestand met de plug-in opnemen. U kunt dit altijd samenvoegen met het stijlblad van uw website om HTTP-verzoeken te verminderen.

Elke aanroep naar de methode overhang() kan een willekeurig aantal parameters aannemen . Dit worden 'opties' genoemd en geven u volledige controle over elk meldingsvak.

U kunt de animatiesnelheid, duur, versnelling en boxgrootte / kleur wijzigen, samen met andere ontwerpfuncties.

Hier is een voorbeeldfragment waarin wordt gedemonstreerd hoe u een bevestigingsvenster kunt maken :

 // Een enkele bevestiging $ ("body"). Overhang ({type: "bevestigen", jaBericht: "Ja alsjeblieft!", NeeMessage: "Nee, bedankt."}); 

Je ziet dat dit vrij eenvoudig is en er is niet veel jQuery-code voor nodig .

Om een kopie van de plug-in te downloaden, kunt u de repo op GitHub bezoeken, waar u ook rechtstreeks door de bronbestanden kunt bladeren. Of, als je meer live voorbeelden wilt zien, ga dan naar de Overhang.js-website.

Geleidelijk laat je lui afbeeldingen laden met Vanilla JS

Geleidelijk laat je lui afbeeldingen laden met Vanilla JS

Elke moderne website moet snel zijn. Hoewel er veel technieken en plug-ins zijn om de paginasnelheid te verhogen, weet je misschien niet waar je moet beginnen.Het progressieve script is een geweldige bron voor het verhogen van de paginasnelheid . Het werkt als een lazy loading image script dat foto's progressief laadt terwijl de gebruiker de pagina afrolt

(Technische en ontwerptips)

50+ Mooie schone op CSS-tabbladen gebaseerde navigatiescripts

50+ Mooie schone op CSS-tabbladen gebaseerde navigatiescripts

Een van de belangrijkste taken van een ontwerper van gebruikerservaringen is ervoor te zorgen dat de navigatie van de website eenvoudig en gebruiksvriendelijk is . En welke andere manier om dit mogelijk te maken dan via navigatie-tabbladen.Goed ontworpen navigatietabbladen helpen gebruikers niet alleen om te weten waar ze heen moeten, ze zijn ook belangrijk om verkeer naar de interne pagina's van uw website of blog te leiden

(Technische en ontwerptips)