有关jQuery UI标签的问题& Cookie选项

时间:2010-09-16 19:35:11

标签: forms cookies jquery-ui-tabs

我正在使用jQuery UI tabs interface并且我想设置一个cookie(使用他们推荐的jquery.cookie.js脚本,来自stilbuero.de/jquery/cookie/)来记住上次选中哪个选项卡页面刷新。按照jqueryui.com的说明进行操作非常简单。

在上下文中,这些选项卡将显示表单中的搜索结果。我希望更进一步,在提交表单时删除cookie,以便在提交新的搜索词时可以再次使用默认选项卡。这部分不太顺利。在jqueryui.com和stilbuero.de上给出的示例是完全不同的并且它们彼此之间没有真正相互作用也无济于事。我之前从未处理过cookie,而且我不理解jQuery足以从头开发它,所以任何帮助都会很棒。

这是我的标签:

<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 href="#" class="getCookie">get cookie</a>

最后到目前为止我得到的jQuery:

// 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。你是我唯一的希望。

1 个答案:

答案 0 :(得分:4)

好的,没关系。我想到了。这是新的工作代码:

<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没有提及任何相关内容。希望这可以帮助其他人解决同样的问题。

所以我猜结果我是欧比万。去吧。