Changer le style de la page à la volée avec le plugin JQuery Style Switcher

arnaud — Wed, 09 Sep 2009 07:57:15 +0000

Le plugin JQuery Style Switcher (par Kevinluck) permet, comme son nom l’indique, de changer le style de la page. Le plugin donne donc la possibilité de changer la feuille de style attachée à la page sans aucun rechargement de la page.

Il est donc facile de mettre en place des liens pour permettre à l’utilisateur de sélectionner le style qu’il veut. Le plugin se permet même de créer un cookie pour enregistrer le style préféré du visiteur pour l’afficher par défaut lors de la prochaine visite !

voir la demo de JQuery Style Switcher

La mise en place du plugin JQuery est très simple. Pour cela il suffit comme à chaque d’importer le framework JQuery et le plugin dans la page, d’ajouter la classe « styleswitch » aux liens sur lesquels on souhaite appliquer le styleswitch. Il faut également penser à mettre en attribut « rel » du lien le nom du style que l’on va activer :

<a href="#" rel="style" class="styleswitch">style 1</a>
<a href="#" rel="style2" class="styleswitch">style 2</a>

Enfin, entre les balises , il faut importer toutes les feuilles de style que l’on veut en ajoutant « alternate » dans l’attribut « rel » de la balise des feuilles de style qui ne seront pas activées par défaut et mettre dans l’attribut title le nom du style (pour qu’il soit bien lié au lien que l’on souhaite) :

<link rel="stylesheet"  href="feuilledestyle1.css" type="text/css" title="style" />
<link rel="alternate stylesheet" type="feuilledestyle2.css" title="style2" />

Il n’y a rien de plus à faire, le plugin s’occupe de tout !

Pas encore de billet sur le même sujet !

JQuery, PHP, html, design... // arnaud-k : un blog de geek » styleswitcher

Changer le style de la page à la volée avec le plugin JQuery Style Switcher