Overhang.js - doplnok jQuery pre hlásenia o upozornení
Ako nepríjemné sú predvolené polia upozornení JS? Cítia sa ako relikvie z primitívnej doby vývoja webu.
V dnešnej dobe to môžeme urobiť nenápadné notifikačné správy ktoré majú rovnaké informácie, ale neprerušujte skúsenosti používateľa. A to je presne to, s čím môžete robiť overhang.js.
Tento bezplatný doplnok jQuery môže pridať vlastné upozornenia ktoré vypadávajú z hornej časti obrazovky. sú umiestnené cez CSS a animovaný pomocou jazyka JavaScript, aby mohli vypadnúť z pevného bodu na vrchu bez ohľadu na dĺžku stránky.
Môžete vytvárať správy automatické zatvorenie po určitom čase, alebo iným, že vyžadovať vstup používateľa.
Správy môžu úspech prenosu, zlyhanie, chyba alebo jednoduché upozornenia s informáciami o používateľovi alebo stránke. Správy môžu tiež mať svoje vlastné tlačidlo áno / nie požiadať používateľov o otázky, ako je upozornenie na správcu jazyka JavaScript.
Je dokonca možnosť vytvoriť výzvy rozbaliť pomocou vstupného poľa. To by bolo ideálne pre e-mailový opt-in formulár.
Overhang.js podporuje všetky hlavné prehliadače, ktoré podporuje jQuery a to je tiež powered by jQuery UI pre animované funkcie.
Spolu s knižnicami používateľského rozhrania jQuery & jQuery budete tiež potrebovať obsahovať vlastný súbor CSS s doplnkom. Vždy môžete zlúčte to so štýlmi vašich webových stránok na zníženie požiadaviek HTTP.
Každá volaná služba previs ()
metóda môže prijať ľubovoľný počet parametrov. Toto sú volal “možnosti” a dávajú vám plnú kontrolu nad každým oznamovacím poľom.
Môžete zmeniť rýchlosť animácie, trvanie, zmiernenie, a veľkosť / farba skrinky, spolu s ďalšími dizajnovými funkciami.
Tu je a útržok vzorky demonštrovať, ako vytvorte potvrdzovací box:
/ / Niektoré potvrdenie $ ("body") previs (type: "potvrdenie", yesMessage: "Yes please!", NoMessage: "No thanks");
Môžete to vidieť celkom jednoduché a to nevyžaduje veľa kódu jQuery.
na stiahnuť kópiu plugin, môžete navštíviť repo na GitHub, kde môžete priamo prehliadať zdrojové súbory. Alebo, ak chcete pozri viac živých príkladov prejdite na webovú stránku Overhang.js.