Aiuto:Morph

Da Nonciclopedia, l'enciclopedia libera...

Da Nonciclopedia, l'enciclopedia che ti rende la vita difficile.

Quote rosso1 Dunque, potrei aggiungere una funzione Morph che mi permetta di riassumere tutta Nonciclopedia in una sola pagina... Quote rosso2

~ 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
<div class="toggleLink" id="nomeLink"></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 noSlide nella dichiarazione:

<div class="toggleLink noSlide" id="nomeLink"></div>

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

<div class="toggleLink noFade" id="nomeLink"></div>

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

<div class="toggleLink noSlide noFade" id="nomeLink"></div>
Contenuto
<div id="nome">Testo</div>
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</div>
  • Testo di apertura
<div id="nomeExpandText" style="display: none;">Testo</div>
  • Testo di chiusura
<div id="nomeCollapseText" style="display: none;">Testo</div>
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:
Eddie Murphy il professore matto

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 gruppi di contenuti che vengono attivati dallo stesso linkNovità assoluta!, link multipli allo stesso contenutoProveniente dal vecchio multiMorph., link di scorrimento multipliProvenienti dal vecchio multiMorph. e contatori multipliProveniente dal vecchio galleryMorph.. È 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</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 noFade nella dichiarazione:

<div class="morphMaster noFade" id="nomeMaster">Testo</div>
Contenuti
<div class="nomeContentn" 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.
È possibile associare più di una classe allo stesso tag:

<div class="nomeContentn nomeContentm" 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 nomeContent1. È possibile modificare questo comportamento:

<div id="nomeStart" 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.

Donna anatra

Esempio di Morph malriuscito. Notate il panico della poveretta che non ha letto questo manuale.

Link
  • Link diretto
<div class="nomeLinkn">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
<div class="nomeLinkRandom">Testo</div>
  • Link al contenuto precedente
<div class="nomeLinkPrev">Testo</div>
  • Link al contenuto successivo
<div class="nomeLinkNext">Testo</div>

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</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
<div class="nomeCounter">Testo</div>

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

Cioè, stai davvero leggendo le ♪♫note♫♪?! Pazzesco...
  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.
Strumenti personali
wikia

Utente:Mufufu/Diario di bordo