Azonban mielőtt belekezdenénk a tartalomjegyzék-készítő program írásába, egy kicsit térjünk vissza a múlt havi leckékhez. A HTML-táblázatokkal foglalkozó óránk kicsit hosszúra nyúlt – mondhatni „belelógott a szünetbe” –, ám így sem sikerült teljes mértékben a téma végére érnünk. A Weboldalkészítő suli 15. leckéjében megnéztük, milyen elemekből épülnek fel a HTML-táblázatok, majd miután egy program segítségével szép zebracsíkosra festettük tábláinkat, azt is lehetővé tettük, hogy oldalaink látogatói bármelyik oszlop szerint rendezni tudják a táblákat – azok újbóli letöltése nélkül. Arra azonban nem maradt már hely és idő, hogy azt is megnézzük, hogyan tudjuk ezeket a programokat például a konferenciánk oldalán hasznosítani.
A résztvevők táblázatának HTML-kódja természetesen semmilyen extra kódot nem tartalmaz
Vegyük például a konferenciára jelentkező előadók és részvevők listáját. Egy nagyon egyszerű táblázatban felsoroljuk a regisztrált résztvevők titulusát, vezeték- és keresztnevét, valamint az országot és a céget, ahonnan érkeznek. A táblázat felépítése a lehető legegyszerűbb: a ‹table› elemhez hozzáadunk egy zebra és resztvevok osztályt (utóbbit azért, hogy másfajta színezést tudjunk használni), valamint természetesen egy sortable azonosítót, hogy programunk tudja, rendezhetővé kell alakítani. Ezután a táblafejben felsoroljuk az oszlopneveket, majd az egyetlen táblatestben szépen sorban felsoroljuk a már regisztrált részvevők megfelelő adatait.
Néhány új cellastílusra is szükségünk lesz a résztvevők listájához
A zebra osztályú táblákat csíkozó és a sortable azonosító táblák fejlécébe a linkeket elhelyező programrészekhez hozzá sem kell nyúlni, azok kiválóan teszik dolgukat a résztvevők listájának tábláján is. Mi is csak annyit egyszerűsítettünk a táblacsíkozó cikluson és a sortTable függvényen, hogy csak a legelső táblatestet veszik figyelembe – hiszen jelen esetben nincs is több –, és ha sokkal nem is, de így valamennyivel rövidebb és gyorsabb lesz a JavaScript programunk.
JavaScript nélkül semmi változást nem látunk a HTML-kódban – és a táblázat is elég egyszerűen néz ki
Inicializáló szoftverünket azonban kissé kibővítettük, hogy egy kicsit csinosabbá tegyük listánkat. Először is ellenőrizzük, hogy az oldal ‹body›-jának azonosítója resztvevok-e, és ha igen, akkor a lapon található-e egy rendezhető tábla. Ha a válasz mindkét kérdésünkre igen volt, akkor ennek a táblának végigmegyünk minden során, és megnézzük, hogy a negyedik oszlopban (ami a nullától számolva a harmadik!) milyen országnév szerepel. Az országnevet megkeressük a – külön JavaScript állományban definiált – country tömbben, és ha megtaláljuk, akkor a cocode változóban visszaadjuk az ország kétbetűs kódját (ha nem találjuk, akkor marad empty), végül az országnév elé beillesztjük megfelelő GIF képet, ami természetesen az ország zászlaját tartalmazza. (A világ 246 országának nevét és kódját tartalmazó JavaScript fájl, és a 246 zászló GIF formátumban is megtalálható lemezmellékletünkön.)
Megkeressük az országkódokat, és az ország neve elé beszúrunk egy-egy képet
Mint említettük, a sortTable függvény annyival lett egyszerűbb, hogy nem az összes tBodiest rendezzük le, csak a tBodies[0]-t, vagyis az első és egyetlen táblatestünket. Ugyanakkor a rendezést segítő sortFn függvény jelentős átalakuláson ment keresztül, hiszen most nem kell foglalkozunk a számok visszaalakításával, „csak” annyi a dolgunk, hogy amennyiben a 4. oszlop szerint rendezünk, akkor figyelmen kívül hagyjuk a zászló képét (különben nem országnév, hanem országkód szerint történne a rendezés). Ezért a cella HTML-kódjában megkeressük a „záró kacsacsőrt”, és csak az utána jövő szöveggel foglalkozunk: substr(a[3].value.indexOf("›") + 2, 99).
A rendezést segítő sortFn-nek csak a zászlóképek figyelmen kívül hagyásával kell foglalkoznia
Ha eddig nem tettük volna, akkor még hozzuk létre a lista kinézetéért felelős stíluselemeket, vagyis a táblafej és a táblatest celláinak (miután a táblatestben nincsen ‹th›, így a table.resztvevok thead th helyett elegendő a table.resztvevok th jelzés is), a táblafejben lévő linkek (főként a növekvő és csökkenő sorrendet jelző linkek), valamint a páros, a páratlan és az aktív sorok hátterének színét meghatározó stílusdefiníciókat.
Ha mindezekkel megvagyunk, akkor már tényleg nincs más dolgunk, mint ellenőrizni, hogy az országnevek előtt megjelennek-e a zászlók (például nem felejtettük-e el a fejben csatolni a countries.js-t), és valóban bármelyik oszlop szerint tudjuk-e rendezni táblánkat.
A táblafej celláiban megjelennek a linkek, az országnevek előtt pedig a zászlók képei
Beszúrás -› Hivatkozás -› Tartalomjegyzék
A szövegszerkesztő-tanfolyamokon rendszeresen vissza-visszatérő kérdés, hogy mi értelme van a stílusoknak, mennyivel egyszerűbb csak simán megformázni az egyes bekezdéseket, helyben megadni, hogy milyen betűtípussal, -stílussal és -mérettel jelenjenek meg az egyes részek, ahogyan a címek és a folyószöveg közti távolságot is sokkal egyszerűbb néhány [Enter] leütésével beállítani. Ilyenkor az előadók többnyire elmagyarázzák, hogy az egy-két oldalas anyagok esetében ez valóban még csak-csak elmegy, de egy tizenoldalas, esetleg több száz lapos kiadvány esetében már egyáltalán nincs így – és ilyenkor szokott az is előjönni, hogy mennyivel egyszerűbb a megfelelően jelzett címsorok segítségével automatikusan elkészíteni a dokumentum tartalomjegyzékét.
Bízunk benne, hogy a Weboldalkészítő suli hallgatóinak nem kell részletesen elmagyarázni, hogy miért is jó, ha a HTML-dokumentumokban az egyes szövegrészeket a megfelelő címkékkel látjuk el. Először is ugye így formázhatjuk a stíluslapokkal szépen és egységesen honlapjaink oldalait. Másodszor, mint azt látni fogjuk, a szövegszerkesztőkhöz hasonlóan, a címsorok alapján mi is készíthetünk automatikusan tartalomjegyzékeket – és az sem utolsó szempont, hogy egy szépen felépített oldalon például a felolvasó szoftvereket használók is könnyebben eligazodnak, mintha csak abból derülne ki, hogy címsorról van szó, hogy a rövid szöveg nagyobb, félkövér betűkkel jelenik meg.
A tartalomjegyzéknek csak a helye van meg – és az is csak a HTML-kódban látszik, az oldalon nem
Valamelyik korábbi oldalunkat alapul véve hozzunk létre egy új dokumentumot, amely ‹body› elemének adjuk a cikkek azonosítót – hogy tudjuk, olyan oldalról van szó, amelyen egy cikk található –, és távolítsuk el belőle a bal_panel és jobb_panel azonosítójú ‹div› elemeket teljes egészében. A „menü és egyebek” megjegyzés alá hozzunk létre egy új, egyelőre teljesen üres ‹div›-et, aminek adjuk a tartalom nevet (‹div id="tartalom"›‹/div›). Miután vannak olyan ellenőrző programok, amelyek nem szeretik az ilyen üres elemeket, ezért esetleg elhelyezhetünk benne egy nem törhető szóközt is, de ez nem igazán fontos. A tartalomhoz is egy új ‹div› kerül, méghozzá cikk azonosítóval, azonban ez természetesen nem marad üresen, ide kerül a lényeg, a hosszabb írás, ami tartalmazhat mindenféle HTML-elemet (képet, felsorolást, táblázatot stb.), de ami nagyon fontos, hogy megfelelő címsorelemekkel (‹h1›...‹h9›) tagoljuk az egyes részeket.
Ahhoz, hogy mindezek jól nézzenek ki, hozzuk létre valamennyi szükséges stíluselemet a CSS-állományban. Nagyon fontos, hogy a cikk ‹div› alapértelmezés szerint töltse ki a kozep ‹div›-et teljes szélességében, hiszen ha a JavaScript le van tiltva a böngészőben, akkor teljesen felesleges a tartalomjegyzéknek helyet hagynunk. Ha ezzel megvagyunk, ellenőrizzük, hogy a hosszú írás megfelelően néz-e ki az oldalon, minden elemhez létrehoztuk-e a szükséges stíluselemet.
Létrehozzuk a tartalomjegyzéket, helyet csinálunk neki, és még a címsorokat is ellátjuk egyedi azonosítókkal
Mindezeket követően nekikezdhetünk oldalinicializáló programunk kibővítéséhez. Először is megnézzük, hogy a document.body értéke egyenlő-e „cikkek”-kel. Ha igen, akkor toc néven hivatkozunk a tartalom, art néven pedig a cikk azonosítóval ellátott elemekre, amelyekről egyébként tudjuk, hogy ‹div›-ek. Ha a HTML-ben megtalálható mindkét elem, vagyis egyik objektumunk sem null (azaz a toc && art kifejezés igazat ad vissza), akkor nekikezdhetünk a munkának, vagyis a tartalomjegyzék létrehozásának.
Először is létrehozunk egy új felsorolást tocList néven (207. sor) és egy tocLine változót, amiben a tartalomjegyzék sorait fogjuk számolni. Ezt követően egy kis helyet csinálunk a tartalomjegyzékünknek a cikk bal oldalán (211–214. sorok). A toc ‹div› szélességét beállítjuk 210 pixelre, és adunk neki egy 6 pixeles belső eltartást, míg a most art névre hallgató ‹div›-nek lecsökkentjük a szélességét és megnöveljük a bal oldali margóját, hogy elférjen mellette a tartalomjegyzék (hasonlóan a menühöz a többi oldalon).
Ha most megnézzük az oldalunkat, és azon nemcsak azt látjuk, hogy a cikk bal oldalán megjelent egy üres sáv, hanem a cikk egy kicsit lejjebb is ugrott, akkor szinte biztos, hogy a tartalom ‹div›-nek elfelejtettük beállítani azt, hogy balról „lebegjen” (float: left;).
A cikk összehúzza magát, hogy helye legyen a tartalomjegyzéknek, és megjelennek a címsorok azonosítói is
Mivel úgy elegáns, hogy fel is írjuk, hogy ez a tartalomjegyzék, ezért létrehozunk egy új első szintű címsor elemet (216. sor), abba beleírjuk, hogy „Tartalom” (217. sor), majd beleillesztjük a toc ‹div›-be (218. sor).
Miután most már tényleg készen vagyunk minden előkészülettel, jöhet a lényeg, vagyis maga a tartalomjegyzék. Ehhez először is egy tömbbe betöltjük az artnak elnevezett – vagyis a HTML-ben cikk azonosítójú – ‹div› valamennyi elemét (220. sor), majd szépen egyesével elkezdjük végignézni, az összeset (221–231. sorok). A nodeName változóba betöltjük az aktuális elem típusát kisbetűssé alakítva (222. sor), majd megnézzük, hogy ez nem h1...h4-e (223. sor) – nézhetnénk tovább is, de ritkán használunk ilyen mélységű tagolást. Ha igen, akkor létrehozunk egy új ‹li› elemet. (224. sor, majd belehelyezünk egy linket, ami az aktuális dokumentum _toc# nevű pontjára mutat. A kettőskereszt helyén folyamatos sorszám van, amit a tocLine-ban számolunk, a szövege pedig megegyezik az adott címsor szövegével.) Nagyon fontos, hogy a két pluszjel a tocLine előtt legyen, ugyanis így a JavaScript előbb ad hozzá egyet, és csak utána használja fel a változó értékét. Vagyis már a legelső esetben is egyet fog beszúrni a linkbe, hiszen előbb ad hozzá a kezdeti nullához egyet, és csak utána fogja a változót felhasználni a link összeállításához.
Az aktuális ‹li›-hez egy osztályt is hozzáadunk, méghozzá a toclevel mögé odaillesztjük a címsor szintjét (226. sor) – vagyis az összes ‹h1›-nél toclevel1, ‹h2›-nél toclevel2 stb. lesz az osztálynév –, majd ezt az elemet felfűzzük a 207. sorban létrehozott tocList lista végére (227. sor), végül az aktuális címsor elemhez hozzáadjuk azt az azonosítót, amire a korábban létrehozott link hivatkozik (229. sor). (A ‹a href=”#ide”›link‹/a› elemre kattintva nemcsak az ‹a name="ide"›‹/a› módon névvel ellátott pontra, hanem a ‹h1 id=”ide”›címsor‹/h1› helyre is elugranak a böngészők.)
A cikk tartalomjegyzéke nem más, mint egy szép hosszú lista sok-sok linkkel
Miután végignéztük az art ‹div› valamennyi elemét, nincs más dolgunk, mint a tocList ‹ul›-listát hozzáadni a toc, vagyis tartalom azonosítójú ‹div›-hez (232. sor) – és ezzel el is készült cikkünk tartalomjegyzéke. Ezen még annyit érdemes csinosítanunk, hogy a toclevel1...toclevel4 osztályokhoz a CSS-ben fokozatosan növekedő padding-left értékeket rendelünk, hogy a dokumentumstruktúra már a tartalomjegyzéken is látszódjon.
Görgetés helyett
Hasonló megoldást használhatunk akkor is, amikor az oldalon – például az egyszerűbb áttekinthetőség miatt – mindig csak a dokumentum egy részét szeretnénk megmutatni. Konferenciánk esetében nézzük például a tervezett programot.
Egy mini tartalomjegyzéket készítünk a „fülekből”
Oldalunk jobb oldali paneljében mondjuk táblázatos formában elkészítjük a konferenciát megelőző „ismerkedési nap” és a konferencia tartalmi részét adó két nap programját. Ez esetben táblázatunkat csak „vertikálisan tagoljuk”, vagyis nem lesz szükségünk táblafejre és táblatestre, egyszerűen a sorok első cellájába (‹th›) az időpont, a másodikba (‹td›) pedig az akkorra tervezett program kerül. Azért, hogy kicsit jobban tagoljuk az oldalt – de legfőképpen azért, hogy a későbbiekben leegyszerűsítsük a saját dolgunkat –, az egyes napokat elkülönítjük, méghozzá úgy, hogy mindegyiket külön nap osztályú ‹div›-ekbe „csomagoljuk”, és a táblázatok fölé egy második szintű címsorba kiírjuk a napot is (azért második szintűbe, mert az első szint az oldal címe lett). Ezenkívül még előkészítés gyanánt annyit teszünk, hogy az első nap ‹div›-je fölé – vagyis a cím alá – létrehozunk egy üres, navigator azonosítójú ‹div›-et. Az oldalt mindenki ízlés szerint formázhatja, például a ‹th›-knak azonos szélességet megadva a három táblázat oszlopai szépen egymás alá kerülnek.
Csak az aktuális oldal látszódjék, a többit eltüntetjük
Ha mindezzel megvagyunk, jöhet a tartalomjegyzéknél bevált eljárás: ellenőrizzük, hogy van-e megfelelő, ez esetben navigator azonosítóval ellátott elemünk (157–158. sor), létrehozunk egy listát (160. sor), amibe a ‹h2› címsorokra mutató linkeket teszünk (166–170. sor). Mindezeket azonban egy kicsit megfűszerezzük azzal, hogy a navigációs linket „felülbíráljuk” egy, a showTab függvényre mutató eseménnyel (169. sor), és az elsőt leszámítva eltüntetjük a napok ‹div›-jeit – a címsor szülője a ‹div›, ezért kell a 175. sorban a parentNode (172–177. sorok). A 180. sorban nem véletlenül került idézőjelek közé a nulla, hiszen a későbbiekben teljesen feleslegesen kellene állandóan alakítgatnunk a fülek azonosítóinak típusát számról szöveggé, majd vissza.
Csak a kiválasztott nap div-je látszik, a többit addig láthatatlanná tesszük
Maga a showTab függvény sem csinál semmi ördöngöset, mindössze az kavar be egy kicsit, hogy a címsorokra hivatkoztunk, és ezért mindig azok szülőit (parentNode) kell megjelenítenünk vagy eltüntetnünk.
A funkció végén lévő blur metódussal pedig még arról is gondoskodunk, hogy az aktuális „fülön” ne maradjon ott az a keret, amit egyes böngészők az aktív elem jelölésére használnak.
Mindig csak a kijelölt nap programja fog látszódni, így áttekinthetőbb lesz az oldal
***
Cikkünk példái, köztük a teljes Lorem Ipsum webhely aktuális kódja letölthető innen.
