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

• jQuery
• jQuery – .toggle()