Developpements » Coding http://developpements.org Portail basé sur le thème Développeur web Tue, 15 Nov 2011 16:32:37 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Code style switcher http://developpements.org/code-style-switcher/ http://developpements.org/code-style-switcher/#comments Sat, 17 Sep 2011 20:49:51 +0000 admin http://developpements.org/?p=1358 Un style switcher de CSS en Javasript avec mémorisation du choix par cookie

Le chargement des différentes feuilles de style se fait dans le header,
Notez que le la valeur du title correspondra a la valeur JS « setActiveStyleSheet » de votre menu html
Vous devrez charger dans le header le fichier styleswitcher.js

Ce petit add-on est compatible avec la plus part des sites actuels

?View Code TEXT
1
2
3
4
5
6
7

<link rel="stylesheet" href="http://yoursite/style.css" type="text/css" media="screen">
</link><link rel="stylesheet" href="http://yoursite/style.css" type="text/css" media="screen" title="default">
</link><link rel="alternate stylesheet" href="http://yoursite/black.css" type="text/css" media="screen" title="black">
</link><link rel="alternate stylesheet" href="http://yoursite/gray.css" type="text/css" media="screen" title="gray">
</link><link rel="alternate stylesheet" href="http://yoursite/green.css" type="text/css" media="screen" title="green">
</link><link rel="alternate stylesheet" href="http://yoursite/red.css" type="text/css" media="screen" title="red">
</link>

Le menu en HTML, qui fera fonction de sélecteur de thèmes par le chargement de la CSS

?View Code TEXT
1
2
3
4
5
6
7

<ul>
<li><a href="#" onclick="setActiveStyleSheet('default'); return false;">Default</a></li>
<li><a href="#" onclick="setActiveStyleSheet('black'); return false;">Black</a></li>
<li><a href="#" onclick="setActiveStyleSheet('gray'); return false;">Gray</a></li>
<li><a href="#" onclick="setActiveStyleSheet('green'); return false;">Green</a></li>
<li><a href="#" onclick="setActiveStyleSheet('red'); return false;">Red</a></li>
</ul>

Charger ce Js dans le header

?Download styleswitcher.js
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

    function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
 
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
 
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
 
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
 
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
 
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
 
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Articles du même thème

  • Aucuns articles du même thème trouvé
]]> http://developpements.org/code-style-switcher/feed/ 0