Cimitero:Aiuto:Morph

(Rimpallato da Aiuto:Morph)
Vai alla navigazione Vai alla ricerca

« 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

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

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">

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

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

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

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

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:
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 link, link multipli allo stesso contenuto, link di scorrimento multipli e 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.

Esempio di Morph malriuscito. Notate il panico della poveretta che non ha letto questo manuale.
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

  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.