Overhang.js - jQuery dodatak za padajuće obavijesti
Koliko su dosadni zadane JS okvire upozorenja? Osjećaju se kao relikvija iz primitivnog vremena razvoja weba.
Danas možemo napraviti nenametljive poruke obavijesti koje dijele iste informacije, ali ne prekidajte korisničko iskustvo. I to je upravo ono što možete učiniti overhang.js.
Ovaj besplatni jQuery plugin može dodajte prilagođene trake obavijesti koje padaju s vrha zaslona. oni su pozicioniran putem CSS-a i animirani s JavaScriptom, tako da mogu pasti s fiksne točke na vrhu bez obzira na duljinu stranice.
Možete graditi poruke koje automatski se zatvara nakon određenog vremena, ili drugima zahtijevaju korisnički unos.
Poruke mogu uspjeh releja, neuspjeh, pogreška ili jednostavne obavijesti s informacijama o korisniku ili stranici. Poruke također mogu biti imaju vlastite gumbe da / ne postavljati pitanja korisnicima kao upozorenje za JavaScript.
Postoji čak i opcija za stvaranje upita spustite se s poljem za unos. To bi bilo savršeno za prijavu putem e-pošte.
Overhang.js podržava sve glavne preglednike koje podržava jQuery i također pokreće jQuery UI za animirane značajke.
Uz knjižnice korisničkog sučelja jQuery i jQuery također ćete morati uključuju prilagođenu CSS datoteku s dodatkom. Uvijek možeš spojite to sa stilom web-lokacije smanjiti HTTP zahtjeve.
Svaki poziv upućen korisniku prevjes ()
metoda može uzeti bilo koji broj parametara. Ovi su zvao “opcije” i daju vam potpunu kontrolu nad svakim okvirom za obavijesti.
Možete promijeniti brzina animacije, trajanje, easing, i veličina / boja kutije, zajedno s drugim značajkama dizajna.
Evo jednog isječak uzorka pokazati kako stvorite potvrdni okvir:
// Neka potvrda $ ("body"). Preglas (type: "confirm", yesMessage: "Yes please!", NoMessage: "Ne hvala.");
To možete vidjeti prilično jednostavno i to ne zahtijeva mnogo jQuery koda.
Do preuzmite kopiju dodatka možete posjetiti repo na GitHubu gdje možete izravno pregledavati izvorne datoteke. Ili, ako želite vidi više primjera uživo idite na web-lokaciju Overhang.js.