Přístupná navigace webu pomocí JavaScriptu!

MyEgo.cz

Přístupná navigace webu pomocí JavaScriptu!

Technologie 05.04.04

Za pomoci JavaScriptu je možno navrhnout dynamickou navigaci na webu, která je jak jednoduchá na vytvoření, tak přínosná pro čtenáře (například zvýrazněná aktivní položka menu), protože web jej nezahlcuje množstvím nevyžádaných informací (přitom si ovšem, pokud chce, dané informace rychle zobrazí). Kód je pochopitelně funkční v IE, Mozille i Opeře.

V případě, že je JavaScript vypnutý, jsou zobrazeny všechny položky, "rozbalené". Pokud je JavaScript povolen, je zobrazeno menu se zvýrazněnou aktivní položkou, a pouze daný, zvolený, blok textu, náležející k danému menu. Ostatní bloky jsou za pomoci display:none skryty. V tomto příkladu je použita jen jedna úroveň menu, není ovšem problém vytvářet i sub-menu.

Jak to funguje, pokud by jste si chtěli tento skript zařadit i na svoje stránky? Základem je funkce switchCells(), která jako parametr dostává:

currentitem - číslo divu a nadpisu h2, který má být aktuálně viditelný
itemtext - text v id divu
totalitems - celkový počet divů, prvků, které se přepínají, v daném bloku

S touto funkcí tak můžete přepínat neomezené množství bloků, u mě je to konkrétně:

statistika článků
statistika komentářů
blogroll
lokální a google hledání

Funkce switchCell():

function switchCell(currentitem,itemtext,totalitems){
  for (var i = 1; i<=Number(totalitems); i++){
    var item=String(itemtext)+String(i);
    if ( i != Number(currentitem) ){
      document.getElementById( item ).style.display="none";
      document.getElementById( item+"a" ).className="";
      document.getElementById( item+"h2") ).display="none";
      }
    } else {
      document.getElementById( item ).style.display="block";
      document.getElementById( item+"a" ).className="active";
      document.getElementById( item+"h2" ).style.display="none";
      }
    }
  }
}

Přepínací menu:

Abychom zachovali plnou přístupnost i při vypnutém JavaScriptu, je nutné přepínací menu vytvořit rovněž JavaScriptovým document.write(). Zde je příklad vytvoření bloku statistiky komentářů, se 3 celky (divy).

function commentStats(){
  document.write('<h2>Comments</h2>');
  document.write('<div id="navlist2">');
  document.write('<div><a id="commentstats1a" href="javascript:switchCell(1,'); 
  document.write("'commentstats'"); document.write(',3);">Hot topics</a></div>');
  document.write('<div><a id="commentstats2a" href="javascript:switchCell(2,'); 
  document.write("'commentstats'"); document.write(',3);">Latest comments</a></div>');
  document.write('<div><a id="commentstats3a" href="javascript:switchCell(3,'); 
  document.write("'commentstats'"); document.write(',3);">Most commented</a></div>');
  document.write('</div>');
}

Vlastní blok komentářů v XHTML:

Za tímto JavaScript kódem, již následují konkrétní 3 celky bloku komentářů v XHTML:

    <div id='commentstats1'>
      <h2 id='commentstats1h2'>Hot topics</h2>
      .... statistika ...
    </div>
    <div id='commentstats2'>
      <h2 id='commentstats2h2'>Latest comments</h2>
      .... statistika ...
    </div>
    <div id='commentstats3'>
      <h2 id='commentstats3h2'>Most commented</h2>
      .... statistika ...
    </div>

Povšimněte si, že id daného divu pro funkci GetElementById() má číslo 1 až 3, které následuje itemtext, toto číslo musí být vzestupné a sekvenční, tak je navržena funkce switchCell().

Přístupnost bez JavaScriptu:

Rovněž je nutno přiřadit id i nadpisu (H2), je to kvůli přístupnosti. Pokud má uživatel zapnutý JavaScript, vytvoří se mu nadpis H2 za pomocí funkce document.write(), a nadpis H2 v XHTML kódu je funkcí switchCell() skryt, pokud je JavaScript vypnutý, generovaný H2 nadpis zobrazen není, jen ten v XHTML, a celá statistika je tak kompletně přístupná ve svojí "rozbalené" podobě.

Default blok:

Na závěr je potřeba doplnit poslední věc, tedy zavolání funkce switchCell() při natažení stránky, pro nastavení výchozího celku bloku, který bude zobrazen při natažení stránky, a ostatní celky bloku (pokud má uživatel zapnutý JavaScript), budou skryty:

<body onload='switchCell(1,"commentstats",3);'>

Alternativou je samozřejmě i toto:

<script type='text/javascript'>  switchCell(1,"commentstats",3); </script>

Zvýraznění aktivní volby:

V JavaScriptu je rovněž definován className 'active', který je přiřazen právě zvolenému bodu menu. Je tak možné, za pomoci JavaScriptu a CSS, automaticky zvýraznit zvolený bod menu.

 border-bottom: 1px solid #666666; 
  border-top: 1px solid #666666;
  background-color: #fff;
}

Komentáře

1 David Špinar 05.04.04, 04:04:40

Dobrý den Radku, nemohu nikde najít ukázku Vámi popisovaného menu. Zapomněl jste uvést odkaz, nebo jsem něco přehlédl? Díky.
2 Radek Hulán 05.04.04, 04:04:56

[1] Davide, ta navigace a zobrazení vždy jen jedné části z bloku je použita v menu vlevo (Articles - Most Karma, Most Viewed, Latest, Comments - Hot, Latest, Most Commented) a taky přímo nad Vaším komentářem, přepínač Article, Local Search, Google Search ;)

Mě zde na blogu stačí jedna úrověň, ale není problém úrovně přidávat..

PS: pokud nemáte zapnutý JavaScript, menu se nezobrazí, a vše je "rozbaleno" ;)
3 Mirek 05.04.04, 09:04:47

Tak se na to dívám z linuxu a nějak se při tom přepínání objevuje v Mozille , Epiphany i Galeonu obsah tagů pre vlevo úplně mimo sloupec kam patří , nějaká drobná muška , po odkliknutí se to vrátí(v epiphany to blikalo i na onload) .
4 Radek Hulán 05.04.04, 09:04:59

[3] a nesouvisí to s tímto problémem?

http://myego.cz/item...
5 Mirek 05.04.04, 11:04:38

Já myslím že ne , už se mi to taky někde stalo , právě u pre
6 Mirek 05.04.04, 11:04:40

PS:na win mi to dělá taky , ale tak rychle , že jsem to nezaregistroval , už bych dal echo
7 Radek Hulán 05.04.04, 11:04:44

[6] vypadá to na bug Mozilly, kód, CSS, i JavaScript je plně validní.. (XHTML 1.0 STRICT)

viz: http://interforum.interval....
8 Mirek 06.04.04, 10:04:20

Možná zkuste předělat tohle http://www.sovavsiti.cz/css...
tak , aby se místo pre přepsal pro mozillu
tag xmp (xmp sice není validní , ale do validatoru to nepojede a mám dojem , že to bude fungovat)
9 Radek Hulán 13.04.04, 02:04:16

[8] je to bud Mozilly 1.6 a FF 0.8, bug s margin:auto a display:none, verze 1.7beta to již odstraňuje

Twitter	Facebook
Instagram	LinkedIn

Přístupná navigace webu pomocí JavaScriptu!

MyEgo.cz