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/ 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;
}
Markup:
<a id="hideButton" href="javascript:;">-Hide</a>
<div id="panel">
<p>Hello World</p>
</div>
可能有许多更有效的方法来实现它,但为了快速证明概念,上述方法效果很好。