Cimitero:Aiuto:Morph: differenze tra le versioni

Naviga nella cronologia in modo interattivo

Contenuto aggiunto Contenuto cancellato

In linea

Versione attuale delle 13:14, 19 giu 2021

« Dunque, potrei aggiungere una funzione Morph che mi permetta di riassumere tutta Nonciclopedia in una sola pagina... »

(MFH alla ricerca di nuovi spunti per raggiungere un orgasmo 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 <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

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:

Alla stessa maniera è possibile eliminare l'effetto di dissolvenza aggiungendo la classe noFade:

E ovviamente è possibile eliminare entrambi gli effetti aggiungendo entrambe le classi:

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:

Questo testo è visibile, ma se clicchi su Chiudimi scompare:

Morph 2.0

Questa nuova versione di Morph unifica e migliora le tre versioni precedenti. Permette di avere Novità assoluta!gruppi di contenuti che vengono attivati dallo stesso link, Proveniente dal vecchio multiMorph.link multipli allo stesso contenuto, Provenienti dal vecchio multiMorph.link di scorrimento multipli e Proveniente dal vecchio galleryMorph.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

Attendere, caricamento in corso...

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.

[1] Questo sarà quindi il testo che verrà visualizzato durante il caricamento

[2] Come succede per esempio qui se provate a cliccare su una delle frecce.

[3] Per esempio la numerazione 1,2,4 mostrerà solo i contenuti 1 e 2, mentre il 4 rimarrà inaccessibile.

[4] 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.

[1]

[2]

[3]

[4]

Cimitero:Aiuto:Morph: differenze tra le versioni

Versione attuale delle 13:14, 19 giu 2021

Indice

Legenda

toggleLink

Morph 2.0

Note

Menu di navigazione

@@ Riga 1: / Riga 1: @@
+{{sottotitolo|Da Nonciclopedia, l'enciclopedia che ti rende la vita difficile.}}
-{{titolo|Aiuto:Manuale/Morph}}
+{{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 che permette di visualizzare una serie di blocchi di testo uno alla volta. Ci sono quattro tipi di 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 ''<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.
-==toggleLink==
-Simile al template [[Template:Cassetto|cassetto]], è costituito da cinque parti:
- <nowiki><span class="toggleLink"</nowiki> id="''nome''Link"></span>
-Dove ''nome'' è il nome che vogliamo dare a questo toggleLink. La posizione di questo codice indica dove verrà visualizzato l'interruttore.
+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.
- <nowiki><span</nowiki> id="''nome''InitialState" style="display: none;">''Testo''</span>
-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)
+==Legenda==
- <nowiki><span</nowiki> id="''nome''CollapseText" style="display: none;">''Testo''</span>
+Nel seguente testo troverete di frequente alcune parti di testo in corsivo, che indicano dei contenuti variabili. Vediamo cosa significano:
-Dove ''nome'' è il solito nome, mentre ''Testo'' è il testo che verrà visualizzato sull'interruttore aperto.
+*''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<ref>Questo sarà quindi il testo che verrà visualizzato durante il caricamento</ref>, mentre per i link è consigliabile usare del testo semplice, o al massimo un link che punti ad un paragrafo della stessa pagina<ref>Come succede per esempio [[NonLibri:Divina Commedia|qui]] se provate a cliccare su una delle frecce.</ref>.
+*''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<ref>Per esempio la numerazione 1,2,4 mostrerà solo i contenuti 1 e 2, mentre il 4 rimarrà inaccessibile.</ref>.
+==toggleLink==
- <nowiki><span</nowiki> id="''nome''ExpandText" style="display: none;">''Testo''</span>
+Questo Morph è simile al template [[Template:Cassetto|cassetto]], anche se più potente. Permette di far comparire e scomparire un testo cliccando su un link con il testo di comparsa/scomparsa personalizzabile.
-Dove ''nome'' è il solito nome, mentre ''Testo'' è il testo che verrà visualizzato sull'interruttore chiuso.
+;Dichiarazione
- <nowiki><span</nowiki> id="''nome''">''Testo''</span>
+ <nowiki><div class="toggleLink"</nowiki> id="''nome''Link"></div>
-Dove ''nome'' è il solito nome, mentre ''Testo'' è il testo che dovrà apparire e scomparire.
+La posizione di questo codice indica dove verrà visualizzato l'interruttore.
+;Effetti speciali
-==morphMaster==
+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:
-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:
- <nowiki><span class="morphMaster"</nowiki> id="''nome''Master">''Testo''</span>
+ <nowiki><div class="toggleLink noSlide"</nowiki> id="''nome''Link"></div>
+Alla stessa maniera è possibile eliminare l'effetto di dissolvenza aggiungendo la classe {{tt|noFade}}:
-Dove ''nome'' è il nome che si vuole dare al Morph, mentre ''Testo'' è il testo che verrà visualizzato durante il caricamento.
+ <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
-Ora passiamo ai contenuti. Ogni contenuto andrà inserito in questo modo:
- <nowiki><span</nowiki> id="''nome''Content''n''">''Contenuto''</span>
+ <nowiki><div</nowiki> id="''nome''">''Testo''</div>
-Oppure
- <nowiki><div</nowiki> id="''nome''Content''n''">''Contenuto''</div>
-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.<br />
-Il tag con l'ID ''nome''Content1 sarà quello che verrà visualizzato dopo il caricamento della pagina.
+;Link
-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.
+*Stato iniziale (aperto o chiuso), in questo caso il testo dovrà essere semplicemente ''1'' o ''0'', rispettivamente.
+ <nowiki><div</nowiki> id="''nome''InitialState" style="display: none;">''Testo''</div>
+*Testo di apertura
+ <nowiki><div</nowiki> id="''nome''ExpandText" style="display: none;">''Testo''</div>
+*Testo di chiusura
+ <nowiki><div</nowiki> id="''nome''CollapseText" style="display: none;">''Testo''</div>
+;Esempio
-L'ultimo passo, e poi abbiamo finito. Mancano ancora i link ai vari contenuti.<br />
+Il codice
-'''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.
+ <nowiki><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></nowiki>
+produce:
+<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="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>
+[[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.}}.
+È 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
-Ci sono due tipi di link, quello diretto e quello sequenziale. Vediamoli entrambi:
+ <nowiki><div class="morphMaster"</nowiki> id="''nome''Master">''Testo''</div>
-;Link diretto
+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.
-È molto importante che ci sia sempre un link per ogni contenuto. Per inserire un link basta usare questo codice:
- <nowiki><span</nowiki> id="''nome''Link''n''">''Testo''</span>
-Oppure
- <nowiki><div</nowiki> id="''nome''Link''n''">''Testo''</div>
-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.
+;Effetti speciali
-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ì:
+Di default il contenuto che compare ha un effetto di dissolvenza. È possibile eliminare questo effetto aggiungendo la classe {{tt|noFade}} nella dichiarazione:
- <nowiki><span</nowiki> id="''nome''Link1" style="display: none;">''Testo''</span>
+ <nowiki><div class="morphMaster noFade"</nowiki> id="''nome''Master">''Testo''</div>
+;Contenuti
-;Link sequenziali
+ <nowiki><div</nowiki> class="''nome''Content''n''" style="display:none;">''Contenuto''</div>
-Anche di questo tipo di link se ne può usare uno solo, e possono convivere con i link diretti.<br />Per passare al contenuto precedente c'è bisogno di questo codice:
+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 />
- <nowiki><span</nowiki> id="''nome''LinkPrev">''Testo''</span>
+È possibile associare più di una classe allo stesso tag:
-Oppure
- <nowiki><div</nowiki> id="''nome''LinkPrev">''Testo''</div>
+ <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''.
-Mentre per passare al contenuto successivo serve questo codice:
- <nowiki><span</nowiki> id="''nome''LinkNext">''Testo''</span>
-Oppure
- <nowiki><div</nowiki> id="''nome''LinkNext">''Testo''</div>
-Dove, come sempre, ''nome'' è il solito nome mentre ''Testo'' è il testo visualizzato nel link.
+;Contenuto iniziale
-==multiMorphMaster==
+Di default la funzione morph sceglie di mostrare come contenuto iniziale tutti i tag con la classe ''nome''Content1. È possibile modificare questo comportamento:
-Si riportano qui solo le differenze col codice predecente, vista la forte somiglianza tra i due sistemi.
+ <nowiki><div</nowiki> id="''nome''Start" style="display: none;">''n''</div>
-;span iniziale
+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.
- <nowiki><span class="multiMorphMaster"</nowiki> id="''nome''Master">''Testo''</span>
+[[File:Donna anatra.jpg|thumb|right|250px|Esempio di Morph malriuscito. Notate il panico della poveretta che non ha letto questo manuale.]]
-;Link diretti
+;Link
- <nowiki><span</nowiki> class="''nome''Link''n''">''Testo''</span>
+*Link diretto
-Oppure
  <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 sequenziali
+*Link a un contenuto casuale
-Per passare al contenuto precedente c'è bisogno di questo codice:
- <nowiki><span</nowiki> class="''nome''LinkPrev">''Testo''</span>
+ <nowiki><div</nowiki> class="''nome''LinkRandom">''Testo''</div>
+*Link al contenuto precedente
-Oppure
  <nowiki><div</nowiki> class="''nome''LinkPrev">''Testo''</div>
-Mentre per passare al contenuto successivo serve questo codice:
+*Link al contenuto successivo
- <nowiki><span</nowiki> class="''nome''LinkNext">''Testo''</span>
-Oppure
  <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.
+;Contatore
+ <nowiki><div</nowiki> class="''nome''Counter">''Testo''</div>
+Il testo, opzionale, verrà sostituito dalla scritta '''(''contenutoCorrente''/''contenutiTotali'')'''.
+;Esempio
+Il codice
+ <nowiki><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></nowiki>
+produce
+<div style="background-color: #CCFFCC; border: 1px dotted; padding: 2px; text-align: center;"><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></div>
+==Note==
+<references />
-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.
+[[Categoria:Aiuto]]
-==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
- <nowiki><span class="galleryMorphMaster"</nowiki> id="''nome''Master">''Testo''</span>
-;contatore
- <nowiki><div</nowiki> id="''nome''Counter">''Testo''</div>
-Oppure
- <nowiki><span</nowiki> id="''nome''Counter">''Testo''</span>

Cimitero:Aiuto:Morph: differenze tra le versioni

Versione attuale delle 13:14, 19 giu 2021

Legenda

toggleLink

Morph 2.0

Note

Menu di navigazione

Ricerca