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

20. listopadu 2000

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:

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:

Vyberte svůj oblíbený vyhledávač:

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:

<form method="POST" action="javascript:void()">
Vyberte svůj oblíbený vyhledávač: <select name="URL" size="1">
<option selected value="http://www.altavista.com/">AltaVista</option>
<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.google.com/">Google</option>
</select><input type="button" value=" Go! " name="B1" onclick="Jump(this.form.URL)">
</form>

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:

function Jump(theSelect){
/* Funkce provede odskok na adresu,
* obsaženou v tagu VALUE aktuálně vybrané volby
* ovládacího prvku theSelect
*/

    // zjistíme index aktuálně vybraného prvku
    selindex = theSelect.selectedIndex
    // zjistíme hodnotu příslušné položky OPTION – cílové URL
    selvalue = theSelect.options[selindex].value
    // provedeme skok na cílové URL
    window.location.href = selvalue
}

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:

Vyberte svůj oblíbený vyhledávač:

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:

<form method="POST" action="javascript:void()">
Vyberte svůj oblíbený vyhledávač: <select name="URL" size="1" onchange="Jump(this)">
<option selected value="http://www.altavista.com/">AltaVista</option>
<option value="http://www.yahoo.com/">Yahoo</option>
<option value="http://www.google.com/">Google</option>
</select>
</form>

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.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. Goloka

    Bře 20, 2011 v 23:43

    Můžete mi prosím poradit jak to zapsat tak aby se mi ty odkazy otevírali do jiného rámu v případě že se to použije k navigaci na stránce používající rámy?

    Odpovědět
  2. Michal

    Bře 19, 2013 v 14:39

    Nefunguje mi to :/

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *