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
Puzza87 (rosica | curriculum) (→Note) |
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>'' 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.]]
==
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>
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>
;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="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
<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 />
| |||