Rogtopia

The Mystical World of Roger.

Hello, My Name is Roger and I enjoy HTML, CSS, and Photoshop. Maybe I can show you some things.

Creating a Custom nextTab() for jQuery UI Tabs.

July 21, 2009 10:39AM

I have recently been working on a project using jQuery UI tabs (http://jqueryui.com/demos/tabs/).  After sifting through the documentation, I could not find any particular method for just calling the next tab in my own custom navigation.  There is a lot of great events that you can hook into by creating callbacks, and a lot of great properties and methods; even one for selecting a tab.   However, there is no nextTab() or next().

Well, here is nextTab() that works with UI Tabs:

<script type="text/javascript">
function nextTab(_tab_selector) {
  var num_tabs = $('#tabs li',$(_tab_selector)).length;
  var current = $(_tab_selector).tabs('option','selected');
  var next = ((current + 2)>num_tabs) ? 0 : current + 1;
  $(_tab_selector).tabs('select',next);
}
</script>

This function will continue through a tab system until it reaches the end and continue to the beginning. Simply call it from your own custom link such as:

<a href="javascript:" onclick="nextTab('#mytabs');">Next Tab</a>

Or, you could bind them to the click event of a class selector:

<a href="#mytabs" class="next-tab">Next Tab</a>

<script type="text/javascript">
$('.next-tab').bind('click', function() { 
  nextTab($(this).attr('href'));
});
</script>

Of course, you could easily create a previous tab method by modifying the increments to decrements. You could even create some custom callback events that could be triggered. However, this is a minimalistic nextTab method that does it's job just fine. Happy coding

Go Back

Hi! just wondering if you use viviti.com as your domain host?

Hey Felicia, very much a late reply...

I don't use viviti for domains. But I use it for my website / blog hosting. I use bravenet.com for domain hosting and I am able to point my domains to my viviti account.

Hello Roger. Thank you for posting this; I have been looking far and wide for info about how to add next and previous links to the jquery tabs. I am a newbie to jquery so don't know much about it but am trying to get this work for me. I'm wondering what parts of this code do I need to customize? I tried to post my code but it doesn't display correctly. If you would like to take a look at it I would appreciate it; I'm sure there are some things I'm missing. Again, thanks for any help you could lend.

Tyson.

Nevermind Roger, I figured it out. Thank you SO MUCH for posting this information. It helped me out so much.

Tyson.



Comment