Cimitero:Aiuto:Morph: differenze tra le versioni

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
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)
 
(18 versioni intermedie di 5 utenti non mostrate)
Riga 1:
{{sottotitolo|Da Nonciclopedia, l'enciclopedia che ti rende la vita difficile.}}
{{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.
Line 16 ⟶ 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 35 ⟶ 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-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.]]
 
==morphMasterMorph 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 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> idclass="''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 iI link precedentidiretti, ècasuali semplicementee chesequenziali inpossono questoconvivere casotranquillamente vengonoall'interno usatedello lestesso classiMorph inveceed degliè ID, col risultato chepossibile si possono inseriremettere più link diretti allo stesso contenuto, ecome anche più link sequenzialicasuali 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>
 
==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> idclass="''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="provaGalleryMorphMasterprovaMorphStart" style="text-decorationdisplay:blink none;">Attendere, caricamento in corso...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-color: #CCFFCC; border: 1px dotted; padding: 2px"><span id="provaGalleryMorphLinkPrev" style="display:none; floattext-align:left; position:relative; top:2px; left:2pxcenter;">Precedente</span><spandiv idclass="provaGalleryMorphLinkNextmorphMaster" styleid="float:right;provaMorphMaster">Attendere, position:relative;caricamento top:2px;in right:2px;">Successivocorso...</span><br clear="both" /div>
<div class="galleryMorphMaster" id="provaGalleryMorphMasterprovaMorphStart" style="text-decorationdisplay:blink none;">Attendere, caricamento in corso...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 />
 
Picciotti, Nerdoni, Rullatori, sloggiatori
10 131

contributi