jQuery – zobrazení nápovědy na webu

jQuery je velmi užitečná knihovna a umožňuje snadnou tvorbu javascriptových kravinek do webových aplikací. Jednou z možností, jak ji využít je skrývání/zobrazování nápovědy na webu.

Nápověda je často dlouhá a zavazí při zobrazování stránky, proto je výhodné ji skrýt a zobrazit jen, když je potřeba. K tomu slouží metoda toggle() z knihovny jQuery. Ukázka HTML kódu:

<button id="helpButton">?</button> <p id="helpText"> Text nápovědy. </p>

Pro skrytí textu použijeme metodu hide(). Zobrazovat nápovědu budeme po kliknutí na button. Kód je velmi jednoduchý.

$(document).ready(function() { $("#helpText").hide(); $("button#helpButton").click(function () { $("#helpText").toggle(); }); });

Skript spouštíme až po kompletním načtení dokumentu. Nejprve skryjeme odstavec s id helpText. Po kliknutí na button dojde k zobrazení, příp, skrytí textu.

Ukázka kódu je zde:

Zobrazování lze samozřejmě ozvláštnit pomocí různých efektů, např. pomalým rozbalováním textu, stačí upravit jeden řádek.

$(document).ready(function() { $("#helpText").hide(); $("button#helpButton").click(function () { $("#helpText").toggle("slow"); }); });

Viz zde:

Odkazy

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.