Cimitero:Aiuto:Morph: differenze tra le versioni
Eurinome (rosica | curriculum) |
m (MrApocalisse ha spostato la pagina Aiuto:Morph a Cimitero:Aiuto:Morph: archivio tecnologia per cui il java script non c'è più e che non verrà reimplementata) |
||
(15 versioni intermedie di 4 utenti non mostrate) | |||
Riga 2: | Riga 2: | ||
{{Cit|Dunque, potrei aggiungere una funzione Morph che mi permetta di riassumere tutta [[Nonciclopedia]] in una sola pagina...|[[Utente:MFH|MFH]] alla ricerca di nuovi spunti per raggiungere un [[orgasmo]] [[nerd|nerdico]]}} |
{{Cit|Dunque, potrei aggiungere una funzione Morph che mi permetta di riassumere tutta [[Nonciclopedia]] in una sola pagina...|[[Utente:MFH|MFH]] alla ricerca di nuovi spunti per raggiungere un [[orgasmo]] [[nerd|nerdico]]}} |
||
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 ''<nowiki><div></nowiki>'', ma si può usare al suo posto anche il tag ''<nowiki><span></nowiki>''. |
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 ''<nowiki><div></nowiki>'', ma si può usare al suo posto anche il tag ''<nowiki><span></nowiki>'' 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. |
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. |
||
Riga 18: | Riga 18: | ||
<nowiki><div class="toggleLink"</nowiki> id="''nome''Link"></div> |
<nowiki><div class="toggleLink"</nowiki> id="''nome''Link"></div> |
||
La posizione di questo codice indica dove verrà visualizzato l'interruttore. |
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 {{tt|noSlide}} nella dichiarazione: |
|||
<nowiki><div class="toggleLink noSlide"</nowiki> id="''nome''Link"></div> |
|||
Alla stessa maniera è possibile eliminare l'effetto di dissolvenza aggiungendo la classe {{tt|noFade}}: |
|||
<nowiki><div class="toggleLink noFade"</nowiki> id="''nome''Link"></div> |
|||
E ovviamente è possibile eliminare entrambi gli effetti aggiungendo entrambe le classi: |
|||
<nowiki><div class="toggleLink noSlide noFade"</nowiki> id="''nome''Link"></div> |
|||
;Contenuto |
;Contenuto |
||
Riga 37: | Riga 45: | ||
<span id="provaToggle">Questo testo è visibile, ma se clicchi su ''Chiudimi'' scompare:</span><span class="toggleLink" id="provaToggleLink"></span></nowiki> |
<span id="provaToggle">Questo testo è visibile, ma se clicchi su ''Chiudimi'' scompare:</span><span class="toggleLink" id="provaToggleLink"></span></nowiki> |
||
produce: |
produce: |
||
<div style="background: #CCFFCC; border: 1px dotted; padding: 2px"><div id="provaToggleInitialState" style="display:none;">1</div> |
<div style="background-color: #CCFFCC; border: 1px dotted; padding: 2px;"><div id="provaToggleInitialState" style="display:none;">1</div> |
||
<div id="provaToggleExpandText" style="display:none;">Aprimi</div> |
<div id="provaToggleExpandText" style="display:none;">Aprimi</div> |
||
<div id="provaToggleCollapseText" style="display:none;">Chiudimi</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></div> |
<span id="provaToggle">Questo testo è visibile, ma se clicchi su ''Chiudimi'' scompare:</span><span class="toggleLink" id="provaToggleLink"></span></div> |
||
[[File:Eddie Murphy il professore matto.jpg|thumb|right|220px|[[Eddie Murphy]] nel film ''Il professore matto''. Per effettuare le trasformazioni del personaggio hanno usato una speciale funzione Morph.]] |
[[File:Eddie Murphy il professore matto.jpg|thumb|right|220px|[[Eddie Murphy]] nel film ''Il professore matto''. Per effettuare le trasformazioni del personaggio hanno usato una speciale funzione Morph.]] |
||
== |
==Morph 2.0== |
||
Questa nuova versione di Morph unifica e migliora le tre versioni precedenti. Permette di avere {{Tooltip|gruppi di contenuti che vengono attivati dallo stesso link|Novità assoluta!}}, {{Tooltip|link multipli allo stesso contenuto|Proveniente dal vecchio multiMorph.}}, {{Tooltip|link di scorrimento multipli|Provenienti dal vecchio multiMorph.}} e {{Tooltip|contatori multipli|Proveniente dal vecchio galleryMorph.}}. |
|||
Questo Morph permette di avere una serie di link, a ognuno dei quali corrisponde un contenuto diverso<ref>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.</ref>. Nonostante la limitazione dei link, questo Morph è sufficiente per quasi tutte le esigenze. |
|||
È possibile trovare qualche esempio di Morph tra i template, come [[Template:Medicina|questo]] o [[Template:Death Note|quest'altro]], oppure in pagine come [[Bastardi senza gloria|questa]]. |
|||
È possibile trovare qualche esempio di morphMaster tra i template, come [[Template:Medicina|questo]] o [[Template:Death Note|quest'altro]], oppure in pagine come [[Bastardi senza gloria|questa]]. |
|||
;Dichiarazione |
;Dichiarazione |
||
<nowiki><div class="morphMaster"</nowiki> id="''nome''Master">''Testo''</div> |
<nowiki><div class="morphMaster"</nowiki> id="''nome''Master">''Testo''</div> |
||
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 |
|||
;Contenuti |
|||
Di default il contenuto che compare ha un effetto di dissolvenza. È possibile eliminare questo effetto aggiungendo la classe {{tt|noFade}} nella dichiarazione: |
|||
<nowiki><div</nowiki> id="''nome''Content''n''" style="display:none;">''Contenuto''</div> |
|||
<nowiki><div class="morphMaster noFade"</nowiki> id="''nome''Master">''Testo''</div> |
|||
Il tag con l'ID ''nome''Content1 sarà quello che verrà visualizzato dopo il caricamento della pagina. |
|||
;Link |
|||
*Link diretto |
|||
<nowiki><div</nowiki> id="''nome''Link''n''">''Testo''</div> |
|||
Se l'elemento ''nome''Content1 è solo di facciata<ref>Per esempio potrebbe contenere qualche semplice istruzione su come usare i link.</ref> e non si desidera permettere all'utente di tornare a vederlo lo si può scrivere così: |
|||
<nowiki><div</nowiki> id="''nome''Link1" style="display: none;">''Testo''</div> |
|||
*Link al contenuto precedente |
|||
<nowiki><div</nowiki> id="''nome''LinkPrev">''Testo''</div> |
|||
*Link al contenuto successivo |
|||
<nowiki><div</nowiki> id="''nome''LinkNext">''Testo''</div> |
|||
I link sequenziali, una volta arrivati all'inizio o alla fine, possono saltare all'altra estremità<ref>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.</ref> |
|||
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 |
|||
<nowiki><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></nowiki> |
|||
produce |
|||
<div style="background: #CCFFCC; border: 1px dotted; padding: 2px"><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></div> |
|||
==multiMorphMaster== |
|||
Questo Morph è una semplice variazione del morphMaster, che permette l'uso di più link per lo stesso contenuto. |
|||
;Dichiarazione |
|||
<nowiki><div class="multiMorphMaster"</nowiki> id="''nome''Master">''Testo''</div> |
|||
;Contenuti |
;Contenuti |
||
<nowiki><div</nowiki> |
<nowiki><div</nowiki> class="''nome''Content''n''" style="display:none;">''Contenuto''</div> |
||
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.<br /> |
|||
È possibile associare più di una classe allo stesso tag: |
|||
<nowiki><div</nowiki> class="''nome''Content''n'' ''nome''Content''m''" style="display:none;">''Contenuto''</div> |
|||
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 ''nome''Content1. È possibile modificare questo comportamento: |
|||
<nowiki><div</nowiki> id="''nome''Start" style="display: none;">''n''</div> |
|||
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. |
|||
[[File:Donna anatra.jpg|thumb|right|250px|Esempio di Morph malriuscito. Notate il panico della poveretta che non ha letto questo manuale.]] |
|||
;Link |
;Link |
||
*Link diretto |
*Link diretto |
||
<nowiki><div</nowiki> class="''nome''Link''n''">''Testo''</div> |
<nowiki><div</nowiki> class="''nome''Link''n''">''Testo''</div> |
||
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 |
|||
<nowiki><div</nowiki> class="''nome''LinkRandom">''Testo''</div> |
|||
*Link al contenuto precedente |
*Link al contenuto precedente |
||
<nowiki><div</nowiki> class="''nome''LinkPrev">''Testo''</div> |
<nowiki><div</nowiki> class="''nome''LinkPrev">''Testo''</div> |
||
*Link al contenuto successivo |
*Link al contenuto successivo |
||
<nowiki><div</nowiki> class="''nome''LinkNext">''Testo''</div> |
<nowiki><div</nowiki> class="''nome''LinkNext">''Testo''</div> |
||
Di default i link sequenziali, una volta arrivati all'inizio o alla fine, possono saltare all'altra estremità<ref>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.</ref>. È possibile evitare questo comportamento inserendo la classe {{tt|noLoop}} nella dichiarazione: |
|||
<nowiki><div class="morphMaster noLoop"</nowiki> id="''nome''Master">''Testo''</div> |
|||
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. |
|||
;Esempio |
|||
Questa è una piccola variazione della situazione precedente |
|||
<nowiki><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></nowiki> |
|||
produce |
|||
<div style="background: #CCFFCC; border: 1px dotted; padding: 2px"><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></div> |
|||
[[File:Donna anatra.jpg|thumb|right|250px|Esempio di Morph malriuscito. Notate il panico della poveretta che non ha letto questo manuale.]] |
|||
==galleryMorphMaster== |
|||
Anche questo Morph è una variazione del morphMaster, ottimizzata per visualizzare una sequenza di oggetti<ref>O galleria, appunto</ref>. 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 [[Template:Galleria|questo template]]. |
|||
;Dichiarazione |
|||
<nowiki><div class="galleryMorphMaster"</nowiki> id="''nome''Master">''Testo''</div> |
|||
;Contenuti |
|||
<nowiki><div</nowiki> id="''nome''Content''n''">''Contenuto''</div> |
|||
;Link |
|||
*Link al contenuto precedente |
|||
<nowiki><div</nowiki> id="''nome''LinkPrev" style="display:none;">''Testo''</div> |
|||
*Link al contenuto successivo |
|||
<nowiki><div</nowiki> id="''nome''LinkNext">''Testo''</div> |
|||
;Contatore |
;Contatore |
||
<nowiki><div</nowiki> |
<nowiki><div</nowiki> class="''nome''Counter">''Testo''</div> |
||
Il testo, opzionale, verrà sostituito dalla scritta '''(''contenutoCorrente''/''contenutiTotali'')'''. |
|||
;Esempio |
;Esempio |
||
Il codice |
|||
Anche questa è una piccola variazione della situazione precedente |
|||
<nowiki><div class="morphMaster" id="provaMorphMaster">Attendere, caricamento in corso...</div> |
|||
<nowiki><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 |
<div id="provaMorphStart" style="display: none;">2</div> |
||
<table class="stdTable" style="width: 95%; margin: 0.5em auto;"> |
|||
<div id="provaGalleryMorphCounter" style="text-align:center;">(1/?)</div> |
|||
<tr><td style="width: 33%;"><span class="provaMorphLinkPrev">Precedente</span></td> |
|||
<div id="provaGalleryMorphContent1" style="display:none;">Questo è il contenuto numero 1, che verrà visualizzato dopo il caricamento del Morph.</div> |
|||
<td style="width: 33%;"><span class="provaMorphCounter">(1/?)</span></td> |
|||
<div id="provaGalleryMorphContent2" style="display:none;">Questo è il contenuto numero 2</div> |
|||
<td style="width: 33%;"><span class="provaMorphLinkNext">Successivo</span></td></tr> |
|||
<div id="provaGalleryMorphContent3" style="display:none;">Questo è il contenuto numero 3</div></nowiki> |
|||
<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></nowiki> |
|||
produce |
produce |
||
<div style="background: #CCFFCC; border: 1px dotted; padding: 2px |
<div style="background-color: #CCFFCC; border: 1px dotted; padding: 2px; text-align: center;"><div class="morphMaster" id="provaMorphMaster">Attendere, caricamento in corso...</div> |
||
<div |
<div id="provaMorphStart" style="display: none;">2</div> |
||
<table class="stdTable" style="width: 95%; margin: 0.5em auto;"> |
|||
<div id="provaGalleryMorphCounter" style="text-align:center;">(1/?)</div> |
|||
<tr><td style="width: 33%;"><span class="provaMorphLinkPrev">Precedente</span></td> |
|||
<div id="provaGalleryMorphContent1" style="display:none;">Questo è il contenuto numero 1, che verrà visualizzato dopo il caricamento del Morph.</div> |
|||
<td style="width: 33%;"><span class="provaMorphCounter">(1/?)</span></td> |
|||
<div id="provaGalleryMorphContent2" style="display:none;">Questo è il contenuto numero 2</div> |
|||
<td style="width: 33%;"><span class="provaMorphLinkNext">Successivo</span></td></tr> |
|||
<div id="provaGalleryMorphContent3" style="display:none;">Questo è il contenuto numero 3</div></div> |
|||
<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></div> |
|||
==Note== |
==Note== |
||
{{Legginote}} |
|||
<references /> |
<references /> |
||
Versione attuale delle 13:14, 19 giu 2021
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 e link di scorrimento multipli. È possibile trovare qualche esempio di Morph tra i template, come contatori multipliquesto 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.