Cookie jquery pour style switcher

Par zorrito le 16 avril 2009 à 17:34 :: codage

Dans le tutorial suivant nous allons apprendre à utiliser les cookie avec la libraire javascript jquery.

Nous allons réaliser ensemble un bouton qui nous permettra de switcher entre deux vues différentes pour les articles de votre blog par exemple et de pouvoir ainsi garder sa préférence d’affichage.

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)

Articles similaires

• Icones RSS
• Icones gratuites
• Inspiration logo
• Bloguer depuis votre iphone.
• CSV vers MySQL (correspondance des colonnes)