Výběr odkazů z roletového menu

28. října 1999

•

Pokud máte na stránce příliš mnoho odkazů, které zbytečně zabírají místo, zkuste použít formulářového prvku Select (roletové menu), kde všechny tyto položky umístníte a následným výběrem jedné položky se načte příslušná stránka…

Pokud nemáte představu, o co jde, zkuste se podívat na některé známé české servery, které tento způsob odkazování používají, například ISDN server, který tímto stylem nahradil původně dlouhý seznam rubrik serveru. Na ISDN serveru je tento skok na vybranou stránku z menu vytvořen pomocí PHP skriptu, my jej uděláme v Javascriptu, který můžete použít prakticky kdekoli a navíc jej uděláme tak, aby se stránka načetla automaticky, bez nutnosti klikání na tlačítko.

Do HTML stránky, kterou pojmenujeme jako třeba formular.htm, vložíme za tag <BODY> následující Javascriptový kód. Je zde vytvořena funkce go, která se zavolá v prvku SELECT událost onchange. Tím se skript zavolá při jakékoliv změně současného stavu prvku Select. Ve skriptu je ošetřena možnost, že se uživatel náhle rozhodne nevybrat žádnou stránkou a ponechá tedy přednastavený text roletového menu (v našem případě Seznam stránek) – v takovém případě se nenačte žádná stránka.

Do stránky rovněž vložíme nakonec samotný formulář, který může vypadat jako v následující tabulce. Adresa stránky, která má být vyvolána výběrem z formulářového menu, musí být uvedena v parametru Value každé položky. Počet stránek či jejich odkazy můžete samozřejmě libovolně změnit.

<form>
<select onchange=“go(this)“>
<option selected value=““>Seznam stránek</option>
<option VALUE=“stranka1.htm“>Stránka 1</option>
<option VALUE=“stranka2.htm“>Stránka 2</option>
</select>
</form>

Výše popsaný JavaScript má samozřejmě své nevýhody – např. nefunguje v prohlížečích, které JavaScript nepodporují nebo u uživatelů, kteří mají vypnuto aktivní skriptování. Následující kód funguje stejně jako předchozí jenom s tím rozdílem, že roletové menu se těmto uživatelům vůbec nezobrazí a zobrazí se pouze klasické odskoky – vtip je v tom, že se použijí tagy <noscript> a </noscript>. Vtip je v tom, že prohlížeč, který podporuje JavaScript, tag <noscript> zná, ví, k čemu slouží a proto jeho obsah nevypisuje. Ovšem prohlížeč, který má zakázáno provádění JavaScriptu, či jej vůbec nepodporuje, tag <noscript> nezná, ignoruje jej, ale obsah tohoto tagu ovšem zobrazí. Samotný Javascript se samozřejmě v takovém případě nezobrazí, protože je uzavřen do poznámky.

<SCRIPT LANGUAGE=“JavaScript“>
<!–
document.write(‚<form>‘);
document.write(‚<select onchange=“go(this)“>‘);
document.write(‚<option selected value=““>Seznam stránek</option>‘);
document.write(‚<option VALUE=“stranka1.htm“>Stránka 1</option>‘);
document.write(‚<option VALUE=“stranka2.htm“>Stránka 2</option>‘);
document.write(‚</select>‘);
document.write(‚</form>‘);
//–></SCRIPT>
<noscript>
<b>Máte vypnutý JavaScript</b>
<a href=“stranka1.htm“>Stranka 1</A>
<a href=“stranka2.htm“>Stranka 2</A>
</noscript>

A taková perlička na závěr – následují kód řeší situaci, kdyby tag <noscript> vůbec neexistoval. Níže uvedený kód funguje tak, že pomocí JavaScriptu jsou klasické odkazy vloženy do poznámky, takže se všem, kdo mají povolený JavaScript vůbec nezobrazí. U návštěvníků, kteří mají v prohlížeči vypnutý JavaScript, či jejich prohlížeč JavaScript nepodporuje se odkazy na stránce zobrazí, protože skript, který je dával do poznámky, nyní neběží.

<SCRIPT LANGUAGE=“JavaScript“>
<!–
document.write(‚<form>‘);
document.write(‚<select onchange=“go(this)“>‘);
document.write(‚<option selected value=““>Seznam stránek</option>‘);
document.write(‚<option VALUE=“stranka1.htm“>Stránka 1</option>‘);
document.write(‚<option VALUE=“stranka2.htm“>Stránka 2</option>‘);
document.write(‚</select>‘);
document.write(‚</form>‘);
//–></SCRIPT>
<SCRIPT LANGUAGE=“JavaScript“>
<!–
document.write(‚<'+'!'+'--');
//–></script>
<b>Máte vypnutý JavaScript</b>
<a href=“stranka1.htm“>Stranka 1</A> <
<a href=“stranka2.htm“>Stranka 2</A>
<SCRIPT LANGUAGE=“JavaScript“>
<!–
document.write(‚–‚+’>‘);
//–></script>

Popsaný skript lze použít nejenom pro výběr z rubrik, či stránek serveru, ale třeba i pro download programů, kde si návštěvník stránky z formuláře vybere server, odkud chce program stahovat atd.