jQuery Toggle Cookie Support

Question

J'essaie d'implémenter le plugin jQuery Cookie dans mon script de bascule à glissière, mais jusqu'à présent, je n'ai pas réussi. Voici mon code (sans mise en œuvre des cookies):

jQuery:

$(document).ready(function() { 
    $('a.toggle').click(function() { 
    var id = $(this).attr('name'); 
    $('#module' + id).slideToggle('fast'); 
    $('a.toggle[name='+id+']').toggle(); 
    return false; 
    }); 
}); 

HTML:

<a class="toggle" name="1" href="#">- Hide</a> 
<a class="toggle hidden" name="1" href="#">+ Show</a> 

<div id="module1"><p>Hello World</p></div> 

Quelqu'un sait s'il est assez facile à mettre en œuvre le plugin Cookie jQuery dans mon code existant il se souvient de l'état ouvert/fermé?

Merci.

Answer 1

Le plugin cookie jQuery est très facile à utiliser. Essentiellement, tout ce que vous devez faire est de définir un drapeau via un cookie lorsque le bouton bascule est utilisé.

Pour définir une valeur l'ensemble du site, une déclaration simple comme cela fonctionne:

$.cookie("currentToggle", "on", {path: "/"}); 

Et puis pour obtenir la valeur lorsque vous en avez besoin, utilisez:

var currentState = $.cookie("currentToggle"); 

Je ne suis pas Assurez-vous exactement comment vous prévoyez de l'utiliser, mais disons par exemple, vous devez suivre l'état sur plusieurs pages. Vous pouvez facilement définir un cookie lorsque la bascule se déclenche, en gardant la trace de l'état dans lequel il se trouve (on/off, etc.). Au cours d'autres chargements de page, un script commun peut vérifier le cookie et, en fonction du drapeau, définir le basculement. Cela donnerait l'apparence que le site se «souvient» de l'état précédent à travers les pages.

Juste un exemple d'utilisation quand même. J'espère que cela t'aides.

jQuery Plugin Cookie: http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/

Modifier pour fournir un échantillon de mise en œuvre:

Voici un exemple d'implémentation qui fonctionne. Requiert le plugin cookie jQuery et jQuery référencé, et une définition css. Fonctionne sur plusieurs pages lorsque tous les scripts et CSS sont définis sur chaque page.

Javascript:

$(document).ready(function() { 

    var button = $('#hideButton'); 

    //check the cookie when the page loads 
    if ($.cookie('currentToggle') === 'hidden') { 
     togglePanel(button, false); 
    } 
    else { 
     togglePanel(button, true); 
    } 

    //handle the clicking of the show/hide toggle button 
    button.click(function() { 
     //toggle the panel as required, base on current state 
     if (button.text() === "+Show") { 
      togglePanel($(this), true); 
     } 
     else { 
      togglePanel($(this), false); 
     } 
    }); 

}); 

function togglePanel(button, show) { 

    var panel = $('#panel'); 

    if (show) { 
     panel.removeClass('hidden'); 
     button.text('-Hide'); 
     $.cookie('currentToggle', '', { path: '/' }); 
    } 
    else { 
     panel.addClass('hidden'); 
     button.text('+Show'); 
     $.cookie('currentToggle', 'hidden', { path: '/' }); 
    } 
} 

CSS:

.hidden 
{ 
    display: none; 
} 

Markup:

<a id="hideButton" href="javascript:;">-Hide</a> 
<div id="panel"> 
    <p>Hello World</p> 
</div> 

Il y a beaucoup de chances de moyens plus efficaces pour la mettre en œuvre, mais une preuve rapide concept du ci-dessus fonctionne bien.