Je ne sais pas si un style switcher a déjà été proposé, mais je porpose le mien que je viens de créer vite fait :
http://josselin.willette.free.fr/cod...styleswitcher/
L'utilisation de Javascript et non pas d'un langage serveur pour switchter les styles permet d'éviter le rechargement de la page.
J'ai mis en place un système de cookie qui permet de retrouver le style choisi à la prochaine reconnexion (ainsi qu'au rechargement de la page étant donné que rien n'est géré côté serveur)
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 <link rel="stylesheet" href="css/main.css" type="text/css" /> <link rel="stylesheet" href="css/bleu.css" type="text/css" /> <link rel="stylesheet" href="css/rouge.css" type="text/css" /> <!-- Mettre un lien vers toutes les feuilles de style permet de les charger dans le cache du navigateur et ainsi éviter le clignotement au changement du style. Seule la dernière balise link sera modifiée par le Javascript, alors ne pas mettre le main.css en dernier. -->
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 /* Récupération du cookie */ var cook = getCookie("style"); /* Si un cookie existe on affiche la feuille de style sauvegardée dans le cookie, sinon on met une feuille de style par défaut (ici rouge.css) */ if(cook == undefined) document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/rouge.css"; else document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/" + cook + ".css"; function setCookie(name, value, expire){ var timestamp = new Date(expire); document.cookie = name + "=" + escape(value) + "; expires=" + timestamp.toGMTString(); } function getCookie(name){ var cookies = document.cookie.split(/;/); for(var i = 0; i < cookies.length; i++){ var mycook = cookies[i].split(/=/); if(mycook[0] == name) return unescape(mycook[1]); } } function styleSwitcher(css){ document.getElementsByTagName('link')[document.getElementsByTagName('link').length-1].href = "css/" + css + ".css"; /* Création du cookie */ setCookie("style", css, (new Date(2010, 12).getTime())); } function setSelected(){ var options = document.getElementById('style').getElementsByTagName('option'); var n = options.length; for(var i = 0; i < n; i++){ if(options[i].value == cook) options[i].selected = true; } }
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <body onload="setSelected()"> <div id="main"> <h1>Mon site</h1> <select onchange="styleSwitcher(this.value)" id="style"> <option value="rouge">Rouge</option> <option value="bleu">Bleu</option> </select> </div> </body>
Suggestions ? Améliorations ?
Partager