堅持使用Cookie切換狀態

使用下面的代碼示例，我如何利用jquery cookie插件，以便每個div元素的切換狀態在瀏覽器會話之外保持不變。堅持使用Cookie切換狀態

謝謝。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

     <script type="text/javascript"> 

     jQuery.fn.slideFadeToggle = function(speed, easing, callback) { 
     return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
     }; 

     $(document).ready(function(){ 
     $('.toggle').show(); 
     $('.hide').click(function(){ 
      var t = $(this); 
      // toggle hidden div 
      t.parent().find('.toggle').slideFadeToggle(400, function(){ 
      // determine which image to use if hidden div is hidden after the toggling is done 
      var imgsrc = ($(this).is(':hidden')) ? 'http://i47.tinypic.com/vg0hu0.gif' : 'http://i45.tinypic.com/281tsle.gif'; 
      // update image src 
      t.attr('src', imgsrc); 
      }); 
     }) 
     }) 
     </script> 

     </head> 
     <body> 

     <div class="wrapper"> 
     <img class="hide" src="http://i45.tinypic.com/281tsle.gif" /> Header Text 1 
     <div class="toggle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
     </div> 

     <p> 
     <div class="wrapper"> 
     <img class="hide" src="http://i45.tinypic.com/281tsle.gif" /> Header Text 2 
     <div class="toggle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
     </div> 
     </p> 
     </body> 
    </html>

來源

2010-06-28 Sandra

想想你需要什麼，你需要做的第一件事是給你的每個「包裝」部分一個ID。此ID標識頁面瀏覽中的每個可切換部分。它不需要與id屬性相同，但如果包裝ID與相應的div.wrapper元素的id屬性值相同，則該屬性可能最容易。

然後，假設您希望所有部分最初都可見，則您的Cookie可以存儲隱藏部分的ID列表。這樣，沒有cookie意味着沒有隱藏部分，因此所有部分最初都是可見的。

每次用戶隱藏某個部分時，都會更新cookie值以包含新隱藏部分的ID。每次用戶取消隱藏某個部分時，都會更新Cookie值以排除現在可見部分的ID。

最後，在頁面加載時，您將遍歷cookie中的ID，隱藏列出的部分。

這裏是代碼，以幫助您開始：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.cookie.js"></script> 
<script type="text/javascript"> 

jQuery.fn.slideFadeToggle = function(speed, easing, callback) { 
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
}; 

/** 
* \returns an array of section IDs 
*/ 
function getHiddenSectionIDs() 
{ 
    var arr = ($.cookie('hidden_section_ids') || '').split(','); 
    for (var i = 0; i < arr.length; ++i) { 
     arr[i] = $.trim(arr[i]); 
     if (arr[i].length <= 0) 
      arr[i] = null; 
    } 
    return arr; 
} 

function setHiddenSectionIDsCookie(hiddenSectionIDs) 
{ 
    var str = ''; 
    for (var i = 0; i < hiddenSectionIDs.length; ++i) { 
     var id = hiddenSectionIDs[i]; 
     if (id !== null) 
      str += ',' + id; 
    } 

    $.cookie('hidden_section_ids', str); 
} 

function toggle(t, updateCookie) { 
    var t = $(t); 
    var parent = t.parent(); 

    // toggle hidden div 
    parent.find('.toggle').slideFadeToggle(400, function(){ 
     // determine which image to use if hidden div is hidden after the toggling is done 
     var imgsrc = ($(this).is(':hidden')) ? 'http://i47.tinypic.com/vg0hu0.gif' : 'http://i45.tinypic.com/281tsle.gif'; 
     // update image src 
     t.attr('src', imgsrc); 

     if (updateCookie || updateCookie === undefined) { 
      var hiddenSectionIDs = getHiddenSectionIDs(); 
      if (parent.find('.toggle').is(':hidden')) 
       hiddenSectionIDs.push(parent.attr('id')); 
      else { 
       for (var i = 0; i < hiddenSectionIDs.length; ++i) { 
        var id = hiddenSectionIDs[i]; 
        if (id == parent.attr('id')) 
         hiddenSectionIDs[i] = null; 
       } 
      } 

      setHiddenSectionIDsCookie(hiddenSectionIDs); 
     } 
    }); 
} 

$(document).ready(function(){ 
    var hiddenSectionIDs = getHiddenSectionIDs(); 
    for (var i = 0; i < hiddenSectionIDs.length; ++i) { 
     var id = hiddenSectionIDs[i]; 
     if (id !== null) { 
      var section = $('#' + hiddenSectionIDs[i]); 
      if (section) { 
       toggle(section.find('.hide'), false); 
      } 
     } 
    } 

    $('.hide').click(function(){ 
     toggle(this); 
    }); 
}); 
</script> 

</head> 
<body> 

<div id="section-1" class="wrapper"> 
<img class="hide" src="http://i45.tinypic.com/281tsle.gif" /> Header Text 1 
<div class="toggle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
</div> 

<p> 
<div id="section-2" class="wrapper"> 
<img class="hide" src="http://i45.tinypic.com/281tsle.gif" /> Header Text 2 
<div class="toggle">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 
</div> 
</p> 
</body> 
</html>

它是遠離優雅/拋光的解決方案，但我已經測試過它，和它的作品。我使用this jQuery cookie plug-in。

來源

2010-06-28 23:14:13

謝謝你的回覆，我幾乎知道這個過程的「流程」，我缺乏的是一個代碼示例，告訴我它是如何完成的。 – Sandra 2010-06-28 23:44:21

@Sandra：我正在研究一個我已經添加到我的答案中的例子。它展示了基本的想法。 – 2010-06-28 23:49:09

對不起，我只是最後一個問題，如果我可以。如果一個div被設置爲摺疊狀態，然後刷新頁面，則切換動畫會被踢出，這將顯示div從展開到摺疊狀態。聲明我做錯了什麼或者是否按設計設計？ – Sandra 2010-06-29 00:20:11

堅持使用Cookie切換狀態

回答

相關問題