Cimitero:Aiuto:Morph
Il Morph è uno strumento che funziona con Javascript e permette di visualizzare una serie di elementi uno alla volta. Nelle spiegazioni qui sotto verrà sempre usato il tag <div>, ma si può usare al suo posto anche il tag <span> per i link, e un tag qualsiasi per i contenuti.
La struttura di ogni Morph è suddivisa in 3 parti fondamentali: la dichiarazione, il contenuto e i link, e fondamentalmente le differenze tra i vari tipi di Morph riguardano proprio il comportamento di questi ultimi. Vediamo quindi più nel dettaglio come sono strutturati i vari Morph.
Legenda
Nel seguente testo troverete di frequente alcune parti di testo in corsivo, che indicano dei contenuti variabili. Vediamo cosa significano:
- nome: È il nome che si dà al Morph, e rimane sempre lo stesso all'interno di tutti i contenuti e link del Morph. Questo serve a riconoscere le componenti del Morph, ed eventualmente anche a distinguerle da quelle di un altro Morph presente nella stessa pagina. È quindi molto importante usare sempre nomi che caratterizzino bene il Morph in questione.
- Testo: È il testo che verrà visualizzato all'interno di un tag. Per i contenuti non c'è alcun tipo di restrizione, e nemmeno per la dichiarazione[1], mentre per i link è consigliabile usare del testo semplice, o al massimo un link che punti ad un paragrafo della stessa pagina[2].
- n: È un numero intero positivo, e serve per elencare i link e i contenuti. Questi numeri devono necessariamente partire da 1 e non ci devono essere buchi nella numerazione, altrimenti tutti i contenuti successivi al buco non verranno visualizzati[3].
toggleLink
Questo Morph è simile al template cassetto, anche se più potente. Permette di far comparire e scomparire un testo cliccando su un link con il testo di comparsa/scomparsa personalizzabile.
- Dichiarazione
<div class="toggleLink" id="nomeLink">
La posizione di questo codice indica dove verrà visualizzato l'interruttore.
- Effetti speciali
Di default il contenuto del toggleLink ha un effetto di scorrimento e di dissolvenza quando viene aperto e chiuso. È possibile eliminare l'effetto di scorrimento aggiungendo la classe noSlide nella dichiarazione:
<div class="toggleLink noSlide" id="nomeLink">
Alla stessa maniera è possibile eliminare l'effetto di dissolvenza aggiungendo la classe noFade:
<div class="toggleLink noFade" id="nomeLink">
E ovviamente è possibile eliminare entrambi gli effetti aggiungendo entrambe le classi:
<div class="toggleLink noSlide noFade" id="nomeLink">
- Contenuto
<div id="nome">Testo
- Link
- Stato iniziale (aperto o chiuso), in questo caso il testo dovrà essere semplicemente 1 o 0, rispettivamente.
<div id="nomeInitialState" style="display: none;">Testo
- Testo di apertura
<div id="nomeExpandText" style="display: none;">Testo
- Testo di chiusura
<div id="nomeCollapseText" style="display: none;">Testo
- Esempio
Il codice
<div id="provaToggleInitialState" style="display:none;">1</div> <div id="provaToggleExpandText" style="display:none;">Aprimi</div> <div id="provaToggleCollapseText" style="display:none;">Chiudimi</div> <span id="provaToggle">Questo testo è visibile, ma se clicchi su ''Chiudimi'' scompare:</span><span class="toggleLink" id="provaToggleLink"></span>
produce:
Morph 2.0
Questa nuova versione di Morph unifica e migliora le tre versioni precedenti. Permette di avere gruppi di contenuti che vengono attivati dallo stesso link, link multipli allo stesso contenuto, link di scorrimento multipli e contatori multipli. È possibile trovare qualche esempio di Morph tra i template, come questo o quest'altro, oppure in pagine come questa.
- Dichiarazione
<div class="morphMaster" id="nomeMaster">Testo
Il testo nel tag viene visualizzato durante il caricamento della pagina. Quando il caricamento è finito questo testo scompare per lasciare il posto al contenuto morphizzato.
- Effetti speciali
Di default il contenuto che compare ha un effetto di dissolvenza. È possibile eliminare questo effetto aggiungendo la classe noFade nella dichiarazione:
<div class="morphMaster noFade" id="nomeMaster">Testo
- Contenuti
<div class="nomeContentn" style="display:none;">Contenuto
Questa nuova versione permette di inserire più di un contenuto con lo stesso numero n. Quando vengono attivati, tutti i contenuti con lo stesso numero compaiono.
È possibile associare più di una classe allo stesso tag:
<div class="nomeContentn nomeContentm" style="display:none;">Contenuto
In questo modo il contenuto viene visualizzato sia cliccando sui link associati al numero n, sia sui link associati al numero m.
- Contenuto iniziale
Di default la funzione morph sceglie di mostrare come contenuto iniziale tutti i tag con la classe nomeContent1. È possibile modificare questo comportamento:
<div id="nomeStart" style="display: none;">n
dove n indica il numero del contenuto da mostrare. Se n non è un numero oppure se è un numero ma è minore di 1 o maggiore del numero massimo di contenuti, viene adottato il comportamento di default.
- Link
- Link diretto
<div class="nomeLinkn">Testo
Non è necessario inserire almeno un link per ogni contenuto, l'importante è che i contenuti abbiano una numerazione sequenziale, senza buchi.
- Link a un contenuto casuale
<div class="nomeLinkRandom">Testo
- Link al contenuto precedente
<div class="nomeLinkPrev">Testo
- Link al contenuto successivo
<div class="nomeLinkNext">Testo
Di default i link sequenziali, una volta arrivati all'inizio o alla fine, possono saltare all'altra estremità[4]. È possibile evitare questo comportamento inserendo la classe noLoop nella dichiarazione:
<div class="morphMaster noLoop" id="nomeMaster">Testo
I link diretti, casuali e sequenziali possono convivere tranquillamente all'interno dello stesso Morph ed è possibile mettere più link diretti allo stesso contenuto come anche più link casuali e di scorrimento in avanti o indietro.
- Contatore
<div class="nomeCounter">Testo
Il testo, opzionale, verrà sostituito dalla scritta (contenutoCorrente/contenutiTotali).
- Esempio
Il codice
<div class="morphMaster" id="provaMorphMaster">Attendere, caricamento in corso...</div> <div id="provaMorphStart" style="display: none;">2</div> <table class="stdTable" style="width: 95%; margin: 0.5em auto;"> <tr><td style="width: 33%;"><span class="provaMorphLinkPrev">Precedente</span></td> <td style="width: 33%;"><span class="provaMorphCounter">(1/?)</span></td> <td style="width: 33%;"><span class="provaMorphLinkNext">Successivo</span></td></tr> <tr class="provaMorphContent1"><td>'''Contenuto 1'''</td> <td><span class="provaMorphLink2">Link 2</span></td> <td><span class="provaMorphLink3">Link 3</span></td></tr> <tr class="provaMorphContent2"><td>'''Contenuto 2'''</td> <td><span class="provaMorphLink1">Link 1</span></td> <td><span class="provaMorphLink3">Link 3</span></td></tr> <tr class="provaMorphContent3"><td>'''Contenuto 3'''</td> <td><span class="provaMorphLink1">Link 1</span></td> <td><span class="provaMorphLink2">Link 2</span></td></tr> <tr class="provaMorphContent1 provaMorphContent2"><td colspan="3">'''Contenuto 1 + 2'''</td></tr> <tr class="provaMorphContent1 provaMorphContent3"><td colspan="3">'''Contenuto 1 + 3'''</td></tr> <tr class="provaMorphContent2 provaMorphContent3"><td colspan="3">'''Contenuto 2 + 3'''</td></tr> <tr><td><span class="provaMorphLinkPrev">Precedente</span></td> <td><span class="provaMorphLinkRandom">Random</span></td> <td><span class="provaMorphLinkNext">Successivo</span></td></tr> </table>
produce
| Precedente | (1/?) | Successivo |
| Contenuto 1 | Link 2 | Link 3 |
| Contenuto 2 | Link 1 | Link 3 |
| Contenuto 3 | Link 1 | Link 2 |
| Contenuto 1 + 2 | ||
| Contenuto 1 + 3 | ||
| Contenuto 2 + 3 | ||
| Precedente | Random | Successivo |
Note
- ^ Questo sarà quindi il testo che verrà visualizzato durante il caricamento
- ^ Come succede per esempio qui se provate a cliccare su una delle frecce.
- ^ Per esempio la numerazione 1,2,4 mostrerà solo i contenuti 1 e 2, mentre il 4 rimarrà inaccessibile.
- ^ Ovvero se ci si trova nel primo contenuto e si va indietro, si va all'ultimo, e se ci si trova nell'ultimo e si va avanti si va al primo.