Collapsible categories with cookies

Zwijane kategorie to świetny sposób, aby pozwolić użytkownikom wybrać swoje ulubione części forum, i ukrycie pozostałych. Wspierany przez ciasteczka skrypt zapisuje i zapamiętuje preferencje użytkownika.

Co chcemy osiągnąć
Użytkownik dużego forum może tracić sporo czasu na znalezienie treści które go interesują. Mając do dyspozycji "składane kategorie", użytkownik jest w stanie "zminimalizować" kategorie, które nie mają być wyświetlane, dzięki czemu łatwo nawigować do tych, którego interesują. Skrypt ten jest również wspierany przez ciasteczka, czyli są przechowywane i zapamiętane informacje pozwalające następnym razem łatwo odwiedzić miejsca zgodnie z preferencjami użytkownika.

Przygotowanie
Teraz będziesz musiał użyć porządnego edytora kodu źródłowego (np Notepad++). Dodatkowo, musisz pobrać archiwum collapsible-categories.zip

Następnie:
Skopiuj: /collapsible-categories/collapse-icon.png do /phpBB/styles/prosilver/theme/images/
Skopiuj: /collapsible-categories/jquery.cookie.js do /phpBB/styles/prosilver/template/
Skopiuj: /collapsible-categories/jquery.collapse.js do /phpBB/styles/prosilver/template/

Krok 1) Edycje HTML
Najpierw musimy połączyć się z jQuery i z dwoma wtyczkami, które skopiowaliśmy w poprzednim kroku.

Otwórz: /styles/prosilver/template/overall_header.html

Znajdź:

Kod: Zaznacz cały

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Poniżej dodaj:

Kod: Zaznacz cały

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Jeśli powyższa linia jest już obecna, nie dodawaj jej ponownie -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.collapse.js"></script>

Otwórz: /styles/prosilver/template/forumlist_body.html

Znajdź:

Kod: Zaznacz cały

<!-- BEGIN forumrow -->

Przed dodaj:

Kod: Zaznacz cały

<div class="forumlist">

Znajdź:

Kod: Zaznacz cały

<!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT  -->
    </ul>

Poniżej dodaj:

Kod: Zaznacz cały

</div>

Znajdź:

Kod: Zaznacz cały

<ul class="topiclist forums">

Przed dodaj:

Kod: Zaznacz cały

<!-- IF SCRIPT_NAME eq 'index' --><div class="trigger active"></div><!-- ENDIF -->
<div class="collapsethis">

Znajdź:

Kod: Zaznacz cały

<!-- IF forumrow.S_LAST_ROW -->
        </ul>

Poniżej dodaj:

Kod: Zaznacz cały

</div>

Znajdź:

Kod: Zaznacz cały

<!-- END forumrow -->

Poniżej dodaj:

Kod: Zaznacz cały

</div>

Krok 2) Edycje CSS
Otwórz: /styles/prosilver/theme/common.css

Znajdź:

Kod: Zaznacz cały

.clear {
    display: block;
    clear: both;
    font-size: 1px;
    line-height: 1px;
    background: transparent;
}

Poniżej dodaj:

Kod: Zaznacz cały

.trigger {
    background: url("{T_THEME_PATH}/images/collapse-icon.png") no-repeat;
    width: 32px;
    height: 17px;
    cursor: pointer;
    float: right;
    position: relative;
    z-index: 9998;
    margin-top: -21px;
}
.active {background-position: left top;}
.inactive {background-position: left bottom;}

Krok 3) jQuery
Teraz dodamy jQuery. Większość funkcji tej biblioteki odbywa się w pliku collapse.js, ale jeszcze musimy dodać JavaScript, aby ją wykonać, gdy ikona zwijania/rozwijania będzie klikana.

Otwórz: /styles/prosilver/template/forumlist_body.html
Znajdź:

Kod: Zaznacz cały

<!-- END forumrow -->
</div>

Poniżej dodaj

Kod: Zaznacz cały

<script type="text/javascript">
            $(".forumlist").collapse({show: function(){
                    this.animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, 300);
                },
                hide : function() {
                    this.animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, 300);
                }
            });
        </script>

Skończone! Jeżeli wszystko poszło prawidłowo, będziesz teraz mieć ładną ikonę do rozsuwania w każdej kategorii.

-------------------------------------------------------------------------------------------------------------
// żródło: http://www.christianbullock.com/2011/ph ... th-cookies

Ja użyłem coś takiego
Oczywiście kategorie pozostają zwinięte po odswieżeniu

Hymm, wygląda podobnie do tej modyfikacji (zainteresowanym polecam prześledzenie całego tematu).

ta z tego co wiem nie zapamiętuje schowanych juz kart Bo miałem ja zainstalowaną (o ile to ta o której mysle)

A wiesz może coś na temat modyfikacji która daje możliwość przesuwania działów? Tzn. góra, dół ale na zasadzie drag and drop
Miałem kiedyś coś taiego na forum i nie wiem jak to się nazywa

Spotkałem się z nią również, ale nie pamiętam nazwy, trzeba poszukać

[ Post napisany za pomocą Mobile Device ]

Takie coś jest w stylu supernova Wystarczy w plikach pogrzebać i wyciągnąć kod/pliki do własnego stylu. http://www.awesomestyles.com/phpbb3-sty ... /supernova

Christian Bullock ten od tych poradników miał napisać jak to zrobić już z 2 miesiące temu ale jakoś mu się nie spieszy :E Rozumiem, że poradnik wyżej jest identyczny jak u Christiana na blogu tylko w wersji PL ?

@Amciek Wersja jest ta sama tylko opis jak to działa i co daje jest po Polsku

W wolnej chwili wyciągnę kod z jego stylu lub z jakiegoś tutka w necie i napisze tutaj tutorial o tych przesuwanych działach

Ja taki skrypt na zwijanie kategorii miałem wbudowany w stylu, oczywiście wraz z zapisaniem "stanu" kategorii w cookie
Ale dla osób które chciały, lecz nie mogły mieć takiego skryptu u siebie bardzo się przyda.

Btw. A może zrobić by to w JS ?

Jbc. to łapcie linka do theme'a : http://demo.phpbb3styles.net/Black+Pearl