Navigace na stránce pomocí dvou prvků SELECT

Potřetí a doufám že naposledy se budeme zabývat použitím pole SELECT pro navigaci v HTML stránkách. Tentokrát si ukážeme elegantní použití dvou navzájem provázaných polí SELECT, s jejíž pomocí dokážeme na malém prostoru vytvořit i velmi složitou navigaci.

Pokud jste nečetli předchozí články o navigaci pomocí pole SELECT, doporučuji vám si nejdříve přečíst je. Odkazy na ně naleznete na konci článku. V tomto článku probíraná technika totiž vychází z jednodušších variant, ukázaných dříve.

Celý skript, zajišťující uvedenou funkčnost, se skládá ze dvou částí – první z nich je uvedena v tagu HEAD. Protože se jedná o poměrně dlouhý kód, vypíšeme a vyložíme si jej po menších celcích:

V uvedené části kódu jsme vytvořili pomocí konstruktoru CreateArray několik polí, která obsahují jednak seznamy řetězců, které se zobrazí v polích SELECT, a také seznamy příslušných URL adres. Tuto část kódu budete tedy modifikovat a rozšiřovat nejčastěji, při úpravách navigační struktury Vašich stránek. Zdrojový kód zmíněného konstruktoru CreateArray je následující:

Následuje definice pomocných globálních proměnných maxLength, trueLength a lst:

Tyto proměnné nám poslouží k podržení informací o první a poslední délce pravého pole SELECT. Pro Internet Explorer lze napsat kód tak, že se bez uvedených konstant obejde, jejich využití je ale nezbytné pro Netscape, který má trochu – v uvozovkách – horší obsluhu polí SELECT. Když už mluvíme o kompatibilitě, je nutné podotknout, že kód nebude fungovat na prohlížeči starším než Netscape verze 3.0. Starší verze Internet Exploreru doporučuji přezkoušet, kód byl testován na verzi 5.0, a i když podle technických údajů by verze 4.0 měla fungovat bez problémů, realita může být trochu jiná. Funkci Jump už známe z předchozích dílů tohoto miniseriálku, s jednou úpravou, kdy neprovádí redirekci v případě, že byla v poli SELECT vybrána první – prázdná – položka (ta s nadpisem „–Vyberte–„, viz příklad na začátku článku):

Zbývá napsat poslední funkci changeMenu, která se volá po každé změně výběru v levém poli SELECT, a zajišťuje změnu obsahu pravého pole SELECT. Pracuje tak, že podle aktuálního výběru v prvním poli SELECT nejprve zvolí správná pole proměnných, z nichž bude brát obsah, poté vymaže obsah druhého pole SELECT a znovu v něm vytvoří jednotlivé položky OPTION (toto mazání a opětné vytváření je důvod, proč kód nefunguje na starších verzích NN). Kromě položek OPTION explicitně uvedených v příslušných polích navíc funkce vytvoří první prázdnou položku (s nadpisem „– Vyberte –„). Funkci changeMenu budete rovněž modifikovat při změně navigační struktury stránek:

Tolik skript v tagu HEAD. Druhou část skriptu uvedeme v tom místě, kde chceme zobrazit dvojici polí SELECT:

Uvedená část kódu je v podstatě jednoduché generování formuláře pomocí funkcí writeln. Kromě toho tento kód rovněž poprvé zavolá funkci ChangeMenu, aby bylo zajištěno natažení správných hodnot do druhého pole SELECT.

Další možná vylepšení?

Několik by se jich určitě našlo – druhou část kódu by bylo vhodné umístit do samostatné funkce, jednotlivé kroky lze lépe parametrizovat atd. I v tomto „výukovém“ tvaru je však kód dobře využitelný pro vylepšení, nebo alespoň ozvláštnění, rozsáhlejší navigace. To je na nějakou dobu k polím SELECT – aspoň doufám – vše.

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.