Overhang.js - Et jQuery-plugin for Dropdown-meldingsmeldinger

Hvor irriterende er det standard JS varselbokser? De føler seg som en relikvie fra en primitiv svunnen epoke av webutvikling.

I dag kan vi lage ikke-påtrengende varslingsmeldinger som deler samme informasjon, men ikke forstyrre brukeropplevelsen. Og det er akkurat det du kan gjøre med overhang.js.

Denne gratis jQuery-plugin kan Legg til tilpassede varslingsfelt som faller ned fra toppen av skjermen. de er posisjonert via CSS og animert med JavaScript, slik at de kan falle ned fra et fast punkt øverst uansett sidelengde.

Du kan bygge meldinger som automatisk lukke etter en viss tid, eller andre som krever brukerinngang.

Meldinger kan relaysuksess, feil, feil eller enkle varsler med informasjon om brukeren eller siden. Meldinger kan også har egne ja / nei knapper å spørre brukerne spørsmål som en JavaScript-varsling.

Det er enda et alternativ å opprette beskjed om rul ned med et inntastingsfelt. Dette ville være perfekt for en e-post påmeldingsskjema.

Overhang.js støtter alle de store nettleserne som støttes av jQuery og det er også drevet av jQuery UI for de animerte funksjonene.

Sammen med jQuery & jQuery UI-bibliotekene, må du også inkludere en egendefinert CSS-fil med plugin. Du kan alltid slå sammen dette med stilarket på nettstedet ditt for å redusere HTTP-forespørsler.

Hvert anrop gjort til overheng () metoden kan ta noen parametere. Disse er kalt “opsjoner” og de gir deg full kontroll over hver varslingsboks.

Du kan endre animasjonshastighet, varighet, lettelser, og boks størrelse / farge, sammen med andre designfunksjoner.

Her er en prøveutdrag viser hvordan opprett en bekreftelsesboks:

 // Noen bekreftelse $ ("body"). Overhang (type: "bekreft", yesMessage: "Yes please!", NoMessage: "Nei takk."); 

Du kan se dette er ganske enkelt og det krever ikke mye jQuery-kode.

Til last ned en kopi av plugin, kan du besøke repo på GitHub hvor du også kan bla gjennom kildefilene direkte. Eller, hvis du vil se flere levende eksempler Hodet over på Overhang.js nettside.