Si tratta di gestori d'eventi custom della libreria che sono in grado di eseguire una combinazione di funzioni in risposta all'interazione dell'utente.
Abbiamo visto già il gestore 'ready()'
Poniamo il caso di voler fare in modo che cliccando sul nostro style switcher i tre bottoni appaiano e scompaiano, fornendo così un pannello di tools utilizzabili solo quando rrichiesto
La prima cosa da fare è scrivere una classe CSS per nascondere un elemento:
.hidden {
display: none;
}
Un gestore molto utile in questi casi è 'toggle()': è un gestore che riceve come parametri due funzioni che vengono eseguite la prima al primo click del mouse, la seconda al successivo. Quindi se scriviamo
$(document).ready(function() {
$('#switcher h3').toggle(function() {
$('#switcher .button').addClass('hidden');
}, function() {
$('#switcher .button').removeClass('hidden');
});
});
Il risultato è il seguente: style switcher step 4, che applica e rimuove una classe da un elemento.
Lo stesso risultato avrei potuto ottenerlo con il metodo 'toggleClass':
$(document).ready(function() {
$('#switcher h3').click(function() {
$('#switcher .button').toggleClass('hidden');
});
});
Un altro compound event handler è 'hover()'. Non abbiamo ancora previsto un feedback sul rollover dei nostri bottoni.
Prima di tutto mi creo una classe:
#switcher .hover {
cursor: pointer;
background-color: #afa;
}
Quindi il mio codice javascript:
$(document).ready(function() {
$('#switcher .button').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
La funzione 'hover()' di JQuery prende come parametri in ingresso due funzioni: la prima viene eseguita quando mi sposto col mouse su un elemento, la seconda quando esco. Nel mio caso quindi aggiungo e rimuovo la classe appena scritta.
Il risultato è il seguente: style switcher step 5.