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 });
}
});
});

4 – Conclusion, démo et fichiers

J’espère que ce tutorial vous aura été utile.
Vous pouvez télécharger les fichiers d’example et voir une démo.

Lorsque vous testez la démo, changer de vue, et rafraichissez votre page pour voir l’effet des cookie (sauvegarde ou non de votre vue)