2010-09-16 65 views
2

我使用的是jQuery UI tabs interface,我想设置一个cookie(使用jquery.cookie.js脚本他们推荐从stilbuero.de/jquery/cookie/)来记住哪个选项卡是上次选择页面刷新时。这很容易,按jqueryui.com上的说明操作。jQuery UI选项卡和Cookie选项的问题

在上下文中,这些选项卡将显示来自表单的搜索结果。我想更进一步并在提交表单时删除cookie,以便在提交新搜索词时再次使用默认选项卡。这部分进展不太顺利。 jqueryui.com和stilbuero.de上给出的例子完全不同,它们并没有真正相互倾斜。我从来没有处理过cookies,我也没有足够的理解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。你是我唯一的希望。

回答

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

所以我猜想事实证明我是欧比旺。走吧。

+1

非常感谢你,这是一个救星!哦,顺便说一下,他们确实提到了“名字”,但没有使用这个选项的例子,这真的很伤心。 Cheers Obi! :) – Nikola 2011-02-16 12:21:31