Sub-kategorie v XHTML a JS

MyEgo.cz

home foto blogy mywindows.cz kontakt

Sub-kategorie v XHTML a JS

Webdesign, CMS 07.11.04

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

  1. 1 llook 07.11.04, 03:11:16
    FB

    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 07.11.04, 03:11:58
    FB

    [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 07.11.04, 05:11:22
    FB

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

  4. 4 Ján "johno" Suchal 08.11.04, 12:11:30
    FB

    [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 08.11.04, 12:11:33
    FB

    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 08.11.04, 12:11:38
    FB

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

  7. 7 emilk 08.11.04, 12:11:43
    FB

    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 08.11.04, 12:11:46
    FB

    [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 08.11.04, 01:11:28
    FB

    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 08.11.04, 06:11:27
    FB

    [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.