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

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

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

Deze gratis jQuery-plug-in kan aangepaste meldingsbalken toevoegen die vanaf de bovenkant van het scherm verschijnen. Zij zijn gepositioneerd via CSS en geanimeerd met JavaScript, zodat ze naar beneden kunnen vallen vanaf een vast punt bovenaan ongeacht de paginalengte.

Je kunt berichten bouwen die automatisch sluiten na een bepaalde tijd, of anderen dat gebruikersinvoer vereisen.

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

Er is zelfs een optie om prompts te maken drop-down met een invoerveld. Dit zou perfect zijn voor een e-mailoptieformulier.

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

Samen met de jQuery & jQuery UI-bibliotheken, moet u dat ook doen een aangepast CSS-bestand opnemen met de plug-in. Je kan altijd voeg dit samen met het stylesheet van uw website om HTTP-verzoeken te verminderen.

Elke oproep aan de overhang () methode kan neem een ​​willekeurig aantal parameters. Dit zijn riep “opties” en ze geven je de volledige controle over elk meldingsvak.

U kunt de animatie snelheid, looptijd, versoepeling, en doosmaat / kleur, samen met andere ontwerpkenmerken.

Hier is een voorbeeldfragment demonstreren hoe maak een bevestigingsvenster:

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

Je kunt zien dat dit zo is best makkelijk en het vereist niet veel jQuery-code.

Naar download een kopie van de plug-in, kunt u de repo op GitHub bezoeken, waar u ook rechtstreeks door de bronbestanden kunt bladeren. Of, als u dat wilt zie meer live voorbeelden ga naar de website Overhang.js.