Lapozó HTML kódja

A lapozás jellemző eleme a különböző webalkalmazásoknak, azonban így is túl sok rossz megoldást láttam már. A Woork bejegyzése (Perfect pagination style using CSS) ezt a kérdést járja körül. Én is.

Nem fogom az ott leírtakat elismételni, így mindenképpen ajánlom az ottani példák és megoldások elolvasását. Az általam preferált HTML kódot szeretném bemutatni, és leírni, hogy miért gondolom jó megoldásnak:

<ul class="pagination">
  <li class="previous off" rel="previous">« Previous</li>
  <li class="active">1</li>
  <li><a href="?page=2">2</a></li>
  <li><a href="?page=3">3</a></li>
  <li><a href="?page=4">4</a></li>
  <li><a href="?page=5">5</a></li>
  <li><a href="?page=6">6</a></li>
  <li><a href="?page=7">7</a></li>
  <li class="next" rel="next"><a href="?page=2">Next »</a></li>
</ul>

Egyrészt a lehetséges oldalak felsorolása listaszerű tartalom, másrészt a “hagyományos” megoldást, a táblázatot nem szeressük layoutra használni, harmadrészt span-okban ne is gondolkodjunk, mivel a felolvasó szoftverek állítólag nem igazán különítik el egymástól az így egymás után kerülő elemeket, megnehezítve a navigációt (igen, a Miner.hu lapozója több szempontból is rossz példa – az így maradt tipikus esete). Ráadásul egy ilyen lapozó CSS nélkül is átláthatóan, jól néz ki.

Aminek a megjelenítését meg kell oldanunk egy ilyen lapozónál, az az előző oldal, lehetséges oldalak és a következő oldal megjelenítése. Az éppen aktuális oldalt mindenképpen ki kell emelnünk, ízléstől függ, hogy azt is meghagyjuk-e linknek, vagy pedig nem. Akkor célszerű, ha több megjelenítése is lehet egy konkrét találati oldalnak, és mintegy “reset” funkciót lát el az aktuális oldalra kattintás. Ugyanígy az előző oldal az első oldalon ne legyen link, a következő oldal az utolsó oldalon ne legyen link, mert nem sok értelme van a dolognak. Itt is ízlés kérdése lehet, hogy ilyenkor megjelenítsük-e egyáltalán, vagy elhagyjuk, tán a “szűrkítve” meghagyás a jobb a konzisztens megjelenés szempontjából. A lapozott tartalomtól függően lehet “körbelapozást” csinálni, vagyis hogy az első oldalon az előző linkje az utolsó oldalra visz, ennek akkor van értelme, mikor várhatóan értelmes tartalmak találhatóak meg az utolsó oldalon is (azaz nem relevancia szerűen kapcsolódnak az oldalak, mindegyik ugyanolyan értelmes tartalmat kínál, vö.: cikkek lapozója vs. kereső lapozója).

A felsorolt oldalszámoknál is sokféle stratégiát lehet követni. Ha van, akkor mindig jelenítsük meg az előző és következő két-három oldalnak is a sorszámát (avagy ne 6 következő, 0 előző oldal látszódjon), az aktuális oldal legyen célszerűen középen. Ezeken kívül, szintén az adott tartalomtól függően megjeleníthetünk távolabbi oldalakat is. Ez akkor lehet jó, ha mondjuk dátum szerint listázunk elemeket, és úgy szeretne gyorsan eljutni valaki egy adott dátumtartományhoz, hogy nem tudja, melyik oldal fele lehet, és nagyokat ugrálva akar eljutni oda. Ha sokszor fordulhat elő, hogy egy adott konkrét oldalra szeretne ugrani valaki, akkor kitehetünk egy “ugrás egy adott oldalra” linket is, ahol JavaScriptből megkérdezzük az oldal sorszámát (vagy input mezőt jelenítünk meg erre a célra, vagy egy prompt() függvényt hívunk meg), majd az adott oldalra dobjuk látogatónkat. Hányszor írtad már át URL-ben az oldal sorszámát? Még mindig a gyors navigációhoz kapcsolódva, felmerülhet az első és az utolsó oldal kiemelése is – itt is az alkalmazás határozza meg, hogy van-e értelme ennek.

Kicsit a mikroformátumokról. Egyes böngésző kiterjesztések már támogatják a dolgot, és ki tudja, hogy a jövőben mi fogja támogatni, jelöljük meg hát mi is az előző és következő (akár az első és utolsó) odalakat mikroformátum módra, gépek számára érthetően. Ehhez rel=”previous” és rel=”next” részeket írjuk az előző és következő linkekhez (és a rel=”start” és rel=”end” részeket az első és utolsó oldalra mutatókhoz).

Végül nézzük az egyes elemekhez rendelt class-okat. Az előző és következő elemet jelöljük meg “previous” és “next” class-szal, így külön megjelenést tudunk adni nekik, akár kitolva balra és jobbra oldalra ezeket a linkeket, akár másmilyen formában. A sima oldal linkeket felesleges külön class-okkal jelölni. A nem aktív linkeket, elemeket hogy ha “off” class-szal jelöljük, akkor az “off” osztályhoz tudunk az inaktivitást jelző stílust rendelni (pl. szürke), egységesen, tehát nem kell külön definiálni a elemenként. Igen, egy HTML elemhez szóközzel elválasztva több osztályt is adhatunk, és ez teljesen szabványos, minden böngészőben működő megoldás!

Gondolkodjunk még el azon, hogy a tartalom után megjelenített lapozó nem jönne-e jól a tartalom előtt is, és ha igen, akkor ne felejtsük el oda is kirakni.

Azt hiszem nem hagytam ki semmit. Vagy mégis?