_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

Tabok, fülek, bölcsebben

Munkám része, hogy külsős fejlesztők kódját ellenőrizzem minőségi szempontok alapján, mely kódok néha szépek, néha túlbonyolítottak de egészében véve tanulságosak, mert rámutatnak pár közös hiányosságra nem kódolásban hanem átgondoltságban.

Legjobb példa erre az oldalon elhelyezett, valamilyen módon tabulált adatszerkezet lekódolása. Nem Amazon féle tabos menüre gondolok itt, hanem inkább egy doboz, widget az oldalon, melynek a tartalmát vizuálisan tabokra osztották fel.

Gyakran kódolják a tab füleit és tartalmát logikailag külön, ami eléggé rossz. Vegyük ezt például:

<!-- rossz tabolás -->
<ul>
	<li class="tab1"><a href="#">Tab 1</a></li>
	<li class="tab2"><a href="#">Tab 2</a></li>
	<li class="tab3"><a href="#">Tab 3</a></li>
</ul>
<div class="tab1">Tab 1 tartalom</div>
<div class="tab2">Tab 2 tartalom</div>
<div class="tab3">Tab 3 tartalom</div>

Ez a megoldás szétválsztja a tab címét, kapcsolóját a tartalmától amihez tartozna, s így az információ az oldalon valami inkoherens masszaként lebeg, mely a vizuális értelmezésre vagy javascript kontrollokra hagyatkozik a működését illetőleg.

Miért ne tehetnénk a tartalmakat egymásba ágyazott listákba, vagy definíciós listákba (dl, dt, dd) egy logikusabb elrendezésért. A megjelenítés finomhangolása ugyan továbbra is a stíluslapoktól függ, a működése lehet css alapú vagy javascript hajtotta, de a kódszerkezet maga utal arra, mit is szeretnék valójában kihangsúlyozni.

<!-- egy jobb tabolás -->
<ul>
	<li class="tab1">
<h4>Tab 1</h4>
<div class="tab1">Tab 1 tartalom</div></li>
	<li class="tab2">
<h4>Tab 2</h4>
<div class="tab2">Tab 2 tartalom</div></li>
	<li class="tab3">
<h4>Tab 3</h4>
<div class="tab3">Tab 3 tartalom</div></li>
</ul>

Igy az üres linkeket is eldobhatjuk, a címsorokat kontrollnak formázhatjuk, és íme, van egy szép, akadálymentesebb és keresőbarátabb kódunk.

cimkék:

Hozzászólások, trackbackek [trackback url]

  1. Lackó 21:27 | 2008.08.07

    Az elgondolás tényleg jó, csak szerintem kivitelezhetetlen.
    Hogyan teszed egymás mellé (floattal) a 3 fület (esetünkben h4), ha közéjük beékelődik a tartalom?
    Például ha a középső fül az aktív, tehát csak a “tab_2″ div látszik, akkor a “tab_3″ h4-e a div alá kerül.

    Akár mennyire és rossz megoldás, muszáj külön választani a füleket a tartalomtól.

    Vagy csak én nem értem?
    Tudom régi bejegyzés már, de ha időd engedi, kérlek válaszolj.

Szólj hozzá







kategóriák


del.icio.us

  • No bookmarks avaliable.

epp olvasom

  • A Clash of Kings

    A Clash of Kings by George R.R. Martin

flickr

  • Tuomas Holopainen - the Imagineer
  • The Flock
  • Christmas Crow
  • Geek joy
  • Fast Food - extreme edition
  • Teide north side
  • Teide National Park
  • Genesis
  • Rado Cerix
  • werk - _nec
  • werk - Strati

back to index