KosciaKowy blog

Podczas przygotowywania nowego szablonu dla mojego bloga natrafiłem na problem z archiwum i zakładkami - zajmowały zdecydowanie za dużo miejsca. Rozwiązanie było tylko jedno - użyć skryptu pozwalającego na ich zwijanie i rozwijanie. Gotowe rozwiązania (ich listę można znaleźć na końcu wpisu) mi nie odpowiadały i postanowiłem napisać coś swojego. A jako, że nie lubię wyważać otwartych drzwi skorzystałem z biblioteki jQuery, dzięki której bardzo łatwo można dodać na stronie odrobinę magii.

Możliwości

Efekty działania skryptu można podziwiać u mnie na blogu. Po załadowaniu grupuje archiwum latami i pozostawia rozwinięty jedynie rok bieżący.

Kliknięcie na rok rozwija / zwija listę miesięcy. Na podobnej zasadzie można też zwijać i rozwijać wybrane foldery zakładek.

Jako "gratis" dorzucam jeszcze wyróżnianie komentarzy autora.

Instrukcja obslugi

1. Pobieramy skrypt blox_zwijarka_by_KosciaK.js i dodajemy do plików na swoim blogu (Notki → Pliki → Nowy plik)

2. Wstawiamy do pola na kod HTML (Ustawienia → Boczna szpalta) następujący fragment:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script type="text/javascript" src="/resource/blox_zwijarka_by_KosciaK.js"></script>

Teoretycznie biblioteka jQuery na serwerach Google powinna być zawsze dostępna. Jeśli jednak wolimy mieć wszystko u siebie zawsze możemy pobrać jquery.min.js (wymagane jest jQuery w wersji 1.3.x), wstawić do zasobów bloga i zamienić pierwszą linię na:

<script type="text/javascript" src="/resource/jquery.min.js"></script> 
<script type="text/javascript" src="/resource/blox_zwijarka_by_KosciaK.js"></script>

3. Pora na konfigurację. W polu na kod HTML za wstawionymi powyższymi liniami dodajemy:

<script type="text/javascript">
zwijaj = ['FOLDER1', 'FOLDER2'];
autor = 'AUTOR';
</script>

Zamiast AUTOR wpisujemy nasz bloxowy login. W miejsce ['FOLDER1', 'FOLDER2'] wpisujemy nazwy folderów zakładek, które chcemy automatycznie zwinąć (ważna jest wielkość liter!). Na przykład u mnie całość będzie wyglądać w ten sposób:

<script type="text/javascript" src="/resource/jquery.min.js"></script> 
<script type="text/javascript" src="/resource/blox_zwijarka_by_KosciaK.js"></script> 
<script type="text/javascript">
zwijaj = ['Czytam i polecam'];
autor = 'kosciak1';
</script>

Jeśli nie chcemy wyróżniać naszych komentarzy, czy też zwijać folderów zakładek, po prostu kasujemy całą linijkę "autor = ..." lub "zwijaj = ..."

4. Wprowadzamy konieczne zmiany do arkusza CSS (Wygląd → Edycja CSS) dodając na końcu arkusza:

.hide { 
    display: none;
}

.TytulFolderaZakladek:hover {
    cursor: pointer; 
    cursor: hand;
}

W archiwum poszczególne miesiące jak poprzednio posiadają klasę ArchiwumItem, wszystkie miesiące danego roku znajdują się w div'ie o klasie PoziomDrzewa a div z podanym rokiem ma klasę TytulFolderaZakladek. Wystarczy więc ostylować ArchiwumItem tak jak ZakladkaEtykieta by ujednolicić archiwum i zakładki. Tekst "(rozwiń)" znajduje się w elemencie span o klasie expand.

Komentarze autora bloga otrzymują dodatkową klasę: autor.

Warunki korzystania

Skrypt można swobodnie wykorzystywać i modyfikować. Jedynymi warunkami, które muszą być spełnione, jest pozostawienie informacji o autorze, oraz poinformowanie mnie o poprawkawkach znalezionych błędów. Wstawienie linka do mojego bloga do zakładek konieczne nie jest, acz bardzo wskazane :) Będę też wdzięczny za pozostawienie komentarza pod notką bym mógł się zorientować jakie jest zainteresowanie skryptem.

Rozwiązania alternatywne

Zapraszam również do zapoznania się z rozwiązaniami alternatywnymi:

• Zwijane zakładki (autor: eskey) - wersja pierwsza, wersja druga
• Archiwum zwijane jak zakładki (autor: eskey)
• Zaczaruj archiwum bloksa (autor: s.z.y.m.o.n.) - część pierwsza, druga, trzecia
• Wyróżnianie własnych komentarzy (autor: s.z.y.m.o.n.)
• Komentarze autora (autor: e-maupa)