麻烦jQuery UI标签& Cookie选项 [英] Trouble with jQuery UI Tabs & Cookie Option

问题描述

我使用 jQuery UI标签页界面，而且我要设置Cookie（使用jquery.cookie.js脚本，他们推荐，从stilbuero.de/jquery/cookie/），以记住刷新页面时最后选择的标签。这很容易，按照jqueryui.com上的说明进行。

I am using the jQuery UI tabs interface and I want to set a cookie (using the jquery.cookie.js script they recommend, from stilbuero.de/jquery/cookie/) to remember which tab was last selected when the page is refreshed. That much was easy, going by the instructions at jqueryui.com.

在上下文中，这些标签将显示表单的搜索结果。我想进一步，提交表单时删除cookie，以便在提交新的搜索字词时，默认选项卡可再次使用。这部分不会这么好。它不能帮助在jqueryui.com和stilbuero.de给出的例子是完全不同的，他们并不真正jive相互。我从来没有处理过cookies，我不能理解jQuery足够从头开发，所以任何帮助将是巨大的。

In context, these tabs are going to display search results from a form. I'd like to go a step further and delete the cookie when the form is submitted, so that the default tab is available again when a new search term is submitted. This part isn't going so well. It doesn't help that the examples given on jqueryui.com and stilbuero.de are completely different and they don't really jive with each other. I've never dealt with cookies before and I don't comprehend jQuery enough to develop it from scratch, so any help would be great.

这是我的标签：

<div id="selector" class="ui-mainColTabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
</div>

格式如下：

<form id="form">
    <input type="submit" value="kill cookie" />
</form>

检查是否设置了Cookie的链接：

A link to check that the cookie is set:

<a href="#" class="getCookie">get cookie</a>

最后，我到目前为止的jQuery：

And finally the jQuery that I've got so far:

// slightly altered example code from jqueryui.com
// init tab ui, set cookie
$("#selector").tabs({
    cookie: {
        expires: 30
    }
});
$(".ui-tabs-nav, .ui-tabs-nav > *")


// slightly altered example code from stilbuero.de
var COOKIE_NAME = 'test_cookie';
var ADDITIONAL_COOKIE_NAME = 'additional';
var options = { path: '/', expires: 10 };

// get cookie
$('a.getCookie').click(function() {
    alert($.cookie(COOKIE_NAME));
    return false;
});

// kill cookie
$('#form').submit(function() {
    $.cookie(COOKIE_NAME, null, options);
    return false;
});

帮助我Obi-Wan Kenobi。你是我唯一的希望。

Help me Obi-Wan Kenobi. You're my only hope.

推荐答案

好吧，永远不会。我想到了。这是新的，工作代码：

Okay, nevermind. I figured it out. Here's the new, working code:

<div id="selector" class="ui-mainColTabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
</div>

<form id="form">
    <input type="submit" value="Kill" />
</form>

<a href="#" id="getCookie">Get</a>

<script type="text/javascript">
<!--
$(document).ready(function() {
    $("#selector").tabs({
        cookie: {
            name: 'tab_cookie',
            expires: 7
        }
    });
    $(".ui-tabs-nav, .ui-tabs-nav > *")

    $('#getCookie').click(function() {
        alert($.cookie('tab_cookie'));
    });

    $('#form').submit(function() {
        $.cookie('tab_cookie', null);
    });
});
//-->
</script>

问题是我无法确定如何识别我正在尝试处理的cookie 。但只是出于纯粹的哑的运气，我试图插入一个名称选项。种类的沮丧，jqueryui.com没有提到任何事情。希望这可能会帮助有同样问题的其他人。

The issue was that I couldn't figure out how to identify the cookie I was trying to work with. But just out of sheer dumb luck, I tried plugging in a "name" option. Kind of frustrating that jqueryui.com doesn't mention anything about that. Hopefully this may help someone else with the same problem.

所以我猜测我是欧比万。找我。

So I guess it turns out I'm Obi-Wan. Go me.

这篇关于麻烦jQuery UI标签& Cookie选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！