Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.
jQuery UI makes creating tabbed areas very easy, so the framework is based on that. But we are on our own as far as Next/Previous buttons. Fortunately, jQuery UI tabs do have a function-thing that can be called to switch tabs. We can bind it to text links to accomplish switching tabs:
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
But we want to do this (hopefully) as smart-ly as we can. So we want to:
- Add the links dynamically to each panel. If a panel is added or removed, the Next/Previous buttons automatically adjust to the new flow. Plus, links won’t be there awkwardly with JavaScript disabled
- Make sure there is no “Previous” button on the first panel
- Make sure there is no “Next” button on the last panel
This is how I did it:
$(function() {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
I was implementing something like this on a client’s site today. This is a much better solution. Thanks!
I use another version of tab-based content; but I really like this inclusion of previous / next. I wonder though… if there is a way to have the previous / next buttons instead take on the title of the tab they are navigating to.
In terms of user-friendly navigation, that would be the most comprehensive option – users would know exactly where they were going using either the prev / next tab options, or the upper navigation.
That would be a clever idea, I’ll look into that, I’m sure it’s possible.
I like the idea of that Rob. I need a solution that allows me to have names for the tabs. Then It’s more like a walk through with semantic writing that a user can understand. After all who knows which information is associated with which #.
It would avoid the: “Crap I messed up on the contact form… Uhh which number was it it again? click click click click.”
Take a look at this demo in IE 7. The Next/Previous tabs are out of whack. Other than that thanks for the code!
thanks for sharing
Wouldn’t it be better to do this in php instead? Since its almost the same solution but better for screen readers and browsers that don’t use js? Less debugging too..
But otherwise a nifty solution if that is what your looking for, thanks Chris :)
The tabs need JavaScript to work anyway though….
not working in IE7 I think you need to add
.ui-tabs .ui-tabs-panel {overflow:auto} I think that will fix the bug. Not tested though
so I have done some testing and I have found a few different ways to make it work. you can float the display left and add a width of 100%. The only problem is that you need to set a static height to get this to work. I also tried to put a div wrap around it and to create the need space didn’t work very well. then I tried to hack it by adding padding to the div that was wrapping the display that worked but made the space pretty large in FF. well I am done playing around with this and would love to hear how this prob gets fixed. it is probably a Little one line fix that I didn’t think to try well thanks as always Chris.
I was playing with this in Firefox 3, very awesome, but it alternates between horizontal/vertical scrolls on and off, even if there is no content change between tabs. Otherwise it’s a grand tutorial!
Thanks for this.
Quick question, how would you add a fading animation to the content when the tabs change.
There are plenty much better tab-based stuff:
http://tutorialblog.org/10-javascript-ajax-tabs/
http://www.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html
Great post, tabs are the most used web interface on the web these days. Thnx for sharing
Thanks Chris!
It’s nice effect
Nice idea.
If you want to use only two links outside of the tabs instead of adding the next & previous links in each tab you can also use $tabs.data(‘selected.tabs’); to retrieve the index of the currently selected tab, and use the ‘tabsselect’ event to enable / disable the links.
This solutions makes sense…
thanks for the idea!!!
The solution is elegant indeed. Thank you for the post.
i like this thank you
I was hoping for a ExtJS style tab
Problem is that hiding content like this is actually bad for user experience if one comes from a search engine searching for hidden content. I wrote a blog post about it a few months ago:
A fundamental problem with Ajax websites and hiding content
also you face an accesibility problem for people with javascript turned off unless you use the css preloaded technique
CSS Preloaded
Nice solution!
My only recommendation is to declare the variables ‘i’, ‘next’ and ‘prev’ with var. Since those aren’t declared with var they’re put into the global namespace.
Really thankful for this elegant solution. it will be pretty when you add images on each tab.
thanks a lot , but can I increase the content width inside the tab.
Moreover select is deprecated now. So we have to use “active “parameter for getting and setting active tab
Here is JS part of the code:
you should have “a href” tags to be added in your tabs div with “btnPrev” and “btnNext” Classes
hello everybody i’m having a problem could you me sir?
i put this ui-tabs inside of “spry tabbed panels” the 1st tab it words great
but the others tabs have an error.. it is not working =(
please help me thank you in advance
Do you have a link or example?
There are so many tabs, but I think the Jquery UI Tabs’s best for me. Thanks for your TUT
How can I do it automatically for example every 5 seconds?
Thanks
Its is working fine. Its a lovely. I am loving it.