jQuery Toggle Cookie Support

Question

我試圖在我的幻燈片切換腳本中實現jQuery Cookie插件，但到目前爲止還沒有成功。這裏是我的代碼（沒有任何cookie的實現）：

的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> 

任何人都知道，如果它是很容易實現的jQuery的Cookie插件安裝到我現有的代碼，以便它記得打開/關閉狀態？

謝謝。

Answer 1

jQuery cookie插件非常易於使用。基本上所有你需要做的事情都是在使用切換器時通過cookie設置一個標誌。

要設置值站點範圍內，這樣一個簡單的語句的工作：

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

然後當你需要它來獲取值，使用：

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

我不是確定你打算如何使用它切換，但讓我們說，例如，你需要跟蹤多個頁面的狀態。當觸發器觸發時，您可以輕鬆設置cookie，跟蹤它處於的狀態（開/關等）。在其他頁面加載期間，通用腳本可以檢查cookie並根據標誌設置切換。這會讓網站在頁面上「記住」以前的狀態。

只是一個示例使用無論如何。希望這可以幫助。

的jQuery插件的Cookie：http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/

編輯提供實現示例：

下面是一個簡單的實現工程。需要引用jQuery和jQuery cookie插件，以及一個css定義。當每個頁面上定義了所有腳本和CSS時，可以跨多個頁面工作。

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

標記：

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

有可能許多實施更有效的方式，但對於概念的快速證明以上運作良好。