Navigace pomocí formulářového pole SELECT 2.
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:
|
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):
|
V tomtéž skriptu zadefinujeme funkci Jump – stejnou jako při ručním vytváření prvku SELECT:
|
A nadefinujeme funkci CreateSelectMenu, která provádí samotné vytvoření formuláře s polem SELECT:
|
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.
|
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:
|
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.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Fandíme českým sportovcům a rozdáváme hosting ZDARMA!
26. července 2024 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024
Nejnovější
-
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024