The Old Intense Minimalism

jQuery 1: pragma

Dopo aver accennato ai principi fondamentali di jQuery (tutto nasce da $() e il risultato di un metodo jQuery è sempre un oggetto jQuery) vediamo un po’ concretamente con qualche esempio come si può usare jQuery stesso.

Riprendo dall’esempio fatto la volta scorsa:

$("p.surprise").addClass("ohmy").show("slow");

Questa chiamata:

1. Seleziona tutti gli elementi p.surprise (selettore stile CSS).
2. Aggiunge a tutti gli elementi p.surprise la classe “ohmy” (class=”ohmy”).
3. Visualizza tutti gli elementi p.surprise (modificati con class=”ohmy”) con una animazione lenta.

Avete provato a pensare quante righe di codice avrebbe richiesto una modifica analoga, anche premettendo che avevate già la funzione che usa i selettori CSS?

Avete notato che tutto questo con jQuery si fa in una riga, in modo chiaro ed efficiente?

Proseguendo in modo intuitivo:

1. se c’è un addClass() c’è anche un removeClass().
2. se c’è show() c’è anche hide().

Così è. Non solo, dato che show() e hide() sono due operazioni distinte che spesso si accompagnano, la sintesi è la funzione toggle(), che non fa altro che chiudere quando è aperto e aprire quando è chiuso. Ovvero, toggle() è un interruttore.
Piccola variazione: avete visto il menu a scomparsa che io uso sul mio blog (si, la barra nra insomma). E’ evidente che si può realizzare in modo molto semplice con una piccola variazione del comando toggle(), che invece di aprirsi genericamente si apre regolando l’altezza. Questa operazione si chiama slide ed è utilizzabile con queste funzioni:

• slideUp() – chiude
• slideDown() – apre
• slideToggle() – interruttore

Piccola nota conclusiva a questo post. Le funzioni prendono tutte due parametri, entrambi opzionali:

1. speed – il primo parametro regola la velocità di apertura/chiusura
2. callback – il secondo parametro è una funzione che viene chiamata appena l’operazione si completa.

Come sempre, se ci sono dubbi chiedete pure, non fa che bene anche a questo tutorial.