MyEgo.cz Osobní webzine Radka Hulána
Webdesign, CMS Radek Hulán

Sub-kategorie v XHTML a JS

Doplňoval jsem včera sub-kategorie do BLOG:CMS, kvůli zpřehlednění větších webů, a narazil jsem na problém, jak řešit reprezentaci a formátování sub-kategorií v XHTML, a zároveň skrývání/odkrývání skupin v JavaScriptu.

Skoro automatické řešení je použít zde tagy ul, li, nicméně, nakonec se mi jako sémanticky správnější zdálo použití dl, dt, dd, navíc obaleno jedním div, kvůli formátování a XHTML validitě (a MSIE).

Tag dl se zde používá jako formátovací "obal" pro CSS pro skupinu, tag dt je název skupiny, a tagy dd jsou sub-kategorie zařazené v dané skupině. Vypadá to celé nějak takto:


 

  
Skupina 2

   
Kategorie 4

   
Kategorie 5

Je to řešení sémantické, XHTML validní, jednoduše nastylovatelné, a poskytující prostor i pro JavaScriptové skrývání/odkrývání skupin kategorií, třeba tímto jednoduchým skriptem:

// strom je zobrazen
var categoryhidden = false;
// schovat strom
function categoryfold(){
categoryhidden = true;
 var i=1;
 var ele;
 while (ele=document.getElementById('group'+i++)) 
  ele.style.display='none';
}
// rozbalit strom
function categoryexpand(){
 categoryhidden=false;
 var i=1;
 var ele;
 while (ele=document.getElementById('group'+i++)) 
  ele.style.display='block';
}
// prepnout strom
function categorytoogle(){
 if (categoryhidden)
  categoryexpand();
 else
  categoryfold();
}
// zobrazit jednu kategorii
function categoryswitch(j){
 if (categoryhidden) {
  categoryexpand();
  return;
 }
 var i=1;
 var ele;
 while (ele=document.getElementById('subcat'+i))
  if (i++==j) 
   ele.style.display='block'; 
  else 
   ele.style.display='none';
 categoryhidden=true;
}

Celé to řešení je vtipné v tom, že funguje na libovolné množství kategorií, ve chvíli kdy ele=document.getElementById('group'+i++) vrátí false, je jasné, že se jedná o poslední skupinu kategorií.

Řešení je implementováno v nejnovější verzi BLOG:CMS, jako plugin NP_SubCategories.php.

Je škoda, že zaostalý MSIE nepodporuje v CSS konstrukce následujícího typu, podobné věci by šlo stylovat v CSS mnohem lépe, bez divů, a rovněž zpracovávat bez hromady id identifikátorů pro JavaScript, jen pomocí DOMu…

div#subcat dl dt>a{color: black; display: block;}

Komentáře 10

  1. #1 llook

    Nevím, jestli podkategorii je správné vyjádřit jako definici termínu. Já tedy preferuji neseřazený seznam (ul). Seznam kategorií. Pokud má kategorie podkategorie, jsou tyto součástí nadřazené kategorie, a tak dál, pokud má podkategorie další podkategorie.

    Zajímalo by mě, jak (a zda) budou s použitím definičních seznamů (dl) sémanticky řešeny podkategorie podkategorií. Snad ne takhle:
    <dl>
    <dt>kategorie</dt>
    <dd><dl><dt>podkategorie</dt>
    <dd>podkategorie podkategorie</dd>
    </dl>
    </dd>
    </dl>

  2. #2 Radek Hulán autor webu ▲10 ▼0

    [1] ale já tu neřeším neexistující problém zvaný "co by, kdyby", sub-kategorie subkategorií prostě nejsou, a pokud budou, zvolí se ideální řešení 😉

  3. #3 Zdenek Merta

    Mohu se zeptat v cem je semanticky lepsi pouziti definice terminu namisto seznamu?

  4. #4 Ján "johno" Suchal

    [3] Sémanticky to určite nie je lepšie ale aspoň to nerobí bordel v IE5 s marginmi a paddingami. Kto to skúšal nulovať vie o čom hovorím. IE5 je ale história takže ja by som tiež použil radšej zoznam ako definition list.

  5. #5 Ján "johno" Suchal

    Hmm, Radku a na čo ako má slúžiť to schovávanie a rozbalovanie keď sa stav ani nezapamätáva v cookies? To je len tak keď sa mi zachce klikať?

  6. #6 noname

    no malinko se to podobá tomu co mám na kehilaprag.cz, ale bez těch divů

  7. #7 emilk

    to, ze elementum prirazujete idecka, abyste je mohl skriptovat a tim ve finale emulovat onen elegantni css selector, ktery ovsem v ie nefunguje
    - to se nemusi delat rucne, staci na to napsat skript. jeden takovy vhodny od pana deana

    dela presne to, co vy rucne, projde css soubor, nalezne pravidla, ktera ie neumi, najde elementy, kterych se to tyka, doda jim idecka a pozadovane styly, pripadne handler, kdyz chcete hover nad necim jinym nez a

    smena je nasledujici:
    programatoruv komfort, mensi a prehledny kod za cenu dodatecne prace na klientske strane (ale delaji to stroje, koho to pali 🙂
    kdo nema zapnuty js, tak je na tom spatne, zle 🙁
    ale ten si muze vypnout i css a videt unordered list
    (ktery se na to semanticky nejlepe hodi) v cele sve rozvinute a hierarchicke krase

  8. #8 Radek Hulán autor webu ▲10 ▼0

    [7] IE7 znám, dobře, a považuji jej za špatné řešení.. Místo pár ID navíc tam doplňovat 100KB behaviours, to je... nesmysl

  9. #9 emilk

    10kB core + 8kB css2
    pripadne +2kB css3

    to je jak jeden obrazek v jpg
    a zustane to v cache

    az se MS pochlapi, a udela poradnej browser nebo koupi do zakladni distribuce operu, tak to zrusite a mate kod, kde je radost delat upravi podle prani zakaznika 🙂

  10. #10 Vašek

    [4] jo, asi je menší problém ostylovat dl-dt-dd stejně v IE a mozille než ul-li. Škoda, že se do specifikací html nedostal nadpis seznamu lh. Hodil by se.