Mise en place d’un CSS Switcher avec jQuery

Quand j’ai crée ce blog j’ai voulu mettre en place un sélecteur de feuille de style CSS en utilisant jQuery. Par contre, je voulais faire ça avec le moins de code possible car je n’avais pas envie de faire quelque chose de compliqué pour une petite feature comme ça. Plutôt que de partir de zéro j’ai regardé ce qui se faisait sur internet et je suis tombé sur ce tutoriel qui explique très bien comment faire.

Note : Vous pouvez tester cette fonctionnalité sur mon blog en cliquant sur la petite palette de couleurs en bas à gauche de la page

Le code HTML

Il faut d’abord créer les liens permettant aux utilisateurs de sélectionner les feuilles de styles. Ce sera ensuite à vous de créer vos feuilles CSS ou vous pouvez récupérer celle de mon blog si vous voulez.

<ul id="cssSwitch">
    <li><a href="#" rel="css/red.css" class="cssred" title="Thème Rouge"></a></li>
    <li><a href="#" rel="css/green.css" class="cssgreen" title="Thème Vert"></a></li>
    <li><a href="#" rel="css/blue.css" class="cssblue" title="Thème Bleu"></a></li>
</ul>

L’attribut rel permet de savoir quel fichier CSS va être chargé par le lien. On aurait pu mettre le lien dans l’attribut href, mais si jamais l’utilisateur désactive javascript et clique sur le lien, il serait directement redirigé vers le fichier CSS !

Le code Javascript

Avec jQuery quelques lignes de codes suffisent à faire ce que nous voulons :

$(document).ready(function() {
    $("#cssSwitch li a").click(function() {
        $("link.switchable").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 30, path: '/'});
        $('body').hide().fadeIn(1250);
        return false;
    });
});

Une fois le document chargé, la fonction .click() va permettre d’effectuer plusieurs opérations lorsque le visiteur clique sur un des liens de la liste « cssSwitch ».

D’abord, elle va changer la valeur de l’attribut href de la balise link (ayant la classe switchable) par la valeur contenue dans l’attribut rel du lien sur lequel le visiteur a cliqué. Ensuite, grâce au plugin jquery cookie elle va stocker cette valeur dans un cookie pour se rappeler du choix du visiteur. L’avant dernière ligne est facultative, c’est juste un effet de mauvais goût que j’ai rajouté :) . Le « return false » à la fin permet simplement d’empêcher le navigateur d’essayer de suivre le lien quand on clique dessus.

Si vous testez le code en l’état vous vous rendrez compte que le style redevient celui par défaut quand on recharge la page. C’est parce qu’il vous manque ce petit bout de code :

if($.cookie("css")) {
    $("link.switchable").attr("href",$.cookie("css"));
}

La condition ci-dessus permet de tester l’existence d’un cookie appelé « css ». Si la condition est vérifiée, on change la valeur de l’attribut href de la balise link par la valeur contenue dans le cookie. Ce qui au final donne le code suivant :

if($.cookie("css")) {
    $("link.switchable").attr("href",$.cookie("css"));
}

$(document).ready(function() {
    $("#cssSwitch li a").click(function() {
        $("link.switchable").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 30, path: '/'});
        $('body').hide().fadeIn(1250);
        return false;
    });
});

Petite précision tout de même. Pour éviter que le style par défaut n’apparaisse furtivement pendant le chargement de la page, il faut placer la condition en dehors de la fonction document ready bien qu’il ne soit généralement pas recommandé de manipuler le DOM avant le chargement complet du document.

Les balises metas

Il y a fort à parier que certaines classes CSS seront communs aux différents thèmes. Il faut donc regrouper ces classes dans un fichier CSS qu’on appellera main.css, le reste étant spécifique à chaque feuille CSS.

<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/blue.css" class="switchable" />
<script language="javascript" type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">... placer le script jQuery ici ...</script>

Pour définir un thème par défaut il suffit d’ajouter en plus le fichier CSS du thème et lui mettre une classe que j’ai appelée « switchable ». Cette classe permet d’identifier précisément la balise link afin de pouvoir la sélectionner avec jQuery comme on a fait plus haut.

Le code CSS

En option, je vous passe un bout de code CSS pour ceux qui ne saurait pas trop comment s’y prendre pour afficher des boutons pour la sélection des feuilles CSS

ul#cssSwitch li {float:left; margin-right: 4px; width:14px; height:14px; }
ul#cssSwitch li a {border:1px solid #050505; cursor:pointer; display:block; position: relative; width:14px; height:14px;}
ul#cssSwitch li a.cssred {background-color:#e83231; }
ul#cssSwitch li a.cssred:hover { background-color:#ca1615; border:1px solid #d8d8d8;}
ul#cssSwitch li a.cssgreen { background-color:#61ab18; }
ul#cssSwitch li a.cssgreen:hover { background-color:#4d8a11; border:1px solid #d8d8d8;  }
ul#cssSwitch li a.cssblue {background-color:#3688da; }
ul#cssSwitch li a.cssblue:hover { background-color:#206cb8; border:1px solid #d8d8d8;}

Bon bien sûr c’est une solution 100% javascript donc si l’utilisateur le désactive sur son navigateur cela ne marchera plus. Ceux qui veulent une solution côté serveur devraient plutôt s’orienter vers ce tutoriel.

2 Commentaires sur “Mise en place d’un CSS Switcher avec jQuery”

  • angelusergosum
    # Le 16 septembre 2014 à 3 h 58 min

    j’ai essayé votre code (je galère depuis 3 jours déjà sur le changement du style en pure jquery

    mais en fait avec votre code quand il n’ya pas de condition au début
    if($.cookie(« css »)) {
    $(« link.switchable »).attr(« href »,$.cookie(« css »));

    }

    (ca reste pas bien sur quand on charg la page mais je peux changer les couleurs)

    par contre
    quand je laisse la condition

    la il prend en charge mon dernier fichier css et je peux plus du tout changer de couleur

    ps: g fait copier coller de votre code rien changé du tout!

    1
  • mika
    # Le 16 septembre 2014 à 12 h 19 min

    Bonjour,

    Pas sûr d’avoir bien compris votre problème, déjà il faudrait regarder dans votre navigateur si le cookie est bien enregistré et voir si son contenu est bien mis à jour.

    Bien entendu il faut laisser la condition.

    Avec le recul je me rends compte que ce système tiens plus du bricolage qu’autre chose.

    2

Laisser un commentaire

Vous pouvez ces balises HTML dans votre commentaire :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current month ye@r day *