jQuery切换Cookie支持

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>

可能有更多有效的方法来实现它,但为了快速证明概念,上述方法效果很好.