Un articolo di questa sezione Javascript che merita senz'altro una lettura attenta è Interazione ed eventi in Javascript di Alessandro Fulciniti. Nel contesto dell'articolo, Alessandro ha proposto diversi esempi di codice e script. Uno di essi, quello che consente di mostrare e nascondere con un click specifici elementi della pagina, è stato successivamente rivisitato e presentato in questo intervento su <edit>, il blog di HTML.it. È di questa nuova versione del semplice script che ci occupiamo in questo appuntamento.
Iniziamo come sempre con l'esempio e con il link al pacchetto zip da scaricare. Contiene:
- i documenti di prova esempio_step1.html ed esempio.html
- lo script showhide.js
- l'immagine egg.jpg usata negli esempi
Il codice HTML
La parte relativa alla struttura HTML è piuttosto semplice (la riportiamo in forma abbreviata):
<p>In questo ultimo esempio....</p>
<div id="commenti" class="toggle">
<p>Sezione dei commenti...</p>
</div>
<p>Un paragrafo...</p>
<div id="immagine" class="toggle">
<img src="egg.jpg" alt="">
</div>
Le parti che ci interessano sono i due div, quello con id="commenti" e quello con id="immagine". Sono i due elementi che con l'ausilio dello script mostreremo e nasconderemo dinamicamente. Oltre ad un id univoco è fondamentale assegnare a questi elementi una classe 'toggle'. Vedremo tra poco perché. Per il momento osserviamo come si presenta il nostro esempio a questo punto.
Come si vede, i due div sono ben visibili. Il motivo è semplice: ad occuparsi della gestione della loro visualizzazione è lo script showhide.js, che ancora non abbiamo aggiunto alla pagina.
Aggiungere l'interattività
Incorporiamo ora nel modo consueto lo script:
<script type="text/javascript" src="showhide.js"></script>
Se visualizziamo ora l'esempio, noteremo che ha fatto la magia. I due div, al caricamento della pagina, non sono più visibili. Al loro posto due link: 'mostra commenti' e 'visualizza immagine'. Cliccandoci sopra, i due div saranno visibili e il testo del link cambia, rispettivamente in 'nascondi commenti' e 'nascondi immagine'. Cerchiamo di capire come funziona il tutto analizzando le parti essenziali dello script.
Ecco la prima parte:
if(document.getElementById && document.createElement){
document.write('<style type="text/css">*.toggle{display:none}</style>');
window.onload=function(){
/*le modifiche allo script vanno solo fatte qui*/
Attiva("commenti","mostra commenti","nascondi commenti");
Attiva("immagine","visualizza immagine","nascondi immagine");
}
}
Viene intanto valutato il supporto del DOM nel browser e se il supporto c'è lo script provvede a inserire una regola CSS da applicare agli elementi con class="toggle" (ricordate?). La regola imposta la loro proprietà display sul valore none. Significa che li nasconde.
Subito dopo, con l'evento window.onload, viene richiamata la funzione principale, 'Attiva'. Dovremo effettuare il richiamo per ciascun div dinamico presente nella pagina. Nel nostro caso sappiamo ormai che sono due. Come si vede, la funzione 'Attiva' ha bisogno di tre parametri:
Attiva("commenti","mostra commenti","nascondi commenti");
Il primo è l'id dell'elemento da mostrare/nascondere; il secondo è il testo iniziale del link; il terzo è il testo del link mentre l'elemento è visibile. Adattate il tutto alle vostre esigenze, ovviamente.
Nella seconda parte (che può essere lasciata intatta), lo script fa essenzialmente una cosa: sostituisce i due div con i rispettivi link di attivazione e implementa l'interattività tramite l'evento onclick.
In questa versione lo script presenta una gestione ottimizzata dell'evento window.onload che consente di superare i problemi di latenza nell'esecuzione dello script stesso.
