2010-09-16 50 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