Vediamo innanzitutto l’esempio che prenderemo in considerazione:
Quello che andremo a fare è molto semplice, faremo in modo che cliccando su un link venga cambiato il foglio stile della nostra pagina e che la nostra azione (a questo serviranno i cookie) rimarrà memorizzata dal browser per un determinato lasso di tempo!
Nell’esempio appena visto ho utilizzato diversi file, ci serviranno (vi rimando ai link per procurarvi il necessario):
Le librerie jQuery – scaricate la versione production.
Il plugin jquery cookie – da rinominare da .txt a .js
3 fogli stile (uno per il font normale, uno per il font piccolo ed uno per il font grande)
Il codice HTML da usare
Una volta in possesso del materiale iniziamo a scrivere il nostro codice html (che vi riporto per intero con già tutte le inclusioni e i pezzi di script).
Questa sarà la parte indispensabile per il nostro head:
<script src="jquery.js" type="text/javascript"></script>
<script src="cookie.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Mentre questo sarà il corpo della pagina contenuto nel body:
<div id="changestyle">
<ul id="nav">
<li><a rel="larger.css" href="#">larger</a></li>
<li><a rel="smaller.css" href="#">smaller</a></li>
<li><a rel="style.css" href="#">normal</a></li>
</ul>
</div>
jQuery, attiviamo lo script
Questo invece è un pezzo di javascript che dobbiamo inserire prima della chiusura del body:
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$(document).ready(function(){
swapcss();
});
Abbiamo quindi incluso jQuery, il plugin cookie ed un file scripts dove inseriremo il nostro codice javascript. Abbiamo poi scritto il nostro codice html ed infine abbiamo aggiunto altro codice javascript. Quest’ultimo sostanzialmente fa 2 cose. La prima parte dice: Se il cookie dal nome ‘css’ è stato settato (e lo setteremo nel file scripts.js) allora cambia l’attributo href del tag “link” (quello usato per includere il foglio stile) con il nome che gli abbiamo passato. In breve: usa il foglio stile con il nome che gli abbiamo passato. La seconda parte contenuta nella funzione document.ready non fa altro che richiamare ed eseguire la funzione swapcss().
Guardiamo il file script.js per capire meglio tutto:
function swapcss() {
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
}
Che cosa fa la funzione swapcss? Analizziamola passo passo:
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
Significa: quando clicchiamo su un link della nostra lista, cambia l’attributo href del tag link usando l’attributo rel dell’elemento su cui abbiamo cliccato.
Successivamente:
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
Setta un cookie dandogli il nome “css” e come valore l’attributo rel del link su cui ho cliccato. Dopodichè gli diciamo che questa condizione deve valere per 365 giorni e deve essere applicato al percorso “/”. Return false non fa altro che impedire al browser di raggiungere il link a cui puntava realmente il nostro tag.
Analizzata la funzione dovrebbe essere ora più chiaro il senso del codice presente nella pagina html. Non si fa altro che “controllare” se il cookie esiste in modo che appunto venga caricato il foglio stile corretto!
Se avrete fatto tutto correttamente dovreste ottenere lo stesso risultato del demo iniziale!
Ovviamente questo uso del plugin jquery cookie è molto semplice, ad ogni modo offre delle belle possibilità solitamente rilegate ai linguaggi server-side. Voi avete provato ad approfondire l’argomento?
