O Internecie, oprogramowaniu oraz moich własnych małych projektach...
Blog > Komentarze do wpisu

Zaczaruj archiwum bloksa

Archiwum bloksa potrafi z biegiem czasu przybrać postać bardzo długiej listy. Sposób jego zaimplementowania sprawia jednak, iż jest to jedynie spis odnośników do kolejnych miesięcy naszej twórczości. Nie mamy tu możliwości zgrupowania wpisów w lata ani zminimalizowania długości tego spisu. Właśnie te niedogodności może pomóc, choć w części, wyeliminować przygotowany przez zemnie skrypt, który wspomagany przez CSS pozwala na otrzymanie, min. archiwum w postaci, w jakiej widzisz je na tym blogu.

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.

Wynik działania samego skryptu

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.

Archiwum w postaci rozwijanego menu

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.

poniedziałek, 05 lutego 2007, s.z.y.m.o.n
Tagi: blox

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Zwijane archiwum - lista lat z Najlepsze dodatki na bloga
  Po kilku latach prowadzenia bloga archiwum na boxie rozrasta się w bardzo długą listę. Jest prosty sposób, żeby temu zapobiec 8211 wystarczy listę miesięcy zamienić w listę lat. Oczywiście nie byłoby to takie proste, gdyby wcześniej nie zajęły ... »
Wysłany 2012/01/02 19:26:05
Komentarze
martuuha
2007/05/09 01:03:09
po dwóch latach się archiwum rozrosło monstrualnie.
i chciałam mieć takie sprytne.
i udało mi sie liste zrobic taką z wyszczególnieniem - ten skrypt.
ale chciałam takie ładne, kryte. i nie mam pojęcia co trzeba zrobić. czytam kolejny raz i nie rozumiem.
czy jak ładnie poproszę to jest szansa na wersję idiotoodporną?
pozdrawiam!
marta
-
2007/05/09 12:06:20
W kolejnych częściach jest opisane jak i co robić. Kliknij odsyłacz "Zaczaruj archiwum bloksa" w zakładkach z prawej w sekcji polecane wpisy - prowadzi do ostatniej części całego opisu.

Wydawało mi się, że dodałem tu linki do pozostałych części. Trzeba będzie to poprawić...
-
2007/12/10 18:52:40
to jakaś czarna magia! o czym Wy mówicie? ja tez chcę zwijać archiwum, ale jak to zrobić? hasła, które tu rzucacie to dla mnie matrix! krok po kroku proszę!!!
-
kobiece6na9
2008/01/02 21:23:15
zgadzam się z przedmówcą, dla kogoś, kto nie interesuje się informatyką - to czarna magia. Dla mnie to nie jest instrukcja krok po kroku, raczej bieg przez kałuże :) Zrobiłam pierwszą część, dodałam skrypty do zasobów i pola HTML, zapisałam zmiany i niestety czegoś po drodze widocznie nie zrobiłam, ponieważ nie zadziałało. Skoro więc nie mam wypunktowanych miesięcy, to nie mam co przechodzić do części drugiej? ;)))
-
s.z.y.m.o.n
2008/01/02 23:17:35
Nie jest to banalna rzecz, ale z pewnością warto się odrobinę wysilić. Przeczytajcie jeszcze raz powoli i uważnie instrukcję (cz. 2 można pominąć), a przy odrobinie samozaparcia powinno się udać.

@kobiece6na9:
Jest jakiś problem z dostępem do pliku ze skryptem - stąd problem. Spróbuj usunąć go z zasobów i dodać ponownie.
-
seboumi
2009/12/22 02:38:15
s.z.y.m.o.n. bawisz się w to jeszcze? Dawno temu bardzo mi tym wpisem pomogłeś, ale od tego czasu okazało się, że menu u mnie dobrze wygląda tylko pod IE. Pomożecie? Kombinuję, ale bez efektu. Pod FF i Chrome nie trzyma mi stylów...
1.lata zamiast blisko lewej krawędzi, są bardzo odsunięte
2.miesiące w rozwijanym boksie są bardzo odsunięte od krawędzi
3.poza tym nie wiem, jak zrobić wizualne przerwy pomiędzy latami
link do bloga
Skrypt ostatnie komentarze w nowej wersji
Po sporych perturbacjach skrypt wraca do życia. Teraz z prostym generatorem kodu do w klejenia na blogu!
Wszyskich zainteresowanych zapraszam do ponownej instalacji.
Czytaj dalej...
Promuj swojego bloksa
Czytelnicy mogą promować Twojego bloga umieszczając linki do notek w serwisach społecznościowych. Ułatw im to zadanie dodając na blogu listę odnośników, która tą czynność sprowadzi do jednego kliknięcia.
Czytaj dalej...