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

4. prosince 2000

•

V minulém článku na toto téma jsme si ukázali, jak lze použít formulářové pole SELECT k úspoře místa při navigaci na stránkách. Tentokrát se ještě jednou vrátíme k tomuto tématu a ukážeme si některá vylepšení.

Princip navigace pomocí pole SELECT zůstává stejný, tedy ve stručnosti: vytvoříme formulář s polem SELECT, v němž v jednotlivých tazích (je to 6.pád od slova TAGY?) OPTION ve vlastnosti VALUE uvedeme cílové URL adresy, na které poté pomocí malé JavaScriptové funkce provedeme odskok (kompletní popis viz. předcházející článek).

Modifikace tohoto řešení spočívá ve změně způsobu, jakým vytváříme formulář s polem SELECT. Zatímco v předchozí variantě jsme formulář do HTML stránky zapisovali ručně (potažmo za použití některého WYSIWYG editoru, např. FrontPage), tentokrát vygenerujeme celý formulář promocí krátké funkce v JavaScriptu.

Když už zavádíme nový postup, je namístě objasnit si důvody, které nás k tomu vedou.

Důvod 1) První metoda, tedy ruční vytváření formuláře, se hodí vždy, když použijeme v rámci jednoho webu stejné pole SELECT pouze jednou. Naproti tomu generování pole v JavaScriptu umožňuje jednoduše nadefinovat toto pole v include souboru, a použít jej na více stránkách – v případě změny poté provádíme úpravy jen na jednom místě.
Důvod 2) Vzhledem k tomu, že definice pole SELECT bude uvedena v polích proměnných (array), je tento způsob vhodnější pro složité weby, které se pomocí JavaScriptu z velké části „samogenerují“ – s proměnnými lze samozřejmě dále manipulovat, upravovat je, použít pro další účely apod. (chcete-li příklad, jak takový web může vypadat, doporučuji vám prostudovat způsob, jakým jsou udělány stránky fy. Microsoft – tam je technologie „samogenerování“ široce uplatněna).
Důvod 3) V některém příštím článku si ukážeme ještě sofistikovanější navigaci pomocí dvou spřažených polí SELECT – a pro její implementaci je použití této technologie nezbytné.

A teď už samotný návod k použití. Nejprve příklad, jak takové pole generované JavaScriptem vypadá: Pokud jste četli minulý článek, vidíte, že vzhled i funkčnost pole je tatáž.

Při generování postupujeme takto: nejprve v JavaScriptu (nejlépe umístěném v tagu HEAD) nadefinujeme dvě pole proměnných, která budou obsahovat potřebné řetězce s nápisy a URL v poli SELECT:

var ArrayNames = new CreateArray(
    "Altavista",
    "Yahoo",
    "Google"
);

var ArrayURLs = new CreateArray(
    "http://www.altavista.com/",
    "http://www.yahoo.com/",
    "http://www.google.com/"
);

K vytvoření pole jsme použili technologii objektů a vlastní konstruktor CreateArray, jehož zdrojový kód vypadá takto (podrobněji viz článek o náhodě na stránkách):

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

V tomtéž skriptu zadefinujeme funkci Jump – stejnou jako při ručním vytváření prvku SELECT:

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
}

A nadefinujeme funkci CreateSelectMenu, která provádí samotné vytvoření formuláře s polem SELECT:

function CreateSelectMenu() {
    document.writeln(‚<FORM><SELECT NAME="URL" onChange="Jump(this)">‘);
    cnt = ArrayNames.length;
    for (var i = 1; i <= cnt; i++)
        document.write(‚<OPTION VALUE="‘ + ArrayURLs[i] + ‚">‘ + ArrayNames[i] +'</OPTION>‘ );
    document.writeln(‚</SELECT>‘);
    document.writeln(‚</FORM>‘);
}

Všechen výše uvedený kód můžeme buď umístit do skriptu v tagu HEAD, nebo, což je výhodnější, do samostatného include souboru, například s názvem „select.js“, který pomocí SRC vložíme do jedné nebo více stránek, například takto:

A to je prakticky všechno. V místě, kam chceme umístit pole SELECT, pak už jen jednoduše zavoláme funkci CreateSelectMenu(), která pole vytvoří za nás. Funkci můžeme v rámci jedné stránky volat i vícekrát.

CreateSelectMenu();

Na závěr jedno vylepšení: minule jsme si řekli, že starší verze Netscape (konkrétně 2.x), neumí vlastnost OnChange, která je v uvedeném příkladě použita. Pro tyto prohlížeče nezbývá než doplnit kód, který identifikuje prohlížeč a případně doplní do formuláře tlačítko „Go!“, provádějící odskok. Pokud chcete používat tuto technologii (a proč ne), doplňte do funkce CreateSelectMenu před generování závěrečného FORM tyto dva řádky:

if (navigator.userAgent.indexOf("Mozilla/2") != -1)
document.writeln(‚<INPUT TYPE = BUTTON VALUE = "Go!" onclick="Jump(this.form.URL)" >‘);

To je pro tentokrát vše. Chcete-li se dále procvičit v JavaScriptu, doporučuji vylepšit funkci CreateSelectMenu tak, aby na vstupu přijímala jako argumenty dvě pole proměnných, ze kterých bude funkce vytvářet pole SELECT. Přeji vám příjemný den.