testblog

Wpis ten stanowi pierwszy z serii kilku postów, w których mam zamiar przedstawić możliwość zmiany wyglądu archiwum bloksa przy wykorzystaniu napisanego przez zemnie skryptu oraz odrobiny czarów w CSS.

Skrypt i jego wykorzystanie

Co robi skrypt?

Skrypt przekształca strukturę archiwum na listę wypunktowaną. Domyślnie dokonuje on także achronologicznego sortowania elementów listy ze względu na rok, a następnie miesiąc. Efekt działania skryptu przedstawia rysunek 1.

Rys. 1. Wynik działania samego skryptu.

Przedstawiona na powyższym rysunku lista ma następującą strukturę:

<ul id="nav">
  <li> 2007
  <ul>
    <li>Luty</li>
    <li>Styczeń</li>
  </ul>
  </li>
</ul>

Wykorzystanie skryptu na bloksie

Pobierz plik blox.archmenu.js i dodaj do zasobów swojego bloga.

Jeżeli chcesz zmienić sposób sortowania lat, bądź miesięcy (lub obu) na chronologiczny, to zmień w pliku parametry wywołania funkcji listArchive() na false (1 parametr dla lat, a 2 dla miesięcy). Linia, w której należy wprowadzić zmiany znajduje się pod koniec pliku i jest dodatkowo oznaczona komentarzem.

Wywołanie skryptu sprowadza się do umieszczenia w polu na kod HTML następującego wpisu:

<script type="text/javascript" src="/resource/blox.archmenu.js"></script>

Ostylowanie archiwum

Najważniejsza funkcjonalność skryptu jest ukryta przed naszymi oczyma i ujawnia się dopiero przy modyfikacji jego wyglądu CSSem. Jeden z możliwych efektów końcowych, czyli archiwum w postaci rozwijanego menu, możesz zaobserwować na tym blogu.

Rys. 2. Archiwum w formie rozwijanego menu.

Uzyskanie dostępu do elementów archiwum w CSSie

Skrypt nadaję liście id="nav", zatem do jej poszczególnych fragmentów odwołamy się za pomocą następujących selektorów:

#nav {} - cała lista;
#nav li {} - etykiety lat (poprzez dziedziczenie także i miesięcy);
#nav li ul {} - lista zagnieżdżona, zawierająca miesiące;
#nav li ul li {} - pojedynczy miesiąc.

Substytut pseudo klasy hover dla IE

Uzyskanie bardziej skomplikowanych efektów, np. efektu rozwijanego menu, wymaga wykorzystania pseudo klasy hover. Niestety IE 6 (i starsze) obsługuje ją tylko dla odnośników. Rozwiązanie tego problemu zapewnia skrypt Suckerfish Dropdowns (jest już umieszczony w pliku blox.archmenu.js).

Dostęp do elementów wskazanych myszką w IE możliwy jest dzięki przypisaniu im przez skrypt klasy over. Przykładowy selektor dla pojedynczego miesiąca wskazanego myszką wygląda następująco:

#nav li ul li.over{}

O czym w kolejnych częściach

W kolejnym wpisie postaram się przybliżyć metodę uzyskania archiwum z ukrywaną listą miesięcy, która, jako prostsza w implementacji, powinna być bardziej zrozumiała dla osób mniej zaznajomionych z arkuszami CSS.
Ostatni odcinek serii będzie zawierał opis przygotowania archiwum w postaci rozwijanego menu, takiego jak na tym blogu.

Czytaj dalej część drugą oraz część trzecią opisu.