Cookie jquery pour style switcher

1 – Pré-requis

Vous devez tout d’abord télécharger Jquery ainsi que le javascript de gestion des cookies.

Vous devez insérer le code suivant pour prendre en compte ces fichiers javascript.

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

$.cookie('cookie'); // récupérer cookie
$.cookie('cookie', 'valeur'); // créer un cookie avec une valeur
$.cookie('cookie', 'valeur'', { expires: 7 }); // créer un cookie avec une expiration dans 7 jours
$.cookie('cookie', '', { expires: -1 }); // effacer cookie

2 – Deux affichages différents pour les news

Voici un code basique permettant de créer un affichage normal de news comportant un titre, une image et un contenu; un second affichage de type liste ou seul le titre est présent.

<div class="normal">
<p>Titre du poste  </p>
<p><img src="images/zorrito.png" width="48" height="48" alt="zorrito" style="float:left;"/>Texte Texte Texte Texte Texte Texte Texte</p>
<p>Texte Texte Texte Texte Texte Texte Texte</p>
<p>Titre du poste 1 </p>
<p><img src="images/zorrito.png" width="48" height="48" alt="zorrito" style="float:left;"/>Texte Texte Texte Texte Texte Texte Texte</p>
<p>Texte Texte Texte Texte Texte Texte Texte</p>
</div>
<div class="liste">
<p>Titre du poste </p>
<p>Titre du poste 1 </p>
</div>

3 – Gestion de l’affichage lors de l’accès au site

Il va falloir récupérer le cookie et stocker la valeur de ce dernier dans une variable javascript.

<script type="text/javascript">
var affichage = $.cookie('swap_tuto'); //variable permettant de savoir le style de l'affichage
if (affichage == null) { var affichage = 'normal';} // si aucun cookie est créé, on aura un affichage standard par défaut.
if (affichage == 'normal') {$(document).ready(function(){ //si on a quitté sur un affichage normal on reviendra sur un affichage normal
$("a.changer_vue_avec").removeClass("swap");
$('div.liste').hide();
});}
if (affichage == 'liste') {$(document).ready(function(){
$("a.changer_vue_avec").addClass("swap");
$('div.normal').hide();
}); }
<script>

3 – Création du cookie suivant l’affichage sélectionné

Suivant le type d’affichage que nous aurons choisi, nous allons attribuer une valeur au cookie correspondant à la vue choisie.

$(document).ready(function(){
$("a.changer_vue_avec").toggle(function(){
if (affichage == 'normal')
{
$(this).addClass("swap");
$('div.normal').fadeOut('fast');
$('div.liste').fadeIn('fast');
$.cookie('swap_tuto', 'liste',{ expires: 99 });
}
if (affichage == 'liste')
{
$(this).removeClass("swap");
$('div.liste').fadeOut('fast');
$('div.normal').fadeIn('fast');
$.cookie('swap_tuto', 'normal',{ expires: 99 });
}
}, function () {
if (affichage == 'normal')
{
$(this).removeClass("swap");
$('div.liste').fadeOut('fast');
$('div.normal').fadeIn('fast');
$.cookie('swap_tuto', 'normal',{ expires: 99 });
}
if (affichage == 'liste')
{
$(this).addClass("swap");
$('div.normal').fadeOut('fast');
$('div.liste').fadeIn('fast');
$.cookie('swap_tuto', 'liste',{ expires: 99 });
}
});
});