Completely Unobtrusive jQuery Tabs
Published Monday, February 26, 2007 in Javascript, jQuery, Progressive Enhancement, Web Standards
As i've mentioned before i've started using quite a lot of jQuery, and some of its plugins.
Among them the Tabs-plugin by Klaus Hartl.
It's an amazing plugin that is extremely easy to use and works very well. What annoyed me a bit was the fact that it requires you to put an unordered list at the top of all you tab-content, with links pointing to all the tab-content-containers.
To me it seemed that list was completely unnecessary if javascript was disabled (i mean, it's not like people don't know how to use the scroll).
So i though, fuck, I'll generate the list from javascript.
So here you have it, a completely unobtrusive tabs-plugin (that uses the normal tabs()-plugin).
The titles in the tabs are generated from:
- The title-attribute of the div it is pointing to
- Or, the first heading in the div
- Or, the id of the div, str-replaced so it looks a bit nicer (this asumes you use foo-bar syntax for naming IDs and classnames)
The list is automatically inserted before the FIRST tab-content (the first div).
Check out the example and have a look at the source for the erm.... source.
Oh yea, the main reason i created this is cus i've been thinkin about tabbing my sub-content in future designs, and now i can do that without having to change the XHTML. Luvely Jubbely.
Update:
If you don't want to add title-attributes to all your divs in your (x)html-code, you can very easily use javascript to do it instead.
Before executing the AutoTabs() function, do something like this:
$('#id-of-div').attr('title', 'Whatever you want the tab to say');
Comments
21 comments so far, why don't you post one too?
Saturday, March 10, 2007 | View all comments by Rod
I love the way you have taken with JQUERY. But still stays the same problem : If I want the menu somewhere, and the tabbed content in other section, I can't, like the plugin tab. So, if I use a fixed header in CSS which simulates frame, I can't use your plugin : what a pity :(
Saturday, March 10, 2007 | View all comments by Andreas
You should be able to simulate frames using the tabs-plug-in as you can specify the tabStruct option to anything you want.
With my version it may be a little more difficult though, as my list is automatically positioned in the same container as the tab-content, and immediately before the first tab-content.
Saturday, March 10, 2007 | View all comments by Rod
thanx for answer, I have forgotten an essential point about my request : I'm the king of the Noobs :) All your scripts have a new approach of Jquery, and it's scripts like yours the possibilities of web will be soon incredible :) No more "too" code :)
Sunday, March 11, 2007 | View all comments by Andreas
Heh, thank you.
Wednesday, June 06, 2007 | View all comments by Cynthia
Where I can I download the updated tab plug-in?
I have a drop down list of countries and when user changes the country from the drop down, i need to update the tab pages so that when user selects the tab, it can shows the corresponding data.
Is this possible?
Wednesday, June 06, 2007 | View all comments by Andreas
It shouldn't be a problem to create connected select-boxes that span over several tabs, since all tab-content is always present in the DOM.
If that is what you wanted to do...
I'm not sure which updated tab plug-in you mean though.
Saturday, June 23, 2007 | View all comments by Cynthi
Where can I download your tab plug-in? I could not find a link to download the plug-in.
Thanks, Cynthia.
Saturday, June 23, 2007 | View all comments by Cynthia
Please provide the link to down load your plug-in.
I am new to JavaScript programming, can you please provide some example code to create connected select-boxes that span over several tabs? Thanks in advance.
Sunday, June 24, 2007 | View all comments by Andreas
Hey,
There are two links in the article, one pointing to the official tabs-plugin-homepage and one pointing to an example-page showing my extended plugin.
I don't really have time to code what you're asking for, play around a bit, i'm sure youäll solve it.
Sunday, July 15, 2007 | View all comments by alakhnor
the code to try to add cookies:
$(document).ready(function(){
var TABS_COOKIE = 'tabs_cookie';
$('#sub-content').AutoTabs($.cookie(TABS_COOKIE) || 1, {fxFade: true},
{onClick: function(clicked) {
var lastTab = $(clicked).parents('div').find('div').index(clicked.parentNode) + 1;
$.cookie(TABS_COOKIE, lastTab);
}
}
);
});
which doesn't work...
Monday, July 16, 2007 | View all comments by alakhnor
Sorry, I messed up a bit on the previous. The code I send is the one I'm trying to use to add cookies to the tabs (which work great btw, thankyou!). Unfortunately, it doesn't work. Would you have an idea on how to do it?
Monday, July 16, 2007 | View all comments by Andreas
Hmm.. not sure what you're trying to do there. Perhaps if you explained more clearly exactly what you want to accomplish i could be of more help.
Monday, July 16, 2007 | View all comments by alakhnor
No problem, I will try. ;) I'm working on a WordPress theme. This is how it's organized: - Top right: a window with tabs (autotabs). Each tab load a list of post in one specific category - under this: the blog, ie a list of the last post for the home page or the full selected post.
What I want is, when I click on a post in the tabed-window, the selected tab is kept. Currently, it does not because the page is reloaded and the menu is reset to the first tab.
So, I'm trying to use cookies to keep the selected tab active.
Monday, July 16, 2007 | View all comments by Andreas
Ok, that makes sense.
Well i guess all you really need to do is add another onclick-event to the links in the tabs, and in that onclick create/update a cookie that stores which tab was clicked (you need to work out in what position the clicked tab was tho as AutoTabs (and Tabs()) take a number as its first argument.
And then, upon firing the AutoTabs()-function, check if a cookie is set, if it is, use the cookie's value for which tab should be selected, if not simply go with the first one.
I don't think you should try to put all this functionality in the AutoTabs()-call.
Perhaps something like this:
$(document).ready(function()
{
// Fire AutoTabs
var foo = 1;
if($.cookie('current_tab')) foo = $.cookie('current_tab');
$('#sub-content').AutoTabs(foo);
// Add additional onclick to tabs that stores cookie
$('#sub-content > ul:first-child a').click(function()
{
// Calculate what number this tab is and store in cookie
});
});
Looking at your code again i realize we do pretty much the same thing only i moved the cookie-storing onclick to its own block.
Not sure if that will work tho.
Monday, July 16, 2007 | View all comments by alakhnor
Thanks for your answer. I'll try this asap.
Tuesday, July 17, 2007 | View all comments by Andreas
Sure, let me know how it works out.
Wednesday, September 26, 2007 | View all comments by Aaron
Is there a way to have the tabs or links generate in a specific div or somewhere else on the page?
Monday, October 01, 2007 | View all comments by Andreas
You could quite easily modify my code to append the list to any element.
Perhaps an optional argument to the function that takes a CSS-selector and appends the list to the matched element would be a good idea?
I've planned to re-write some of my jQuery-plugins (including this one) and I will fix stuff like this then.
In the mean time you could just change my code so that instead of it appending the list to the parent-element of the tab-content just append it to anywhere.
This is the code that needs to be changed: t.find('> div').eq(0).before(list);
Also remember to change the tabStruct argument to tabs() respectively so that it matches where your list is.
Tuesday, September 02, 2008 | View all comments by mark henry
Nice design rip-off.
Wednesday, September 03, 2008 | View all comments by Andreas
I assume you mean John Oxton's flower-design as that is exscale's default atm.
If you check the footer or my styles-page you'll notice that I give the proper credits.
John released the flower-design as a WP-template quite some time ago.
Thursday, November 27, 2008 | View all comments by James
Probably the most useful jQuery plugin there is!