Navigační pruh pomocí JavaScriptu

Na mnohých stránkách (včetně interval.cz) pomáhá k orientaci navigační pruh zobrazený někde v záhlaví stránky a ukazující, kde se ve struktuře webu právě nacházíme. Tyto pruhy jsou na velkých webech vesměs generovány serverovým skriptem z databáze. Na menším webu si pro stejnou práci můžeme vypomoci krátkým JavaScriptem.

Navigační pruh je v tomto příkladu generován pomocí několikařádkového JavaScriptu, který pro uložení dočasných informací používá cookies na straně klienta. Ze tohoto popisu hned vyplývá zásadní omezení skriptu, totiž že ne každému návštěvníkovi bude fungovat. Nelze proto na něm postavit navigaci ve stránkách, ale pouze použít jej jako vhodné doplnění orientačních informací všude tam, kde nemáme čas nebo technické možnosti vytvářet obdobnou navigaci generovanou z databáze.

Krátký příklad fiktivního webu o dopravních prostředcích najdete zde. Při listování stránkami je pod druhým nadpisem generován navigační pruh, zobrazující aktuální úroveň zanoření a případné odkazy na nadřízené úrovně.

Pro implementaci uvedeného příkladu je nutno jednak vytvořit sdílený .js soubor s obslužnými funkcemi, a za druhé na každé stránce zahrnuté do (vznešeně řečeno) navigačního systému zajistit jeho vložení (neboli českoanglicky: includování) do hlavičky stránky a zavolat jednu funkci z uvedeného souboru.

Začneme odprostřed, totiž vložením externího .js souboru do hlavičky stránky. To je triviální, jednořádková záležitost, která, pojmenujeme-li vložený soubor například nb.js, vypadá nějak takto (uvedený řádek se vkládá mezi značky HEAD):

Dále na každé stránce v místě, kde chceme mít zobrazen navigační pruh, zavoláme funkci NavBar. Ta především zobrazí kýžený navigační pruh, kromě toho také uloží pomocné informace do cookie. Popis funkce NavBar je uveden níže, nyní si ukážeme, jak vypadá její typické volání:

Parametry fukce mají (v pořadí odleva) tento význam:

• level .. číslo popisující úroveň zanoření (pro root je to 1). V uvedeném příkladu se tedy nacházíme na druhé podúrovni pod rootem,
• name .. jméno právě zobrazované stránky, tak jak se zobrazí v navigačním pruhu,
• url .. URL adresa právě zobrazené stránky, na kterou povede odkaz případně zobrazený v navigačním pruhu.

Uvedené tři parametry musíme ručně zeditovat pro každou stránku zvlášť. Týká se to především prvního parametru, úrovně zanoření. Zbylé dva parametry je možno v některých případěšch zautomatizovat (použitím aktuální URL, popřípadě titulku stránky) – prostředky na to JavaScript má, záleží ovšem také na struktuře konkrétního webu.

Nakonec je potřeba vytvořit již zmíněný soubor nb.js. Zde je výpis jeho celého obsahu, popis následuje pod tabulkou:

Objekt MyCookie slouží pro usnadnění některých rutinních operací s cookies. Protože jej používám v každém druhém „Intervalovském“ příkladu, nebudu vás jeho popisem znovu unavovat; zájemci si jej jistě snadno najdou, většina ostatních jej může přebrat „tak jak je“.

Nás bude zajímat chování funkce NavBar. Její parametry byly popsány výše, co se týče její práce, ta se sestává ze dvou kroků. V prvním jsou do cookie na straně klienta uloženy informace o aktuální stránce, tedy jejím názvu a URL. Tyto jsou ukládány do cookie s názvem NBnameX, potažmo NBurlX, kde X je úroveň aktuálního zanoření. Tím zajistíme, že pokud se v průběhu procházení webu náštěvník dostane na stejnou úroveň, ale v jiné větvi, je minulé nastavení pozice ve webu přepsáno aktuálním. V druhé části funkce (smyčka for), procházíme uložené úrovně zanoření od rootu až po aktuální úroveň a vypisujeme je v přijatelné formě do tabulky. Úrovně nižší než aktuální jsou vypsány jako hypertextové odkazy, pro aktuální úroveň nemá odkaz smysl, proto je vypsán pouze název aktuální stránky. Formátování výstupu nechť si každý doplní podle svého či zákazníkova vkusu. Cookies jsou ukládány s platností jeden den, předpokládám, že málokterý návštěvník na webu vydrží déle než 24 hodin „v jednom kuse“. Pokud takové návštěvníky máte, přijměte moji gratulaci a zvyšte poslední parametr ve volání MyCookie.Write z jednoho na více dní.

To je k navigačnímu pruhu 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.