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

Ještě jednou se vrátíme k navigaci pomocí formulářového pole SELECT. Ukážeme si, jak dát návštěvníkovi více informací o stránce, na niž odkaz směřuje. Metodu ovšem můžeme použít nejen při navigaci pomocí pole SELECT, ale i v kombinaci s běžnými odkazy.

Nejobvyklejší metoda, jak vypsat více informací o odkazu, než jen text uvedený mezi tagy <a>, je použít vlastnost – respektive parametr TITLE. Jedinou nevýhodu má toto řešení v tom, že návštěvník musí nad každým takovým odkazem chvíli postát myším kursorem.

Používáme-li pro alternativní navigaci rozbalovací pole SELECT, často je navigace rozfázována do dvou kroků. V prvním uživatel vybere příslušný odkaz z pole SELECT, v druhém stiskne tlačítko GO, které jej přenese na cílovou stránku. Zde se přímo nabízí využít prvního kroku k tomu, abychom uživateli zobrazili přídavné informace o cíli odkazu – například do pomocného textového pole. Vyzkoušejte zde (pro účely příkladu je skript upraven tak, že tlačítko GO místo odskoku pouze zobrazí cílovou URL):

Uvedený příklad využívá HTML formuláře, který je zde pojmenován menu. Ten obsahuje tři prvky:

Za prvé je to prvek SELECT, pojmenovaný jako links, jenž v jednotlivých řádcích OPTION nese v hodnotě VALUE cílová URL. Při změně výběru v poli SELECT je (z handleru události onChange) volána funkce changeMenu, popsaná níže.

Za druhé je to textové pole, pojmenované popis, do nějž budeme při změně výběru v poli SELECT zapisovat právě kýžené informace o cíli odkazu.

Třetí a poslední prvek formuláře je tlačítko OK, které po stisknutí (událost onClick) volá funkci Jump(), zajišťující odskok. Zde je HTML kód celého formuláře, naformátovaného do jednoduché tabulky:

Obslužný skript

V ovládacím prvku SELECT máme uloženy dvě informace, které při práci využíváme: cílové URL a popis odkazu, zobrazený v poli SELECT. Protože třetí potřebnou informaci (tedy řetězec zobrazovaný do textového pole) už nemáme v poli SELECT kam pohodlně uložit, vytvoříme si pomocí konstruktoru CreateArray…

…pomocné pole texty, které tuto informaci uchová:

Všimněte si, že delší texty explicitně formátujeme vkládáním znaku nového řádku \n. Opět úlitba pro Netscape, který delší řetězce v textovém poli automaticky nezalamuje.

Poznámka: Přísně vzato, tvrzení, že tyto texty v poli SELECT nemáme kam uložit, není zcela pravdivé. Místo by se určitě našlo – využitím některých nevyužitých vlastností inline stylu apod. Použitím pomocného pole se však záměrně držíme dál od těchto „okrajových“ vlastností, které by potencionálně mohly způsobovat problémy mezi různými verzemi browserů.

Nyní potřebujeme kód funkce changeMenu(), která zajišťuje při změně výběru v poli SELECT umístění správného řetězce do textového pole:

Dále napíšeme funkci Jump(), zajišťující po stisku tlačítka OK odskok na cílovou adresu:

Podmínka ve funkci Jump zamezuje odskoku z první položky pole SELECT, tedy onoho textu s nápisem „–Vyberte–„, který nesměřuje nikam.

Nakonec zavoláme jednou „naprázdno“ funkci changeMenu(), aby při natažení stránky vypsala do textového pole řetězec s informací k první položce pole SELECT. Funkci musíme volat až za definicí HTML formuláře:

No a to je vše. Jak jsem již zmínil na začátku článku, lze po úpravě využít tento skript i pro jiné způsoby navigace, třeba i pro klasické odkazy. Na druhou stranu ovšem může při těchto aplikacích leckomu připadat navigace na dvojí kliknutí poněkud „přes ruku“.

Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.