Sono molti i servizi online che consentono agli utenti di scegliere lo stile delle pagine in base ai propri gusti e/o esigenze. Per consentire questa scelta agli utenti bisogna progettare diversi file CSS (uno per ogni stile diverso) e far scegliere all’utente quello da lui preferito.
Nell’articolo di oggi vedremo come realizzare un semplicissimo switcher di stili utilizzando jQuery e pochissime righe di codice.
La prima cosa da fare è realizzare una pagina di esempio e almeno due fogli di stile separati. Per l’occasione ho realizzato due stili come i seguenti:
I relativi fogli di stile vanno a modificare il colore di sfondo e del carattere lasciando inalterata la struttura della pagina. Ho chiamato i due stili:
- style_orange.css
- style_green.css
Un foglio di stile alternativo
Prima di procedere con il codice Javascript integriamo una soluzione più “antica” che già da molto tempo consente l’utilizzo di fogli di stile alternativi. Firefox, Opera e altri browser eccetto IE6 e Safari consentono, infatti, di caricare un foglio di stile alternativo dichiarato nell’header che sostituisce il foglio di stile originale. Per realizzare ciò abbiamo bisogno di dichiarare “alternate” ovvero alternativo, il secondo foglio di stile come nel seguente esempio:
view source print?
1
<link rel="stylesheet" type="text/css" href="style_green.css" media="all" title="Green stylesheet" />
2
<link rel="alternate stylesheet" type="text/css" href="style_orange.css" media="all" title="Orange stylesheet" />
Per gli utilizzatori di Firefox è sufficiente andare nel menu Visualizza -> Stile di pagina -> e scegliere uno tra gli stili elencati. In Opera e Internet Explorer 8, invece, è presente nel menu Visualizza -> Stile.
La struttura della pagina
Entriamo ora nel dettaglio dell’articolo. Per prima cosa dobbiamo definire la struttura e il layout della pagina html.
view source print?
01
<html>
02
<head>
03
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
04
<title>Style Switcher</title>
05
06
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
07
<link id="link" rel="stylesheet" type="text/css" href="style_green.css" media="all" title="Green stylesheet" />
08
<link rel="alternate stylesheet" type="text/css" href="style_orange.css" media="all" title="Orange stylesheet" />
09
</head>
10
<body>
11
...
12
<div id="switcher">
13
<a href="#" class="orange">Orange</a> - <a href="#" class="orange">Green</a>
14
</div>
15
</body>
16
</html>
Il primo foglio di stile (style.css) realizza il layout della pagina senza assegnare colori di sfondo e di testo. Inizialmente viene caricato il foglio di stile verde (style_green.css) che andremo a modificare con jQuery. Come possiamo notare in questo foglio di stile ho inserito un id (link) che ci faciliterà la manipolazione con Javascript.
Il div#switcher contiene i link necessari alla modifica del foglio di stile; ogni link contiene una classe relativa al colore di base dello stylesheet.
Il codice Javascript
Vediamo ora il semplice codice jQuery di cui abbiamo bisogno:
view source print?
1
$(function(){
2
$('#switcher a').click(function(){
3
$('#link').attr('href', 'style_' + $(this).attr('class') + '.css' );
4
});
5
});
Come possiamo notare è semplicissimo il codice. L’handler, nel momento in cui avviene il click ad uno dei link contenuti nel precedente div, va a modificare l’attributo href del foglio di stile a cui precedentemente avevamo assegnato l’id #link.
Demo e Download
Possiamo vedere all’opera oppure scaricare l’esempio attraverso i seguenti link:
Demo Download
Conclusioni
In questo articolo abbiamo visto quanto semplice sia caricare diversi stili alternativi all’interno di una pagina web. Nel prossimo articolo estendermo lo script integrando la possibilità di ricordare la scelta dell’utente. Anche il prossimo articolo sarà semplicissimo da realizzare confermando la validità e la facilità d’uso di jQuery.