jQuery: imparare le basi con toggle. Mostra e nascondi con stile!

Giacomo Paita — Sat, 06 Feb 2010 10:31:40 +0000

Le pagine web che siamo abituati a navigare fanno ormai un uso notevole di animazioni e di effetti, resi possibili, anche, dall’utilizzo del linguaggio JavaScript.
Dopo anni di cattiva reputazione, perchè associato all’idea di popup invasivi e fraudolenti, è stato particolarmente rivalutato anche grazie alla diffusione di tecniche come AJAX e alla possibilità sempre più estesa di riprodurre effetti grafici dinamici senza la necessità di plugin come Flash.

La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato, bensì c’è un interprete incluso nel browser, e dato che ognuno (ma soprattutto IE) interpreta con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.

Cos’è jQuery?

Proprio per “facilitare” la creazione di pagine web, nel 2006 John Resig pubblicò la prima versione del suo ormai famosissimo framework: jQuery.
jQuery nasce quindi con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e con il più alto numero di plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework, ha una community estesa ed è facile da imparare.

JavaScript: cenni introduttivi

Per chi inizia da zero, ecco una breve introduzione alle buone e cattive pratiche da seguire nello scrivere codice JavaScript, quindi valide anche per jQuery.
Per prima cosa, maggiore è la separazione migliore è la qualità del nostro risultato.
Per ottenere ciò, è bene tenere a mente gli scopi per la quale una pagina web è scritta:

descrivere il contenuto della pagina (HTML semantico)
specificare la presentazione di tale contenuto (CSS)
controllare il comportamento del contenuto (JavaScript)

Anche se è possibile agganciare per rapidità il codice JavaScript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href, questo rappresenta una cattiva pratica.

Evitare quindi gli handlers:

click

e il codice javaScript all’interno dell’attributo href:

click

È poi possibile inserire snippets di codice all’interno del tag script:

Sicuramente, a meno che non sia un piccolo esercizio, il codice JavaScript va messo in file esterni:

La posizione migliore per chiarezza è all’interno del tag head, anche se alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di Google Analytics rispondesse per qualche ragione con tempi di attesa molto lunghi, ritarderebbe lo scaricamento dell’intera pagina web. Quindi, in generale è buon uso copiare gli script in locale, e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Ecco un’altra risorsa che illustra in modo esauriente questa tematica.

Iniziare ad usare jQuery

Per prima cosa occorre scaricare il core di jQuery, salvarlo in locale (per esempio: root\scripts\) e aggiungere all’intenro dell tag head il codice per richiamare la libreria. Così:





Dove inserire il link al core di jQuery? Qui sotto!

Possiamo poi iniziare a scrivere il codice in un file esterno, che va linkato dentro il tag head, dopo il link al core:

Il codice di jQuery deve sempre iniziare con il costrutto $(document).ready(), per segnalare alla pagina di eseguire il codice quando tutto il contenuto è caricato:

$(document).ready(function(){
	// il codice va qui
});

In jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe.
Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine, seguita dal ;).

Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento.

Mostra/Nascondi elementi: toggle

Vogliamo creare un menù in cui ci saimo dei semplici box da mostrare/nascondere al click sul titolo.
Ecco tutte le risorse per completare il progetto e una preview del risultato:

Risorse Demo

1. Impostiamo la struttura e applichiamo gli stili

Incominciamo con l’impostare il menù, con il nostro primo contenuto, cioè il titolo con l’anchor, seguito dal contenuto vero e proprio, cioè il titolo h3 e un paragrafo di testo:


	
    Prima Voce del Menù
	
	
	 Title
    Lorem ipsum dolor sit amet, consectetur
    congue justo, at ultricies diam mollis non.
    vestibulum libero. Donec consequat elementum
    tincidunt sapien malesuada fringilla.

Naturalmente possiamo inserire quanti elementi ci occorrono, all’interno del menù.
Applichiamo gli stili al codice, per esempio così:

body {
 font:normal 12px/14px "Lucida Sans Unicode",
 "Lucida Grande", sans-serif;
}
#menu {
 width:351px;
 margin:0 auto;
}
h2 {
 width:298px;
 padding:0 0 0 53px;
 height:40px;
 margin:0;
}
h2 a {
 color:#FFF;
 text-decoration:none;
 font-size:14px;
 line-height:40px;
}
h2.trigger {
 background:url(../gfx/bg_h2.jpg) left top no-repeat;
}
h2.active {
 background:url(../gfx/bg_h2.jpg) left bottom no-repeat;
}
.container {
 padding:20px;
 background:#f3f3f3;
 border:1px solid #999;
 color:#333;
}
h3 {
 margin:0;
 padding:0;
}
.container h3 {
 padding:0 0 20px 0;
 font-size:13px;
}
.container p {
 margin:0;
 padding:0;
}

2. Attiviamo il toggle con jQuery

Attiviamo odesso l’effetto toggle con jQuery. Per prima cosa nascondiamo tutti gli elementi cui è applicata la classe container. Selezioniamo poi tutti i titoli che hanno la classe trigger, applichiamo loro lo stile css cursor:pointer e attiviamo il toggle che aggiunge e rimuove la classe active. Per ultimo, agganciamo al click sul titolo il toggle:

$(document).ready(function()

  $(".container").hide();

  $("h2.trigger").css("cursor","pointer").toggle(function(){
  	$(this).addClass("active");
  }, function () {
  $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
  $(this).next(".container").toggle();
  });

});

Come si può notare, otteniamo un mostra nascondi piuttosto scattoso. Per ottenere un effetto "a tendina", possiamo utilizzare slideToggle:

$("h2.trigger").click(function(){
	$(this).next(".container").slideToggle("slow");
});

e ottenere una animazione più fluida.

Letture consigliate

Le basi di JQuery
Guida a jQuery
Imparare jQuery
Introduzione a jQuery – Prima parte
jQuery Tutorial – imparare ad usare jQuery da zero
jQuery API: toggle()
Simple Toggle with CSS & jQuerSimple Toggle with CSS & jQuery
Imparare jQuery: alternare le funzioni, le variabili, primi effetti

paitadesignblog » Programmazione