Cimitero:Aiuto:Morph

Il titolo di questa pagina non è il titolo di questa pagina perché così ci tirava il culo. Il titolo corretto è Aiuto:Manuale/Morph.

Il Morph è uno strumento che funziona con javascript che permette di visualizzare una serie di blocchi di testo uno alla volta. Ci sono quattro tipi di Morph:

toggleLink

Simile al template cassetto, è costituito da cinque parti:

<span class="toggleLink" id="nomeLink">

Dove nome è il nome che vogliamo dare a questo toggleLink. La posizione di questo codice indica dove verrà visualizzato l'interruttore.

<span id="nomeInitialState" style="display: none;">Testo

Dove nome è lo stesso nome usato sopra, mentre Testo indica se l'interruttore dovrà essere chiuso (quindi il testo sarà semplicemente 0) oppure aperto (quindi il testo sarà 1)

<span id="nomeCollapseText" style="display: none;">Testo

Dove nome è il solito nome, mentre Testo è il testo che verrà visualizzato sull'interruttore aperto.

<span id="nomeExpandText" style="display: none;">Testo

Dove nome è il solito nome, mentre Testo è il testo che verrà visualizzato sull'interruttore chiuso.

<span id="nome">Testo

Dove nome è il solito nome, mentre Testo è il testo che dovrà apparire e scomparire.

morphMaster

La prima cosa di cui c'è bisogno è far capire al browser che si ha a che fare con un morphMaster, quindi all'inizio della pagina va scritto:

<span class="morphMaster" id="nomeMaster">Testo

Dove nome è il nome che si vuole dare al Morph, mentre Testo è il testo che verrà visualizzato durante il caricamento.

Ora passiamo ai contenuti. Ogni contenuto andrà inserito in questo modo:

<span id="nomeContentn">Contenuto

Oppure

<div id="nomeContentn">Contenuto

Dove nome è sempre lo stesso nome usato nello span più in alto, mentre n è un numero progressivo da 1 a quanti ne avete bisogno (ma non esagerate!) È importante che non ci siano buchi nella numerazione, altrimenti tutti i contenuti successivi al buco non verranno visualizzati.
Il tag con l'ID nomeContent1 sarà quello che verrà visualizzato dopo il caricamento della pagina.

La differenza tra i due tag è che span è un elemento in linea, quindi si può inserire all'interno di una frase, mentre div manda a capo prima e dopo il tag, quindi risulta utile per blocchi di testo, riquadri, o contenuti completamente separati da un contesto.

L'ultimo passo, e poi abbiamo finito. Mancano ancora i link ai vari contenuti.
Attenzione: morphMaster permette di avere un solo link per ogni contenuto. Se invece ti interessa avere più link allo stesso contenuto, è meglio usare il multiMorphMaster, tanto fino a questo punto il procedimento è uguale.

Ci sono due tipi di link, quello diretto e quello sequenziale. Vediamoli entrambi:

Link diretto

È molto importante che ci sia sempre un link per ogni contenuto. Per inserire un link basta usare questo codice:

<span id="nomeLinkn">Testo

Oppure

<div id="nomeLinkn">Testo

Dove nome è sempre il solito nome, n è il numero del contenuto a cui si vuole linkare, e Testo è il testo che verrà visualizzato come link.

Se l'elemento nomeContent1 è solo di facciata e non si desidera permettere all'utente di tornare a vederlo lo si può scrivere così:

<span id="nomeLink1" style="display: none;">Testo

Link sequenziali

Anche di questo tipo di link se ne può usare uno solo, e possono convivere con i link diretti.
Per passare al contenuto precedente c'è bisogno di questo codice:

<span id="nomeLinkPrev">Testo

Oppure

<div id="nomeLinkPrev">Testo

Mentre per passare al contenuto successivo serve questo codice:

<span id="nomeLinkNext">Testo

Oppure

<div id="nomeLinkNext">Testo

Dove, come sempre, nome è il solito nome mentre Testo è il testo visualizzato nel link.

multiMorphMaster

Si riportano qui solo le differenze col codice predecente, vista la forte somiglianza tra i due sistemi.

span iniziale

<span class="multiMorphMaster" id="nomeMaster">Testo

Link diretti

<span class="nomeLinkn">Testo

Oppure

<div class="nomeLinkn">Testo

Link sequenziali

Per passare al contenuto precedente c'è bisogno di questo codice:

<span class="nomeLinkPrev">Testo

Oppure

<div class="nomeLinkPrev">Testo

Mentre per passare al contenuto successivo serve questo codice:

<span class="nomeLinkNext">Testo

Oppure

<div class="nomeLinkNext">Testo

La differenza con i link precedenti è semplicemente che in questo caso vengono usate le classi invece degli ID, col risultato che si possono inserire più link diretti allo stesso contenuto, e anche più link sequenziali.

galleryMorphMaster

Questo morph è praticamente identico al morphMaster, con la sola differenza che è ottimizzato per visualizzare oggetti in sequenza, ma non supporta link diretti.

span iniziale

<span class="galleryMorphMaster" id="nomeMaster">Testo

contatore

<div id="nomeCounter">Testo

Oppure

<span id="nomeCounter">Testo