Nel precedente articolo abbiamo visto quanto semplice sia con jQuery realizzare uno script che consente all’utente di scegliere lo stile di base della pagina. Nell’articolo di oggi estenderemo il progetto iniziale integrando la possibilità di ricordare la scelta dell’utente attraverso l’uso dei COOKIE.
Rispetto al progetto precedente, ho creato anche un altro foglio di stile style_blue.css per aumentare le possibilità di scelta da parte dell’utente.
jQuery Cookie
La prima cosa da fare è importare il plugin necessario alla manipolazione dei cookie. Utilizzeremo l’ottimo jQuery Cookie che abbiamo visto in un precedente articolo ad esso dedicato.
Per comodità utilizziamo la versione online del cookie, quindi abbiamo bisogno del seguente codice da inserire all’interno dell’<head>:
view source print?
1
<script type="text/javascript" src="http://stilbuero.de/jquery/cookie/jquery.cookie.js"></script>
Verificare l’esistenza del Cookie
Dobbiamo ora modificare il codice Javascript creato la scorsa volta integrando, innanzitutto, il controllo di esistenza del cookie relativo al colore scelto all’utente e poi aggiungendo il salvataggio del cookie alla scelta del colore.
All’inizio del codice jQuery, quindi, dobbiamo aggiungere la verifica del cookie:
view source print?
1
//verifica esistenza colore
2
if( $.cookie('color') != null )
3
$('#link').attr('href', 'style_' + $.cookie('color') + '.css' );
In pratica, se esiste il cookie color, la pagina verrà caricata con quel determinato stile, altrimenti caricherà lo stile di default.
Creazione cookie
Al click su uno dei link relativi agli stili dobbiamo anche creare o aggiornare il cookie relativo, l’handler del click diventa quindi:
view source print?
1
$('#switcher a').click(function(){
2
$('#link').attr('href', 'style_' + $(this).attr('class') + '.css' );
3
4
//aggiungo il cookie
5
$.cookie('color', $(this).attr('class'));
6
});
Codice completo
Vediamo a questo punto il codice Javascript completo:
view source print?
01
$(function(){
02
03
//verifica esistenza colore
04
if( $.cookie('color') != null )
05
$('#link').attr('href', 'style_' + $.cookie('color') + '.css' );
06
07
$('#switcher a').click(function(){
08
$('#link').attr('href', 'style_' + $(this).attr('class') + '.css' );
09
10
//aggiungo il cookie
11
$.cookie('color', $(this).attr('class'));
12
});
13
14
});
![Come acquistare prodotto Amazon minor prezzo! [Guida]](https://m2.paperblog.com/i/288/2882378/come-acquistare-un-prodotto-su-amazon-al-mino-L-l7i3wY-175x130.png)
Pacman
Nostradamus
Magical Cat Adventure
Snake