Overhang.js - Et jQuery-plugin til Dropdown-meddelelsesmeddelelser
Hvor irriterende er den standard JS advarselsbokse? De føler sig som en relikvie fra en primitiv svunne æra af webudvikling.
I dag kan vi lave diskret meddelelsesmeddelelser der deler de samme oplysninger men afbryd ikke brugeroplevelsen. Og det er præcis det, du kan gøre med overhang.js.
Denne gratis jQuery-plugin kan Tilføj tilpassede meddelelsesfelter det falder ned fra toppen af skærmen. De er placeret via CSS og animeret med JavaScript, så de kan falde ned fra et fast punkt øverst uanset sidens længde.
Du kan opbygge meddelelser som Automatisk lukning efter en vis tid, eller andre der kræver brugerindgang.
Beskeder kan relæsucces, fejl, fejl eller enkle meddelelser med oplysninger om brugeren eller siden. Beskeder kan også har deres egne ja / nej knapper at spørge brugerne spørgsmål som en JavaScript-advarsel.
Der er endda en mulighed for at oprette beskeder det rul ned med et indtastningsfelt. Dette ville være perfekt til en e-mail-opt-in formular.
Overhang.js understøtter alle de store browsere understøttet af jQuery og det er også drevet af jQuery UI for de animerede funktioner.
Sammen med jQuery & jQuery UI biblioteker, skal du også Indsæt en brugerdefineret CSS-fil med plugin. Du kan altid flette dette sammen med stilarket på dit websted at reducere HTTP-anmodninger.
Ethvert opkald til overhæng () metode kan tag et hvilket som helst antal parametre. Disse er hedder “muligheder” og de giver dig fuld kontrol over hvert notifikationsboks.
Du kan ændre animationshastighed, varighed, lempelse, og boks størrelse / farve, sammen med andre designfunktioner.
Her er en prøveuddrag demonstrerer hvordan Opret en bekræftelsesboks:
// Nogle bekræftelse $ ("body"). Overhang (type: "bekræft", yesMessage: "Ja tak!", NejMeddelelse: "Nej tak."); Du kan se, at dette er ret simpelt og det kræver ikke meget jQuery-kode.
Til download en kopi af plugin kan du besøge repo på GitHub, hvor du også kan gennemse kildefilerne direkte. Eller, hvis du vil se flere levende eksempler Gå videre til Overhang.js hjemmeside.
