Jquery - Sauvegarde l'état de la classe de plusieurs div # à un cookie?

Question

J'essaie de répliquer un effet d'interface utilisateur comme sur http://mcfc.co.uk J'ai écrit un script qui cache une fonction div on click et applique une classe à un div avec le #id correspondant au div sur lequel on a cliqué, et l'inverse. Je suis nouveau à jQuery, comment pourrais-je enregistrer l'état de ces divs 'cliqué' à un cookie pour montrer qui étaient cachés etc ??

Merci pour toute aide.

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.portlet').click(function(){ 
     var idtext = this.id; 
     $(this).hide(); 
     $("[id*=" + idtext + "]").not(this).addClass('add'); 
    }); 

    $("#content-footer div").click(function(){ 
     var idtext = this.id; 
     $(this).removeClass('add');     
     $("[id*=" + idtext + "]").not(this).show(); 
    }); 
}) 

</script> 

HTML:

DIVs qui sont cachés/affichés sur ..... cliquez

<div class="column" id="col0"> 

<div class="portlet" id="p_0"> 
    <div class="portlet-header">Feeds</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit 
    </div> 
</div> 
<div class="portlet" id="p_1"> 
    <div class="portlet-header">News</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit 
    </div> 
</div> 

</div> 

etc.... 

cette classe de DIV est appliquée à .....

<div id="content-footer"> 
    <div id="p_0"></div> 
    <div id="p_1"></div> 
    <div id="p_2"></div> 
    <div id="p_3"></div> 
    <div id="p_4"></div> 
</div> 

Answer 1

J'ai posté un demo of what I think you want here. Assurez-vous d'inclure le jQuery cookie plugin.

Voici le code HTML je:

<div class="column" id="col0"> 

<div class="portlet" id="p_0"> 
    <div class="portlet-header">Feeds</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div> 
<div class="portlet" id="p_1"> 
    <div class="portlet-header">News</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div> 
<div class="portlet" id="p_2"> 
    <div class="portlet-header">Extra</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div> 
<div class="portlet" id="p_3"> 
    <div class="portlet-header">Other</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div> 
<div class="portlet" id="p_4"> 
    <div class="portlet-header">Last</div> 
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
</div> 

</div> 

<div id="content-footer"> 
    <div name="p_0">p0 - Feeds</div> 
    <div name="p_1">p1 - News</div> 
    <div name="p_2">p2 - Extra</div> 
    <div name="p_3">p3 - Other</div> 
    <div name="p_4">p4 - Last</div> 
</div> 

Et le script:

$(document).ready(function(){ 
var cookie = $.cookie("hidden"); 
var hidden = cookie ? cookie.split("|").getUnique() : []; 
var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date 

// Remember content that was hidden 
$.each(hidden, function(){ 
    var pid = this; //parseInt(this,10); 
    $('#' + pid).hide(); 
    $("#content-footer div[name='" + pid + "']").addClass('add'); 
}) 

// Add Click functionality 
$('.portlet').click(function(){ 
    $(this).hide(); 
    $("#content-footer div[name=" + this.id + "]").addClass('add'); 
    updateCookie($(this)); 
}); 
$("#content-footer div").click(function(){ 
    $(this).toggleClass('add'); 
    var el = $("div#" + $(this).attr('name')); 
    el.toggle(); 
    updateCookie(el); 
}); 

// Update the Cookie 
function updateCookie(el){ 
    var indx = el.attr('id'); 
    var tmp = hidden.getUnique(); 
    if (el.is(':hidden')) { 
    // add index of widget to hidden list 
    tmp.push(indx); 
    } else { 
    // remove element id from the list 
    tmp.splice(tmp.indexOf(indx) , 1); 
    } 
    hidden = tmp.getUnique(); 
    $.cookie("hidden", hidden.join('|'), { expires: cookieExpires }); 
} 
}) 

// Return a unique array. 
Array.prototype.getUnique = function() { 
var o = new Object(); 
var i, e; 
for (i = 0; e = this[i]; i++) {o[e] = 1}; 
var a = new Array(); 
for (e in o) {a.push (e)}; 
return a; 
} 

// Fix indexOf in IE 
if (!Array.prototype.indexOf) { 
Array.prototype.indexOf = function(obj, start) { 
    for (var i = (start || 0), j = this.length; i < j; i++) { 
    if (this[i] == obj) { return i; } 
    } 
    return -1; 
} 
} 

---

Mise à jour: Ajout d'un prototype "indexOf" à la fin du script ci-dessus pour fixer un IE bug

Mise à jour n ° 2: Ajout de la variable cookieExpires, utilisez un nombre pour définir le nombre de jours, définissez-le en tant que date() pour définir un e nd date ou "null" pour le définir comme cookie de session.

Answer 2

Puisque vous utilisez déjà jQuery, vous pouvez en profiter et utiliser le plugin très simple et facile à utiliser, Cookie:Vous pouvez voir quelques demos ici.

Ou ici:

$.cookie("myCookie", true); 

alert($.cookie("myCookie")); // alerts true. but remember, it's always returned as a string. 

mise à jour avec l'exemple de l'utilisation:

$(document).ready(function(){ 
    $('.portlet').click(function(){ 
     var idtext = this.id; 
     $(this).hide(); 
     $("[id*="+ idtext +"]").not(this).addClass('add'); 
     $.cookie(idtext, false); 
    }); 

    $("#content-footer div").click(function(){ 
     var idtext = this.id; 
     $(this).removeClass('add');     
     $("[id*="+ idtext +"]").not(this).show(); 
     $.cookie(idtext, true); 
    }); 
}) 

Comme vous pouvez le constater, nous mettons l'état visible de cet identifiant courant (idtext) dans un cookie avec la valeur true ou false. Lors du chargement de ces portlets, vous pouvez vérifier le cookie (côté serveur ou côté client, votre choix) et servir le frontal comme vous le souhaitez. Dites-moi si vous avez besoin de plus d'aide :-)