Diabeł tkwi w szczegółach

Przedstawmy zatem zarys tego sposobu: za pomocą podstawowych metod DOM, wkleimy tabele tam, gdzie są potrzebne. W naszym przypadku, dla zobrazowania tej metody, skorzystamy z tego przykładu.

Najpierw, tworzymy kod strukturalny:

• <div id="Page">
• <h1 class="Title">Nazwa firmy</h1>
• <ul class="Tools">
• <li>
• <a href="#">Home</a>
• </li>
• <li>
• <a href="#">Site Map</a>
• </li>
• <li>
• <a href="#">Szukaj</a>
• </li>
• <li>
• <a href="#">Kontakt</a>
• </li>
• </ul>
• <div class="Content">
• <p>
• Lorem ipsum etc …
• </p>
• </div>
• <ul class="Links">
• <li>
• <a href="#">Link</a>
• </li>
• <li>
• <a href="#">Jakiś Link</a>
• </li>
• <li>
• <a href="#">Inny Link</a>
• </li>
• <li>
• <a href="#">Link, po prostu Link</a>
• </li>
• </ul>
• </div>

Następnie, wklejamy naszą tabelę:

• var page = document.getElementById("Page");
• var pageItems = new ClassNameBag(page);
• var pageTable = new LayoutTable(2, 2);
• pageTable.appendChild(1, 1, pageItems.Title);
• pageTable.appendChild(2, 1, pageItems.Tools);
• pageTable.appendChild(1, 2, pageItems.Content);
• pageTable.appendChild(2, 2, pageItems.Links);
• page.appendChild(pageTable.node);

A na koniec, korzystamy z CSS by uzupełnić kompozycję. Wygląda prosto?

Prześledźmy zatem, punkt po punkcie, co robimy. Linia 1 kodu jest chyba dość oczywista: wydobywamy z kodu element o id “Page”.

Linia 2 to tworzenie ClassNameBag, które tak naprawdę nie ma znaczącego wpływu na przedstawianą technikę ale jest użyteczne i ułatwia panowanie nad wszystkim. Tworzy obiekt dla każdego elementu potomnego, który następnie można łatwo wywołać. Dajmy na to, możemy dostać się do <ul class="Links"> za pomocą wskaźnika pageItems.Links.

Linia 3 to linia gdzie zaczyna się magia: inicjowany jest nowy obiekt nazwany LayoutTable. LayoutTable “zawiera” tabelę “do wstrzyknięcia”. Jego składnia wygląda następująco: LayoutTable(ilośćKolumn, ilośćWierszy [, nazwaKlasy]). ilośćKolumn i ilośćWierszy jest oczywiste - ustala, ile wierszy i kolumn będzie w naszej “tabeli”. nazwaKlasy to parametr opcjonalny, który pozwala na dodanie dodatkowej klasy dla tworzonej tabeli (domyślnie ma “Layout”).

appendChild(kolumna, wiersz, wskaźnik) jest podobne do typowej metody element.appendChild z wyjątkiem tego, że ustala dokładne położenie elementu w tabeli. Linie od 4 do 7 rozkładają elementy na swoich pozycjach w dwuwymiarowej siatce.

Na końcu, w linii 8, “doklejamy” naszą wirtualną tabelę z powrotem do elementu Page. Element LayoutTable zawiera jeden wskaźnik, który jest zarazem wkaźnikiem DOM tabeli zbudowanej z powyższego kodu. W tym miejscu wklejanie tabeli jest zakończone, staje się ona częścią DOM strony.

By ułatwić stylowanie, każdy wiersz posiada nazwę klasy “ry”, gdzie r = row a y to pozycja w wierszu (”r1″ i “r2″ w naszym przykładzie), każda kolumna posiada podobną klasę “cy” (”c1″ i “c2″ u nas). Ta prosta sztuczka ułatwia nam kontrolę nad prezentacją naszej tabeli. Na przykład, “table.Layout tr.r1″ wybierze cały wiersz “r1″, “table.Layout td.c2″ wybierze całą kolumnę 1 a “table.Layout tr.r1 td.c2″ wybierze tylko drugą kolumnę pierwszego wiersza.

Nagle CSS i tabele znów są przyjaciółmi. Nemezys strukturalnego kodu przechodzi na stronę dobra i ratuje dzień. Granic nie ma, problemy są rozwiązane, czas na happy end - łzy wzruszenia spływają po policzkach co bardziej emocjonalnych czytelników.

Podsumowanie

Tak jak każda metoda, która wydaje się być zbyt genialna by była prawdziwa, ta posiada swoje słabe strony:

• jako, że jest to metoda client-side, nie mamy pojęcia czy zadziała u każdego - część przeglądarek sobie poradzi, część zapewne nie.
• metoda ta modyfikuje drzewo DOM, zatem trzeba wziąć to pod uwagę w projektach, w których już modyfikujemy DOM strony.
• używanie tabel do tworzenia layoutu, przy zachowaniu czystości kodu jest uzależniające i może prowadzić do niepohamowanych wybuchów radości i miłości do wszystkiego i wszystkich, oraz potrzeby ucałowania i przytulenia każdego znajdujacego się w pobliżu.

No dobrze, może z wyjątkiem tego ostatniego.