L’articolo introduttivo su jQuery ha dato spazio ai due argomenti classici di un tutorial alle prime pagine : installazione e i concetti base. Ho avuto modo, comunque, anche di presentarvi un banale e veloce esempio basato sugli eventi, argomento base su jQuery che riprendo e approfondisco proprio in questo articolo.
Gli Eventi
Gli eventi, come detto, gestiscono ed intercettano i comportamenti che ha l’utente quando interagisce con il browser : click, mouseover, doppioclick, resize ecc Ecco perché, come dicevo, sono la base di jQuery e non solo. L’elenco completo degli eventi disponibili e sfruttabili potete trovarlo in questa sezione della documentazione di jQuery.
Nell’esempio mostrato nell’articolo precedente, era citato l’evento click applicato ad un collegamento che scatenava un semplice popup. Vi riporto parte dell’esempio per rinfrescarvi la memoria (senza riscrivere tutto il codice) :
$(document).ready(function(){
$(“a”).click(function(){
alert(“Ciao Pecciola!”);
});
});
…………………………………………
…………………………………………
<h3 align=”middle”> Provate questo link : </h3>
<p align=”middle”> <a href=”http://pecciola.com/”>Pecciola</a> </p>
Seguendo lo stesso discorso, potete sfruttare l’evento click, ad esempio, per far scomparire lentamente il collegamento stesso. Resterà immutato tutto il codice, tranne la parte deputata a gestire l’evento click che diventerà :
$("a").click(function(){
$(this).hide("slow");
return false;
});
Proseguiami, ora, sempre con gli eventi, ma mostrando un esempio leggermente più complesso che riesce già a darvi un’idea più precisa delle potenzialità degli eventi in jQuery.
Evento bind()
Cenno particolare (essendo molto interessante e sfruttabile) é l’evento bind() e il suo corrispettivo unbind(). Grazie a questo metodo, infatti, siamo capaci di collegare una o più funzioni (chiamate handlers) ad uno o più eventi.
Ecco la sintassi precisa :
bind ( type, data, fn )
In modo particolare, il metodo bind() richiede tre parametri: il primo che indica il tipo di evento (o di eventi), il secondo (opzionale) é un oggetto JavaScript, mentre il terzo é la funziona lanciata al manifestarsi di quell’evento particolare.
Gli eventi supportati sono: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.
Vediamo un esempio più complesso del primo, come detto, che sfrutta proprio questo metodo.
Supponiamo di avere tre collegamenti (rosso, verde, viola) e, in relazione all’evento che l’utente scatenerà sul link, verrà riempito un quadrato del colore corrispondente.
Passiamo al codice html :
<html>
<head>
<link rel="stylesheet" href="esempio2.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".rosso").bind("mouseover", function() {
$("#quadratino").removeClass().addClass("bgrosso");
});
$(".verde").bind("click", function() {
$("#quadratino").removeClass().addClass("bgverde");
});
$(".giallo").bind("dblclick", function() {
$("#quadratino").removeClass().addClass("bggiallo");
});
});
</script>
</head>
<body>
<div>
<p align="middle"> <img src="jquery.jpg" alt="jQuery" /></p>
<h1 align="middle"> Secondo Esempio jQuery </h1>
<h3 align="middle"> Provate i 3 links : </h3>
<ul>
<li class="rosso">rosso</li>
<li class="verde">verde</li>
<li class="giallo">giallo</li>
</ul>
</div>
<div id="quadratino"></div>
</body>
</html>
Prima di passare al css, facciamo due considerazioni :
- Sono stati scelti 3 eventi sui rispettivi collegamenti : mouseover, click e dblclick così per dare una visione più globale
- Avrete notato come, prima di aggiungere una nuova classe all’identificatore del div ‘quadratino’, abbiamo rimosso tutte le altre ($(‘quadrato’).removeClass()) presenti per esser sicuri di assegnare al quadrato un solo colore.
Il file css associato sarà del tipo :
#quadratino{
height:350px;
width:350px;
}
.bgrosso{
background: red;
}
.bgverde{
background: green;
}
.bggiallo{
background: yellow;
}
.rosso{
color:red;
}
.verde{
color:green;
}
.giallo{
color:yellow;
}
Eccovi l’esempio in esecuzione a questo link.
Conclusioni
In questa seconda lezione si é parlato in modo più approfondito della gestione degli eventi in jQuery con un esempio banale quanto significativo. Ma non é tutto. Serve, infatti, una terza lezioncina per definire meglio l’argomento eventi e spiegare bene alcune cosette importanti. Forse, dopo aver visto l’ultimo esempio, qualche domanda/dubbio vi sarà anche sorto…vuol dire che siete acuti….appuntamento a fra qualche giorno con la terza puntata ancora sugli eventi.
