Navigace pomocí formulářového pole SELECT 1.

Pole SELECT (roletové menu) je užitečný ovládací prvek, velmi často používaný v nejrůznějších formulářích. Jeho hlavní výhodou je, že umožňuje výběr z mnoha možností, a přitom nezabírá zbytečné místo na stránce. V tomto článku si ukážeme, jak pomocí JavaScriptu můžeme tuto jeho vlastnost využít i mimo formuláře ke zlepšení navigace na našich stránkách.

Nejdříve si ukážeme obvyklé, tedy formulářové, použití prvku SELECT. V anketním formuláři virtuálního vinného sklípku použijeme třeba toto:

Vyberte své oblíbené víno: BíléČervenéModré

V uvedeném příkladě prvek SELECT neslouží k navigaci, ale pouze k získání informací od návštěvníka stránek. Vyplněný formulář většinou odešleme na naši e-mail adresu, nebo do ASP či PHP skriptu, který zařídí zápis do databáze.

V mnoha případech bychom ale spíše chtěli po výběru oblíbeného vína (nebo auta, psa, programu) přesměrovat návštěvníka na stránku, která se daným produktem zabývá blíž. Nejjednodušší způsob je samozřejmě použití hypertextových odkazů. V případě, kdy však je voleb víc (řádově desítky), by ale tolik odkazů zbytečně zabíralo místo na stránce. Vyzkoušejme tedy opět prvek SELECT:

Po výběru vyhledávače a stisku tlačítka „Go!“ se přemístíme přímo na vybraný vyhledávač. Ať už do prvku SELECT umístíme odkazů kolik chceme, místo na stránce se tím nezmenší. Zdrojový kód pro tento příklad je následující – nejprve, jak vypadá HTML pro prvek SELECT:

Jak vidíte, v každém tagu OPTION je jako vlastnost VALUE přímo uvedena URL stránky, na kterou se chceme přemístit. Samotné přesměrování zabezpečuje funkce Jump, která je volána pro událost OnClick na tlačítku Go. Zde je zdrojový kód funkce Jump:

Funkce Jump je velice jednoduchá. Pro účely příkladu je rozepsána do více řádků, samozřejmě můžete uspořit místo tím, že ji zestručníte do řádku jednoho. Funkci lze dokonce vepsat přímo do události OnClick ve formuláři, doporučuji ji však ponechat samostatně, v následujícím odstavci uvidíme proč.

Vylepšení navigace

Pro mnohé účely se nám bude hodit vypustit z výše uvedeného příkladu nadbytečné tlačítko „Go!“ – kód lze upravit tak, aby byl návštěvník přesměrován na cílovou stránku bezprostředně po uskutečnení výběru v poli SELECT – vyzkoušejte si to zde:

Využili jsme tentokrát události OnChange prvku SELECT. Voláme opět výše uvedenou funkci Jump, pouze argument funkce se maličko liší – porovnejte zdrojový kód s předchozím příkladem:

Uvedená metoda má své klady i zápory. Výhodné je zrychlení práce a úspora místa na stránce, naproti tomu nevýhodou je leckdy neúmyslné přesměrování návštěvníka při chybném výběru – a to se stává často zejména při delších seznamech v poli SELECT, druhou – drobnou – nevýhodou je nefunkčnost metody OnChange v nejstarších verzích Netscape Navigatoru. Tuto nevýhodu lze odstranit modifikací kódu, kdy pomocí JavaScriptu identifikujeme prohlížeč a u těch problémových prostě tlačítko „Go!“ doplníme. To už si však můžete vyzkoušet sami.