Categorie collassabili con cookie

[Galandas]

collapsible categories with cookies (Categorie collassabili con cookie)
Autore: christian bullock
Descrizione: collapsible categories sono un ottimo modo di lasciare agli utenti di eseguire i loro pezzi preferiti del forum, e nascondere il resto. Supportato da Cookies Questo script memorizza e ricorda la preferenza dell'utente.

---

File da includere:
Copia: /collapsible-categories/collapse-icon.png in /phpBB/styles/prosilver/theme/images/
Copia: /collapsible-categories/jquery.cookie.js in /phpBB/styles/prosilver/template/
Copia: /collapsible-categories/jquery.collapse.js in /phpBB/styles/prosilver/template/

---

Fase 1) Modifica HTML

Apri: /styles/prosilver/template/overall_header.html

Cerca:

Codice: Seleziona tutto

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

Qui sotto, aggiungere:

Codice: Seleziona tutto

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.cookie.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.collapse.js"></script>

Apri: /styles/prosilver/template/forumlist_body.html

Cerca:

Codice: Seleziona tutto

<!-- BEGIN forumrow -->

aggiungi Prima:

Codice: Seleziona tutto

<div class="forumlist">

Cerca:

Codice: Seleziona tutto

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

Qui sotto, aggiungere:

Codice: Seleziona tutto

</div>

Cerca:

Codice: Seleziona tutto

<ul class="topiclist forums">

aggiungi Prima:

Codice: Seleziona tutto

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

Cerca:

Codice: Seleziona tutto

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

Qui sotto, aggiungere:

Codice: Seleziona tutto

</div>

Cerca:

Codice: Seleziona tutto

<!-- END forumrow -->

Qui sotto, aggiungere:

Codice: Seleziona tutto

</div>

---

Fase 2) Modifica CSS

Apri: /styles/prosilver/theme/common.css

Cerca:

Codice: Seleziona tutto

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

Qui sotto, aggiungere:

Codice: Seleziona tutto

.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;}

---

Fase 3) Il jQuery

Ora aggiungeremo il jQuery. La maggior parte delle funzionalità avviene nel file collapse.js, anche se abbiamo ancora bisogno di aggiungere qualche linea JavaScript da eseguire quando l'icona del crollo è stato cliccato.

Apri: /styles/prosilver/template/forumlist_body.html

Cerca:

Codice: Seleziona tutto

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

Qui sotto, aggiungere:

Codice: Seleziona tutto

<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>

E questo è tutto! Se tutto è andato correttamente ora vedrai una bella icona su ogni categoria che, se cliccato, scivola via il contenuto fino al punto, come l'utente finale sceglie di visualizzare nuovamente.

Download:

collapsible-categories.zip