Changer le style de la page a la volee avec le plugin JQuery Style Switcher

styleswitcher

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 <head>, il faut importer toutes les feuilles de style que l’on veut en ajoutant « alternate » dans l’attribut « rel » de la balise <link> 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 !

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *