Cimitero:Aiuto:Morph: differenze tra le versioni

Vai alla navigazione Vai alla ricerca
Naviga nella cronologia in modo interattivo
Contenuto aggiunto Contenuto cancellato
VisualeWikitesto
mNessun oggetto della modifica
Riga 1: Riga 1:
{{sottotitolo|Da Nonciclopedia, l'enciclopedia che ti rende la vita difficile.}}
{{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>''.


Riga 39: Riga 41:
<div id="provaToggleCollapseText" style="display:none;">Chiudimi</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>
<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==
==morphMaster==
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.
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.

Versione delle 11:45, 9 giu 2009

« 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>.

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.

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.

morphMaster

Questo Morph permette di avere una serie di avere una serie di link, a ognuno dei quali corrisponde un contenuto diverso[4]. Nonostante la limitazione dei link, questo Morph è sufficiente per quasi tutte le esigenze.

È possibile trovare qualche esempio di morphMaster tra i template, come questo o quest'altro, oppure in pagine come questa.

Dichiarazione

<div class="morphMaster" id="nomeMaster">Testo

Contenuti

<div id="nomeContentn" style="display:none;">Contenuto

Il tag con l'ID nomeContent1 sarà quello che verrà visualizzato dopo il caricamento della pagina.

Link
  • Link diretto

<div id="nomeLinkn">Testo

Se l'elemento nomeContent1 è solo di facciata[5] e non si desidera permettere all'utente di tornare a vederlo lo si può scrivere così:

<div id="nomeLink1" style="display: none;">Testo

  • Link al contenuto precedente

<div id="nomeLinkPrev">Testo

  • Link al contenuto successivo

<div id="nomeLinkNext">Testo

I link sequenziali, una volta arrivati all'inizio o alla fine, possono saltare all'altra estremità[6]

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 

<div class="morphMaster" id="provaMorphMaster" style="text-decoration:blink;">Attendere, caricamento in corso...</div>
<span id="provaMorphLinkPrev">Precedente</span> • <span id="provaMorphLink1">Contenuto 1</span> • <span id="provaMorphLink2">Contenuto 2</span> • <span id="provaMorphLink3">Contenuto 3</span> • <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>

produce

Attendere, caricamento in corso...

Precedente • Contenuto 1 • Contenuto 2 • Contenuto 3 • Successivo

multiMorphMaster

Questo Morph è una semplice variazione del morphMaster, che permette l'uso di più link per lo stesso contenuto.

Dichiarazione

<div class="multiMorphMaster" id="nomeMaster">Testo

Contenuti

<div id="nomeContentn">Contenuto

Link
  • Link diretto

<div class="nomeLinkn">Testo

  • Link al contenuto precedente

<div class="nomeLinkPrev">Testo

  • Link al contenuto successivo

<div class="nomeLinkNext">Testo

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.

Esempio

Questa è una piccola variazione della situazione precedente 

<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> • <span class="provaMultiMorphLink2">Contenuto 2</span> • <span class="provaMultiMorphLink3">Contenuto 3</span> • <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> • <span class="provaMultiMorphLink1">Contenuto 1</span> • <span class="provaMultiMorphLink3">Contenuto 3</span> • <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 2</div>
<div id="provaMultiMorphContent3" style="display:none;"><span class="provaMultiMorphLinkPrev">Precedente</span> • <span class="provaMultiMorphLink1">Contenuto 1</span> • <span class="provaMultiMorphLink2">Contenuto 2</span> • <span class="provaMultiMorphLinkNext">Successivo</span><br />Questo è il contenuto numero 3</div>

produce

Attendere, caricamento in corso...

galleryMorphMaster

Anche questo Morph è una variazione del morphMaster, ottimizzata per visualizzare una sequenza di oggetti[7]. 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 questo template.

Dichiarazione

<div class="galleryMorphMaster" id="nomeMaster">Testo

Contenuti

<div id="nomeContentn">Contenuto

Link
  • Link al contenuto precedente

<div id="nomeLinkPrev" style="display:none;">Testo

  • Link al contenuto successivo

<div id="nomeLinkNext">Testo

Contatore

<div id="nomeCounter">Testo

Esempio

Anche questa è una piccola variazione della situazione precedente 

<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="provaGalleryMorphCounter" style="text-align:center;">(1/?)</div>
<div id="provaGalleryMorphContent1" style="display:none;">Questo è il contenuto numero 1, che verrà visualizzato dopo il caricamento del Morph.</div>
<div id="provaGalleryMorphContent2" style="display:none;">Questo è il contenuto numero 2</div>
<div id="provaGalleryMorphContent3" style="display:none;">Questo è il contenuto numero 3</div>

produce

Successivo
Attendere, caricamento in corso...
(1/?)

Note

Template:Legginote

  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. ^ 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.
  5. ^ Per esempio potrebbe contenere qualche semplice istruzione su come usare i link.
  6. ^ 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.
  7. ^ O galleria, appunto
Estratto da "https://nonciclopedia.org/wiki/Cimitero:Aiuto:Morph?oldid=1263587"