Archives for Monday, February 26th, 2007
You are currently browsing 1 article(s) published on Monday, February 26th, 2007, please try the search if you can't fint what you're looking for.
Completely Unobtrusive jQuery Tabs
Monday, February 26, 2007
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 are off
- Filed under Javascript, jQuery, Progressive Enhancement, Web Standards
