Cimitero:Aiuto:Morph: differenze tra le versioni
MFHbot (rosica | curriculum) m (Bot: Sistemazione del codice CSS.) |
MFH (rosica | curriculum) Nessun oggetto della modifica |
||
Riga 18:
<nowiki><div class="toggleLink"</nowiki> id="''nome''Link"></div>
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
Line 42 ⟶ 50:
<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.]]
==
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.}}.
È 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]].
;Dichiarazione
<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
Di default il contenuto che compare ha un effetto di dissolvenza. È possibile eliminare questo effetto aggiungendo la classe {{tt|noFade}} nella dichiarazione:
<nowiki><div class="morphMaster noFade"</nowiki> id="''nome''Master">''Testo''</div>
;Contenuti
<nowiki><div</nowiki>
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 diretto
<nowiki><div</nowiki> class="''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> class="''nome''Link1" style="display: none;">''Testo''</div>
*Link al contenuto precedente
<nowiki><div</nowiki> class="''nome''LinkPrev">''Testo''</div>
*Link al contenuto successivo
<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>
;Contatore
<nowiki><div</nowiki>
Il testo, opzionale, verrà sostituito dalla scritta '''(''contenutoCorrente''/''contenutiTotali'')'''.
;Esempio
Il codice
<nowiki><div class="morphMaster" id="provaMorphMaster">Attendere, caricamento in corso...</div>
<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="provaMorphCounter">(1/?)</span></td>
<td><span class="provaMorphLinkNext">Successivo</span></td></tr>
</table></nowiki>
produce
<div style="background-color: #CCFFCC; border: 1px dotted; padding: 2px;
<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="provaMorphCounter">(1/?)</span></td>
<td><span class="provaMorphLinkNext">Successivo</span></td></tr>
</table></div>
==Note==
|
Versione delle 10:33, 26 set 2013
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
Se l'elemento nomeContent1 è solo di facciata[4] e non si desidera permettere all'utente di tornare a vederlo lo si può scrivere così:
<div class="nomeLink1" style="display: none;">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à[5]. È possibile evitare questo comportamento inserendo la classe noLoop nella dichiarazione:
<div class="morphMaster noLoop" id="nomeMaster">Testo
I link diretti e quelli sequenziali possono convivere tranquillamente all'interno dello stesso Morph ed è possibile mettere più link diretti allo stesso contenuto come anche più link 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="provaMorphCounter">(1/?)</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 | (1/?) | 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.
- ^ 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.