Cimitero:Aiuto:Morph: differenze tra le versioni
MFH (rosica | curriculum) Nessun oggetto della modifica |
MFH (rosica | curriculum) Nessun oggetto della modifica |
||
Riga 1: | Riga 1: | ||
{{titolo|Aiuto:Manuale/Morph}} |
{{titolo|Aiuto:Manuale/Morph}} |
||
{{sottotitolo|Da Nonciclopedia, l'enciclopedia che ti rende la vita difficile.}} |
|||
Il Morph è uno strumento che funziona con javascript che permette di visualizzare una serie di blocchi di testo uno alla volta. Ci sono quattro tipi di Morph: |
|||
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>''. |
|||
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. |
|||
==toggleLink== |
|||
Simile al template [[Template:Cassetto|cassetto]], è costituito da cinque parti: |
|||
<nowiki><span class="toggleLink"</nowiki> id="''nome''Link"></span> |
|||
Dove ''nome'' è il nome che vogliamo dare a questo toggleLink. La posizione di questo codice indica dove verrà visualizzato l'interruttore. |
|||
==Legenda== |
|||
<nowiki><span</nowiki> id="''nome''InitialState" style="display: none;">''Testo''</span> |
|||
Nel seguente testo troverete di frequente alcune parti di testo in corsivo, che indicano dei contenuti variabili. Vediamo cosa significano: |
|||
Dove ''nome'' è lo stesso nome usato sopra, mentre ''Testo'' indica se l'interruttore dovrà essere chiuso (quindi il testo sarà semplicemente 0) oppure aperto (quindi il testo sarà 1) |
|||
*''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<ref>Questo sarà quindi il testo che verrà visualizzato durante il caricamento</ref>, mentre per i link è consigliabile usare del testo semplice, o al massimo un link che punti ad un paragrafo della stessa pagina<ref>Come succede per esempio [[NonLibri:Divina Commedia|qui]] se provate a cliccare su una delle frecce.</ref>. |
|||
*''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<ref>Per esempio la numerazione 1,2,4 mostrerà solo i contenuti 1 e 2, mentre il 4 rimarrà inaccessibile.</ref>. |
|||
==toggleLink== |
|||
<nowiki><span</nowiki> id="''nome''CollapseText" style="display: none;">''Testo''</span> |
|||
Questo Morph è simile al template [[Template:Cassetto|cassetto]], anche se più potente. Permette di far comparire e scomparire un testo cliccando su un link con il testo di comparsa/scomparsa personalizzabile. |
|||
Dove ''nome'' è il solito nome, mentre ''Testo'' è il testo che verrà visualizzato sull'interruttore aperto. |
|||
;Dichiarazione |
|||
<nowiki><span</nowiki> id="''nome''ExpandText" style="display: none;">''Testo''</span> |
|||
<nowiki><div class="toggleLink"</nowiki> id="''nome''Link" style="display:none;"></div> |
|||
Dove ''nome'' è il solito nome, mentre ''Testo'' è il testo che verrà visualizzato sull'interruttore chiuso. |
|||
La posizione di questo codice indica dove verrà visualizzato l'interruttore. |
|||
;Contenuto |
|||
<nowiki><span</nowiki> id="''nome''">''Testo''</span> |
|||
<nowiki><div</nowiki> id="''nome''">''Testo''</div> |
|||
Dove ''nome'' è il solito nome, mentre ''Testo'' è il testo che dovrà apparire e scomparire. |
|||
;Link |
|||
*Stato iniziale (aperto o chiuso), in questo caso il testo dovrà essere semplicemente ''1'' o ''0'', rispettivamente. |
|||
<nowiki><div</nowiki> id="''nome''InitialState" style="display: none;">''Testo''</div> |
|||
*Testo di apertura |
|||
<nowiki><div</nowiki> id="''nome''ExpandText" style="display: none;">''Testo''</div> |
|||
*Testo di chiusura |
|||
<nowiki><div</nowiki> id="''nome''CollapseText" style="display: none;">''Testo''</div> |
|||
==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. |
|||
La prima cosa di cui c'è bisogno è far capire al browser che si ha a che fare con un morphMaster, quindi all'inizio della pagina va scritto: |
|||
<nowiki><span class="morphMaster"</nowiki> id="''nome''Master">''Testo''</span> |
|||
Dove ''nome'' è il nome che si vuole dare al Morph, mentre ''Testo'' è il testo che verrà visualizzato durante il caricamento. |
|||
È 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]]. |
|||
Ora passiamo ai contenuti. Ogni contenuto andrà inserito in questo modo: |
|||
<nowiki><span</nowiki> id="''nome''Content''n''">''Contenuto''</span> |
|||
;Dichiarazione |
|||
Oppure |
|||
<nowiki><div class="morphMaster"</nowiki> id="''nome''Master">''Testo''</div> |
|||
;Contenuti |
|||
<nowiki><div</nowiki> id="''nome''Content''n''">''Contenuto''</div> |
<nowiki><div</nowiki> id="''nome''Content''n''">''Contenuto''</div> |
||
Dove ''nome'' è sempre lo stesso nome usato nello span più in alto, mentre ''n'' è un numero progressivo da 1 a quanti ne avete bisogno (ma non esagerate!) È importante che non ci siano buchi nella numerazione, altrimenti tutti i contenuti successivi al buco non verranno visualizzati.<br /> |
|||
Il tag con l'ID ''nome''Content1 sarà quello che verrà visualizzato dopo il caricamento della pagina. |
Il tag con l'ID ''nome''Content1 sarà quello che verrà visualizzato dopo il caricamento della pagina. |
||
;Link |
|||
La differenza tra i due tag è che ''span'' è un elemento in linea, quindi si può inserire all'interno di una frase, mentre ''div'' manda a capo prima e dopo il tag, quindi risulta utile per blocchi di testo, riquadri, o contenuti completamente separati da un contesto. |
|||
*Link diretto |
|||
L'ultimo passo, e poi abbiamo finito. Mancano ancora i link ai vari contenuti.<br /> |
|||
'''Attenzione''': morphMaster permette di avere un solo link per ogni contenuto. Se invece ti interessa avere più link allo stesso contenuto, è meglio usare il multiMorphMaster, tanto fino a questo punto il procedimento è uguale. |
|||
Ci sono due tipi di link, quello diretto e quello sequenziale. Vediamoli entrambi: |
|||
;Link diretto |
|||
È molto importante che ci sia sempre un link per ogni contenuto. Per inserire un link basta usare questo codice: |
|||
<nowiki><span</nowiki> id="''nome''Link''n''">''Testo''</span> |
|||
Oppure |
|||
<nowiki><div</nowiki> id="''nome''Link''n''">''Testo''</div> |
<nowiki><div</nowiki> id="''nome''Link''n''">''Testo''</div> |
||
Dove ''nome'' è sempre il solito nome, ''n'' è il numero del contenuto a cui si vuole linkare, e ''Testo'' è il testo che verrà visualizzato come link. |
|||
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ì: |
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>< |
<nowiki><div</nowiki> id="''nome''Link1" style="display: none;">''Testo''</div> |
||
*Link al contenuto precedente |
|||
;Link sequenziali |
|||
Anche di questo tipo di link se ne può usare uno solo, e possono convivere con i link diretti.<br />Per passare al contenuto precedente c'è bisogno di questo codice: |
|||
<nowiki><span</nowiki> id="''nome''LinkPrev">''Testo''</span> |
|||
Oppure |
|||
<nowiki><div</nowiki> id="''nome''LinkPrev">''Testo''</div> |
<nowiki><div</nowiki> id="''nome''LinkPrev">''Testo''</div> |
||
*Link al contenuto successivo |
|||
<nowiki><span</nowiki> id="''nome''LinkNext">''Testo''</span> |
|||
Oppure |
|||
<nowiki><div</nowiki> id="''nome''LinkNext">''Testo''</div> |
<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> |
|||
Dove, come sempre, ''nome'' è il solito nome mentre ''Testo'' è il testo visualizzato nel link. |
|||
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. |
|||
==multiMorphMaster== |
==multiMorphMaster== |
||
Questo Morph è una semplice variazione del morphMaster, che permette l'uso di più link per lo stesso contenuto. |
|||
Si riportano qui solo le differenze col codice predecente, vista la forte somiglianza tra i due sistemi. |
|||
;span iniziale |
|||
;Dichiarazione |
|||
<nowiki><span class="multiMorphMaster"</nowiki> id="''nome''Master">''Testo''</span> |
|||
<nowiki><div class="multiMorphMaster"</nowiki> id="''nome''Master">''Testo''</div> |
|||
;Link diretti |
|||
<nowiki><span</nowiki> class="''nome''Link''n''">''Testo''</span> |
|||
;Contenuti |
|||
Oppure |
|||
<nowiki><div</nowiki> id="''nome''Content''n''">''Contenuto''</div> |
|||
;Link |
|||
*Link diretto |
|||
<nowiki><div</nowiki> class="''nome''Link''n''">''Testo''</div> |
<nowiki><div</nowiki> class="''nome''Link''n''">''Testo''</div> |
||
*Link al contenuto precedente |
|||
;Link sequenziali |
|||
Per passare al contenuto precedente c'è bisogno di questo codice: |
|||
<nowiki><span</nowiki> class="''nome''LinkPrev">''Testo''</span> |
|||
Oppure |
|||
<nowiki><div</nowiki> class="''nome''LinkPrev">''Testo''</div> |
<nowiki><div</nowiki> class="''nome''LinkPrev">''Testo''</div> |
||
*Link al contenuto successivo |
|||
<nowiki><span</nowiki> class="''nome''LinkNext">''Testo''</span> |
|||
Oppure |
|||
<nowiki><div</nowiki> class="''nome''LinkNext">''Testo''</div> |
<nowiki><div</nowiki> class="''nome''LinkNext">''Testo''</div> |
||
Riga 79: | Riga 74: | ||
==galleryMorphMaster== |
==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. |
|||
Questo morph è praticamente identico al morphMaster, con la sola differenza che è ottimizzato per visualizzare oggetti in sequenza, ma non supporta link diretti. |
|||
;span iniziale |
|||
Un esempio di applicazione di questo Morph si può trovare in [[Template:Galleria|questo template]]. |
|||
<nowiki><span class="galleryMorphMaster"</nowiki> id="''nome''Master">''Testo''</span> |
|||
;contatore |
|||
;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">''Testo''</div> |
|||
*Link al contenuto successivo |
|||
<nowiki><div</nowiki> id="''nome''LinkNext">''Testo''</div> |
|||
;Contatore |
|||
<nowiki><div</nowiki> id="''nome''Counter">''Testo''</div> |
<nowiki><div</nowiki> id="''nome''Counter">''Testo''</div> |
||
Oppure |
|||
==Note== |
|||
<nowiki><span</nowiki> id="''nome''Counter">''Testo''</span> |
|||
{{Legginote}} |
|||
<references /> |
Versione delle 15:45, 24 mag 2009
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>.
Il Morph è uno strumento che funziona conLa 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" style="display:none;">
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
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">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.
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.
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">Testo
- Link al contenuto successivo
<div id="nomeLinkNext">Testo
- Contatore
<div id="nomeCounter">Testo
Note
- ^ Questo sarà quindi il testo che verrà visualizzato durante il caricamento
- ^ Come succede per esempio qui se provate a cliccare su una delle frecce.
- ^ Per esempio la numerazione 1,2,4 mostrerà solo i contenuti 1 e 2, mentre il 4 rimarrà inaccessibile.
- ^ 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.
- ^ Per esempio potrebbe contenere qualche semplice istruzione su come usare i link.
- ^ 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.
- ^ O galleria, appunto