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.
- 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:
morphMaster
Questo Morph permette di avere una serie di link, a ognuno dei quali corrisponde un contenuto diverso[4]. Nonostante la limitazione dei link, questo Morph è sufficiente per quasi tutte le esigenze.
È possibile trovare qualche esempio di morphMaster tra i template, come questo o quest'altro, oppure in pagine come questa.
- Dichiarazione
<div class="morphMaster" id="nomeMaster">Testo
- Contenuti
<div id="nomeContentn" style="display:none;">Contenuto
Il tag con l'ID nomeContent1 sarà quello che verrà visualizzato dopo il caricamento della pagina.
- Link
- Link diretto
<div id="nomeLinkn">Testo
Se l'elemento nomeContent1 è solo di facciata[5] e non si desidera permettere all'utente di tornare a vederlo lo si può scrivere così:
<div id="nomeLink1" style="display: none;">Testo
- Link al contenuto precedente
<div id="nomeLinkPrev">Testo
- Link al contenuto successivo
<div id="nomeLinkNext">Testo
I link sequenziali, una volta arrivati all'inizio o alla fine, possono saltare all'altra estremità[6]
I link diretti e quelli sequenziali possono convivere tranquillamente all'interno dello stesso Morph, l'importante è non metterne mai più di uno. Se avete bisogno di più link per lo stesso contenuto, allora dovete leggere il prossimo paragrafo.
- Esempio
Il codice
<div class="morphMaster" id="provaMorphMaster" style="text-decoration:blink;">Attendere, caricamento in corso...</div> <span id="provaMorphLinkPrev">Precedente</span> • <span id="provaMorphLink1">Contenuto 1</span> • <span id="provaMorphLink2">Contenuto 2</span> • <span id="provaMorphLink3">Contenuto 3</span> • <span id="provaMorphLinkNext">Successivo</span> <div id="provaMorphContent1" style="display:none;">Questo è il contenuto numero 1, che verrà visualizzato dopo il caricamento del Morph.</div> <div id="provaMorphContent2" style="display:none;">Questo è il contenuto numero 2</div> <div id="provaMorphContent3" style="display:none;">Questo è il contenuto numero 3</div>
produce
Precedente • Contenuto 1 • Contenuto 2 • Contenuto 3 • Successivo
multiMorphMaster
Questo Morph è una semplice variazione del morphMaster, che permette l'uso di più link per lo stesso contenuto.
- Dichiarazione
<div class="multiMorphMaster" id="nomeMaster">Testo
- Contenuti
<div id="nomeContentn">Contenuto
- Link
- Link diretto
<div class="nomeLinkn">Testo
- Link al contenuto precedente
<div class="nomeLinkPrev">Testo
- Link al contenuto successivo
<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.
- Esempio
Questa è una piccola variazione della situazione precedente
<div class="multiMorphMaster" id="provaMultiMorphMaster" style="text-decoration:blink;">Attendere, caricamento in corso...</div> <div id="provaMultiMorphContent1" style="display:none;"><span class="provaMultiMorphLinkPrev">Precedente</span> • <span class="provaMultiMorphLink2">Contenuto 2</span> • <span class="provaMultiMorphLink3">Contenuto 3</span> • <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 1, che verrà visualizzato dopo il caricamento del Morph.</div> <div id="provaMultiMorphContent2" style="display:none;"><span class="provaMultiMorphLinkPrev">Precedente</span> • <span class="provaMultiMorphLink1">Contenuto 1</span> • <span class="provaMultiMorphLink3">Contenuto 3</span> • <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 2</div> <div id="provaMultiMorphContent3" style="display:none;"><span class="provaMultiMorphLinkPrev">Precedente</span> • <span class="provaMultiMorphLink1">Contenuto 1</span> • <span class="provaMultiMorphLink2">Contenuto 2</span> • <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 3</div>
produce
galleryMorphMaster
Anche questo Morph è una variazione del morphMaster, ottimizzata per visualizzare una sequenza di oggetti[7]. Al contrario del morphMaster però, qui non sono supportati i link diretti, ma solo quelli sequenziali, e non esiste la possibilità del "salto" dal primo all'ultimo contenuto e viceversa. Inoltre è presente un contatore, che segnala a che punto della galleria ci si trova.
Un esempio di applicazione di questo Morph si può trovare in questo template.
- Dichiarazione
<div class="galleryMorphMaster" id="nomeMaster">Testo
- Contenuti
<div id="nomeContentn">Contenuto
- Link
- Link al contenuto precedente
<div id="nomeLinkPrev" style="display:none;">Testo
- Link al contenuto successivo
<div id="nomeLinkNext">Testo
- Contatore
<div id="nomeCounter">Testo
- Esempio
Anche questa è una piccola variazione della situazione precedente
<span id="provaGalleryMorphLinkPrev" style="display:none; float:left; position:relative; top:2px; left:2px;">Precedente</span><span id="provaGalleryMorphLinkNext" style="float:right; position:relative; top:2px; right:2px;">Successivo</span><br clear="both" /> <div class="galleryMorphMaster" id="provaGalleryMorphMaster" style="text-decoration:blink;">Attendere, caricamento in corso...</div> <div id="provaGalleryMorphCounter" style="text-align:center;">(1/?)</div> <div id="provaGalleryMorphContent1" style="display:none;">Questo è il contenuto numero 1, che verrà visualizzato dopo il caricamento del Morph.</div> <div id="provaGalleryMorphContent2" style="display:none;">Questo è il contenuto numero 2</div> <div id="provaGalleryMorphContent3" style="display:none;">Questo è il contenuto numero 3</div>
produce
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.
- ^ E che sia chiaro: per ogni link ci vuole un contenuto diverso. Due link non possono puntare allo stesso contenuto, ovvero avere lo stesso nome.
- ^ Per esempio potrebbe contenere qualche semplice istruzione su come usare i link.
- ^ 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.
- ^ O galleria, appunto