I’ve found many examples of scripts that save the selected tab inside a cookie but none of them worked out of the box… so let me write here a note and a snippet about how I got it working (big thanks to Massimiliano).
The XHTML that the snippet refers to is available on http://docs.jquery.com/UI/Tabs#source (you have to use its CSS or one of the same kind, of course).
You also need to include
- ui.base.js
- ui.tabs.js
- jquery.cookie.js
The snippet (quick, dirty and raw… but working) is:
$(document).ready(function(){
var tab_cookie_id = parseInt($.cookie("the_tab_cookie")) || 0;
$("#example > ul").tabs({
selected: tab_cookie_id,
show: function(ui) {
var murl = ui.tab;
var nurl = murl.toString().split("#");
var ourl = nurl[1].split("-");
var tab_id = --ourl[1];
$.cookie("the_tab_cookie", tab_id);
}
});
});
This line:
show: function(ui) {
should be:
show: function(junk,ui) {
for jquery 1.2.6 I believe. The ui object is now the second parameter.
fix some…
work with jQuery 1.2.6 and ui-Tabs 1.5
var tab_cookie_id = parseInt($.cookie(“the_tab_cookie”)) || 0;
$(“#container-1 > ul”).tabs({
selected: tab_cookie_id,
show: function(e, ui) { var tab_id = ui.index; $.cookie(“the_tab_cookie”, tab_id, { expires: 30}); }
});
I rewrite for ui Tab3.0 + jQuery 1.2.6
var tab_cookie_id = parseInt($.cookie(“the_tab_cookie”)) || 0;
$(“#container-1 > ul”).tabs({
selected: tab_cookie_id,
select: function(e, ui) { if (ui.index == 0 && tab1_use_ == 1) {/* do some thing */}
},
show: function(e, ui) { var tab_id = ui.index; $.cookie(“the_tab_cookie”, tab_id, { expires: 30 }); }
});
Dave, Alien Y: thanks… I’m going to try your snippets as soon as possible and perhaps that could lead me to release an updated version of my code.
thx Alien Y :)
Don’t try it, just use it, it is working good..
Just to let you know this is now built into the current release for tabs. To use all I had to do was:
$(‘#example > ul’).tabs({cookie: {expires: 7}})
Hope this helps
Nick: that’s good news. Thank you.
Nick: I have been looking for this for soooo long!Simple and straightforward. Thank you.
hallelujah … I’ve spent too much time on the named cookie thing too ;-) I’m a jQuery evangelist whenever I can but the documentation on how to use custom named cookies (instead of ui-tabs-something) is not sufficient if you ask my opinion ;-) . This snippet is exactly what I needed … thanks guys.
what is that ‘something’-integer in “ui-tabs-something” anyway … it comes from $.data(this.list[0]) but who/where/what is that set ??
wouldn’t it be nice if we could just ‘set’ the cookie name to be used “out of the box” (and if we develoeprs are lazy or not in need for flexibility the plugin can use the default ui-tabs-whatever)
Peter
Nick: Fine, very short. But the name of the cookie is ui-tabs%5Bob0ject%20Object%5D for all tabs in the same domain. I have about 15 tabs. There must be an easy way to create one cookie per tab with the name of the selector.
I’ve tried the other examples. The following script creates a named cookie. Wow. But the value in the cookie (index of tab) is always undefined. What’s wrong.
I habe jquery 1.71 and tab 3.0
var tab_cookie_id = parseInt($.cookie(“ui-tabs_user”)) || 0;
$(function () {
$(“#user > ul”).tabs({selected: tab_cookie_id});
$(“#user > ul”).bind(‘tabsshow’, function(event, ui) { var tab_id = ui.index; $.cookie(“ui-tabs_user”, tab_id, { expires: 1});});