jQuery切换Cookie支持 [英] jQuery Toggle Cookie Support

问题描述

我想实现jQuery Cookie插件到我的幻灯片切换脚本，但到目前为止还没有成功。这是我的代码（没有任何cookie实现）：

I'm trying to implement the jQuery Cookie plugin into my slide toggle script, but so far haven't been successful. Here's my code (without any cookie implementation):

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插件到我现有的代码，所以它记住开放/关闭状态？

Anyone know if it's easy enough to implement the jQuery Cookie plugin into my existing code so it remembers the open/closed state?

谢谢。

推荐答案

插件非常容易使用。

要在网站范围内设置一个值，这样一个简单的语句就可以工作：

To set a value site-wide, a simple statement like this works:

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

然后在需要时获取值，请使用：

And then to get the value when you need it, use:

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

我不知道你打算如何使用它，但是让我们举个例子，您需要跟踪多个页面的状态。你可以很容易地设置一个cookie，当触发器触发，跟踪它的状态（开/关等）。在其他网页加载过程中，常见的脚本可能会检查Cookie，并根据标记设置切换。这将使网站的外观是记住页面之前的状态。

I'm not sure exactly how you plan to use it the toggle, but let's say for example's sake, you need to track the state across multiple pages. You could easily set a cookie when the toggle fires, keeping track of which state it's in (on/off, etc.). During other page loads, a common script could check for the cookie and based on the flag, set the toggle. This would give the appearance the site is 'remembering' the previous state across pages.

只是一个示例使用反正。希望这有助于。

Just a sample use anyway. Hope this helps.

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

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

编辑以提供实施示例：

这里是一个有效的示例实现。需要引用jQuery和jQuery cookie插件，以及一个css定义。

Here is a sample implementation that works. Requires jQuery and jQuery cookie plugin be referenced, and one css definition. Works across multiple pages when all scripts and CSS are defined on each page.

Javascript：

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>

有很多更有效的方法来实现它，但为了快速验证概念，

There are likely many more efficient ways to implement it, but for a quick proof of concept the above works well.

这篇关于jQuery切换Cookie支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！