JQuery fornisce la sua controparte per ogni gestore d'evento tradizionale javascript: onload, onclick, onchange, onresize etc...
Poniamo il caso di voler costruire uno style switcher, cioè un piccolo pannello con tre bottoni che ci consenta all'utente di cambiare lo stile della pagina. Questo è il markup:
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-normal">Normal</div>
<div class="button" id="switcher-narrow">Narrow Column</div>
<div class="button" id="switcher-large">Large Print</div>
</div>
Un bottone per la pagina normale, uno per fare una stretta colonna, ed uno per il formato di stampa. Cfr. Step 1 (Ho aggiunto un header ed un paragrafetto)
Per prima cosa dobbiamo scrivere la regola CSS per formattare il testo in modo che sia adatto alla stampa:
body.large .chapter {
font-size: 1.5em;
}
Quindi basterà che quando premiamo sul pulsante Large print assegniamo al body della pagina la classe .large.
Javascript code:
$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
});
});
Stiamo usando il metodo bind() di JQuery che serve a legare un evento ad un particolare elemento della pagina.
L'evento è il click del mouse. Mentre dopo la virgola c'è la funzione anonima da eseguire in seguito al click.
Aggiungiamo gli eventi anche per gli altri bottoni.
CSS code
body.narrow .chapter {
width: 400px;
}
Javascript code
$(document).ready(function() {
$('#switcher-normal').bind('click', function() {
$('body').removeClass('narrow');
$('body').removeClass('large');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow');
$('body').removeClass('large');
});
$('#switcher-large').bind('click', function() {
$('body').removeClass('narrow');
$('body').addClass('large');
});
});