Základy práce se stavovým řádkem pomocí JavaScriptu

29. listopadu 2000

•

Tento článek ukazuje několik základních technik, které jsou určeny k práci se stavovým řádkem prohlížeče pomocí JavaScriptu. Článek je určen především pro začátečníky.

Stavový řádek (angl. Statusbar) je šedý řádek v dolní části okna prohlížeče, v němž se zobrazují údaje o průběhu načítání stránky, dále URL, na které ukazují odkazy z právě prohlížené stránky a další texty, převážně informačního charakteru.

O informace zobrazené ve stavovém řádku se většinou nemusíme starat – prohlížeč je zobrazuje a zase skrývá podle vlastního „uvážení“. V některých případech se nám však bude hodit toto jeho standardní chování změnit a vypsat do stavového řádku nějaký vlastní text. Učiníme tak pomocí jednoduchých JavaScriptů, přičemž funkce a postupy, které použijeme, jsou zcela běžně používané a možná i proto podporované většinou prohlížečů – zcela jistě pak dvěma nejpoužívanějšími prohlížeči, což je bez diskuse Internet Explorer a Netscape Navigátor.

Nejprve základní obsluha – jak text do stavového řádku umístíme a jak jej zase smažeme. Vyzkoušejte následující tlačítka:

K vypsání textu do stavového řádku jsme použili vlastní funkci WriteStatusBar, jejíž kód (nejlépe je umístit jej do tagu HEAD) je vypsán níže. Při události onclick na prvním tlačítku voláme tuto funkci a jako parametr jí předáme vypisovaný text, chceme-li (událost onclick na druhém tlačítku) tento text ze stavového řádku smazat, voláme tutéž funkci a jako parametr předáváme prázdný řetězec. Neexistuje tudíž žádná speciální JavaScriptová funkce pro mazání obsahu stavového řádku, mazání provádíme nejjednodušeji zápisem prázdného řetězce. Nyní zmíněný kód funkce:

function WriteStatusBar(txt) {
window.status = txt;
}

Zde je HTML kód samotných tlačítek:

Explicitní vypsání vlastního textu do stavového řádku použijeme rovněž v tom případě, že chceme „zakrýt“ informaci o tom, kam vede odkaz z naší stránky. Tuto informaci prohlížeč automaticky vypisuje do stavového řádku, pokud nastavíme kursor myši nad odkaz – vyzkoušejte zde.

Výše popsána technika ovšem nezabrání zkušenému uživateli zjistit informaci o tom, kam vede daný odkaz. Pro běžné návštěvníky stránek, kteří většinou nemají chuť ani čas věnovat se složitějšímu výzkumu, však postačuje.

Vyzkoušejte najet myší na tento odkaz. Ve stavovém řádku se objeví námi definovaný text. Použili jsme událost onmouseover, při které voláme vlastní funkci moveover(), jejíž kód vypadá takto:

function moveover(txt) {
window.status = txt;
}

HTML kód samotného odkazu vypadá takto:

<a href="www.nejakyodkaz.cz" onmouseover="moveover(‚Skrytí URL vlastním textem.‘); return true;">odkaz</a>

Uvedený kód má ještě jednu drobnou, ale nepříjemnou chybu: po oddálení kurzoru myši z odkazu text zůstává stále ve stavovém řádku. Chybu napravíme modifikací funkce moveover() a přidáním další funkce EraseStatusBar(). Nový kód vyzkoušíte najetím myší na tento odkaz a vypadá následovně:

function moveover(txt) {
    window.status = txt;
    setTimeout("EraseStatusBar()",1000);
}
function EraseStatusBar() {
    window.status="";
}

Trik uvedeného řešení je v použití standardní funkce setTimeOut, která po uplynutí časového intervalu, uvedeného v milisekundách jako druhý parametr funkce, volá funkci uvedenou v prvním parametru. V našem případě tedy po jedné sekundě zavolá funkci EraseStatusBar(), která po nás text stavového řádu smaže.

To by bylo k základům používání textu ve stavovém řádku pro dnešek vše, někdy příště si ukážeme trochu složitější postupy, které nám umožní provádět s textem ve stavovém řádku nejrůznější kouzla.