jQuery UI - Tab Systems

If you look around websites at the moment almost all of them have some kind of tab system. Facebook uses one on your page, even while I write this, the window I'm writing in is surrounded by tabs and I know I've used tabs on some of my own projects (see The Game Portal).

Tabs are primarily a form of navigation, but what makes them different from a standard navigation header bar, with standard buttons is that the flow through the site is much improved. You don't need to leave a page to view content inside a different tab. This means less wait times, and a nice way to store anything you want to show on your site.

You could opt to write your own tab system, but often it can be hard to achieve complete, or maximum browser compatibility, especially if you're in a rush, or don't want to spend to much time writing something in javascript/ajax.

In a post a few weeks ago I introduced jQuery, and briefly mentioned the jQuery UI package. The jQuery UI package builds on the jQuery framework by adding a set of transitions, actions and web components which work in practically any browser. If you have a quick look on the jQuery UI website you'll notice the build custom download button on the right of the page. You can graphically design most features of the components you want and export the styles and classes associated with them straight from the website.

So lets get started, we wanted to make a tab system.

1) Click Themes on the menu at the top of the jQuery homepage. We want to be a bit interesting so lets make a custom theme.

2) You'll notice on the right you are presented with the UI components, in the default style and on the left you'll find a menu with the headings "Roll your own" and "Gallery". For a set of premade styles click gallery. Often you'll find something here that is in keeping with the design of your website, or you'll find these styles a good jumpstart so that you don't have to design everything from scratch. So I'm making a pretty Techy website, and want something quite cool. Click on the gallery tab and select edit under the Dot Luv style. I really don't like the diagonal lines at the top though, so I'll play around with the top bar. Obviously if you like them, keep them, and have a play around with some of the other settings on the left.

3) Once you're completely happy with your design press the Download Theme button at the top of the settings, you'll be confronted with a new page. Panic not! We're making a tab menu so we don't need any of the other features (with the exception of UI Core which contains some basic functions and initializers) so deselect everything except UI Core and Tabs (in the widgets section).

4) When you're happy with this download the file using the button on the right. At this stage its a good idea to open the file called index.html within the package you downloaded. This contains all of the UI content you downloaded as well as some useful buttons (a tip - if you're looking for lightweight you can remove the styles and images for all of these buttons quite easily by hand). So there is your tab system!

5) To include it on your website you'll have to upload your stylesheet, javascript files and associated images onto your server. Once they are up just link to your files. You'll have to load in the jQuery style sheet first, then the standard jQuery library, and then the jQuery custom library.

For example:

<link type="text/css" href="css/dot-luv/jquery-ui-1.7.2.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

would achieve the required effect.

Then to initiate the tab system you'll need to use a simple line of jQuery

<script type="text/javascript">
$(function()
{
// Tabs
$('#tabs').tabs();
}
</script>

And finally the actually object needs to be placed in your page:

<div id="tabs">

<ul>
  <li> <a href="#tabs-1">Tab 1</a> </li>
  <li><a href="#tabs-2">Tab 2</a></li>
  <li><a href="#tabs-3">Tab 3</a></li>
</ul>

<div id="tabs-1">I am tab 1's content</div>
<div id="tabs-2">I am tab 2's content</div>
<div id="tabs-3">I am tab 3's content</div>

</div>

As you can see all of the content is loaded into seperate divs, one for each tab!

This is really useful as I mentioned earlier for getting smooth flows around your site, and for improving the user experience!

Unfortunately blogger blogs don't allow you load in style sheets on the fly from within posts so I don't think I can get you a live example, but here is a link to a page I'm working on which does use the tab system. Bear in mind its work in progress!

Also check out The Game Portal if you haven't done so already as that also uses jQuery UI!

Enjoy!