Overhang.js - Ett jQuery-plugin för Dropdown-meddelanden

Hur irriterande är standard JS varningslådor? De känner sig som en relik från en primitiv svunnen tid av webbutveckling.

Nuförtiden kan vi göra diskreta meddelandemeddelanden som delar samma information men Avbryt inte användarupplevelsen. Och det är precis vad du kan göra med overhang.js.

Detta gratis jQuery-plugin kan Lägg till anpassade meddelandefält som faller ner från toppen av skärmen. de är positionerad via CSS och animerad med JavaScript, så de kan falla ner från en fast punkt på toppen oavsett sidlängd.

Du kan bygga meddelanden som Automatisk stängning efter en viss tid, eller andra som kräver användarinmatning.

Meddelanden kan reläframgång, fel, fel eller enkla meddelanden med information om användaren eller sidan. Meddelanden kan också har egna ja / nej knappar att fråga användare som en snabbmeddelande om JavaScript.

Det finns även ett alternativ att skapa uppmaningar som rulla ned med ett inmatningsfält. Detta skulle vara perfekt för en e-postoptionsformulär.

Overhang.js stöder alla större webbläsare som stöds av jQuery och det är också drivs av jQuery UI för de animerade funktionerna.

Tillsammans med jQuery & jQuery UI-bibliotek måste du också Ta med en anpassad CSS-fil med plugin. Du kan alltid slå samman detta med stilarket på din webbplats för att minska HTTP-förfrågningar.

Varje samtal som gjorts till hänga över() metod kan ta några parametrar. Dessa är kallad “alternativ” och de ger dig fullständig kontroll över varje meddelandefält.

Du kan ändra animationshastighet, varaktighet, easing, och boxens storlek / färg, tillsammans med andra designfunktioner.

Här är en provbit visar hur man ska skapa en bekräftelse ruta:

 // En del bekräftelse $ ("body"). Överhang (typ: "bekräfta", yesMessage: "Ja tack!", Nej Meddelande: "Nej tack."); 

Du kan se att detta är ganska enkelt och det kräver inte mycket jQuery-kod.

Till ladda ner en kopia av plugin kan du besöka repo på GitHub där du även kan bläddra igenom källfilerna direkt. Eller, om du vill se fler levande exempel gå vidare till Overhang.js hemsida.