Navigace na stránce pomocí dvou prvků SELECT

13. prosince 2000

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:

var s1n = new CreateArray(
    "Auta",
    "Motocykly",
    "Letadla" );
var s2n1 = new CreateArray(
    "Volvo",
    "Jaguar",
    "Rolls-Royce" );
var s2u1 = new CreateArray(
    "http://www.volvo.com",
    "jaguar.htm",
    "../luxusni/rols.asp" );
var s2n2 = new CreateArray(
    "Yamaha",
    "Honda" );

var s2u2 = new CreateArray(
    "www.yamaha.com",
    "www.honda.com" );
var s2n3 = new CreateArray(
    "Boeing",
    "Mig 27",
    "F-15",
    "Čmelák" );
var s2u3 = new CreateArray(
    "boeing.htm",
    "mig27.htm",
    "f15.htm",
    "slapaci.htm" );

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í:

function CreateArray(){
    this.length = CreateArray.arguments.length
    for (var i = 0; i < this.length; i++)
    this[i + 1] = CreateArray.arguments[i] }

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

var maxLength = 10;
var trueLength = s2n1.length;
var lst = s2n1.length;

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):

function Jump(theSelect){
    selindex = theSelect.selectedIndex
    selvalue = theSelect.options[selindex].value
    if ( selindex > 0 )
       window.location.href = selvalue
}

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:

function changeMenu() {
    menuNum = document.menu.select1.selectedIndex;
    if (menuNum == null) return;
    var tempArray1;
    var tempArray2;
    if (menuNum == 0) {
        tempArray1 = s2n1;
        tempArray2 = s2u1;
    }
    if (menuNum == 1) {
        tempArray1 = s2n2;
        tempArray2 = s2u2;
    }
    if (menuNum == 2) {
        tempArray1 = s2n3;
        tempArray2 = s2u3;
    }
    for (i = lst; i > 0; i–)
        document.menu.select2.options[i] = null;
    document.menu.select2.options[0] = new Option( „– Vyberte –“ );
    document.menu.select2.options[0].value = „javascript:void()“;
    for (i = 1; i <= tempArray1.length; i++) {
        document.menu.select2.options[i] = new Option( tempArray1[i] );
        document.menu.select2.options[i].value = tempArray2[i];
    }
    document.menu.select2.options[0].selected = true;
    lst = tempArray1.length;
}

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

with (document) {
    writeln(‚<FORM NAME = "menu">‘);
    writeln(‚<SELECT NAME="select1" onChange="changeMenu(this.form)">‘);
    tot = s1n.length;
    for (i = 1; i <= tot; i++)
        writeln("<OPTION>" +s1n[i]);
    writeln("</SELECT>");
    writeln(‚<SELECT NAME="select2" onchange="Jump(this)">‘);
    for (i = 0; i < maxLength; i++)
        writeln("<OPTION>" +s2n1[i]);
    writeln("</SELECT>");
    for (i = maxLength; i > trueLength; i–)
        menu.select2.options[i] = null;
    changeMenu();
    writeln(‚</FORM>‘);
}

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.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

Napsat komentář

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