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 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]]}}
-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.
@@ Riga 18: / 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
@@ Riga 37: / Riga 45: @@
 <span id="provaToggle">Questo testo è visibile, ma se clicchi su ''Chiudimi'' scompare:</span><span class="toggleLink" id="provaToggleLink"></span></nowiki>
 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="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.]]
-==morphMaster==
+==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
  <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> &bull; <span id="provaMorphLink1">Contenuto 1</span> &bull; <span id="provaMorphLink2">Contenuto 2</span> &bull; <span id="provaMorphLink3">Contenuto 3</span> &bull; <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> &bull; <span id="provaMorphLink1">Contenuto 1</span> &bull; <span id="provaMorphLink2">Contenuto 2</span> &bull; <span id="provaMorphLink3">Contenuto 3</span> &bull; <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
- <nowiki><div</nowiki> id="''nome''Content''n''">''Contenuto''</div>
+ <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 diretto
  <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
  <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>
-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.
+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> &bull; <span class="provaMultiMorphLink2">Contenuto 2</span> &bull; <span class="provaMultiMorphLink3">Contenuto 3</span> &bull; <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> &bull; <span class="provaMultiMorphLink1">Contenuto 1</span> &bull; <span class="provaMultiMorphLink3">Contenuto 3</span> &bull; <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 2</div>
-<div id="provaMultiMorphContent3" style="display:none;"><span class="provaMultiMorphLinkPrev">Precedente</span> &bull; <span class="provaMultiMorphLink1">Contenuto 1</span> &bull; <span class="provaMultiMorphLink2">Contenuto 2</span> &bull; <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> &bull; <span class="provaMultiMorphLink2">Contenuto 2</span> &bull; <span class="provaMultiMorphLink3">Contenuto 3</span> &bull; <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> &bull; <span class="provaMultiMorphLink1">Contenuto 1</span> &bull; <span class="provaMultiMorphLink3">Contenuto 3</span> &bull; <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 2</div>
-<div id="provaMultiMorphContent3" style="display:none;"><span class="provaMultiMorphLinkPrev">Precedente</span> &bull; <span class="provaMultiMorphLink1">Contenuto 1</span> &bull; <span class="provaMultiMorphLink2">Contenuto 2</span> &bull; <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
- <nowiki><div</nowiki> id="''nome''Counter">''Testo''</div>
+ <nowiki><div</nowiki> class="''nome''Counter">''Testo''</div>
+Il testo, opzionale, verrà sostituito dalla scritta '''(''contenutoCorrente''/''contenutiTotali'')'''.
 ;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 class="galleryMorphMaster" id="provaGalleryMorphMaster" style="text-decoration:blink;">Attendere, caricamento in corso...</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
-<div style="background: #CCFFCC; border: 1px dotted; padding: 2px"><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 style="background-color: #CCFFCC; border: 1px dotted; padding: 2px; text-align: center;"><div class="morphMaster" id="provaMorphMaster">Attendere, caricamento in corso...</div>
-<div class="galleryMorphMaster" id="provaGalleryMorphMaster" style="text-decoration:blink;">Attendere, caricamento in corso...</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==
-{{Legginote}}
 <references />

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