In modern web applications you often need to make something visually appealing and without using something like Flash, the best thing for this is Javascript. There are a variety of frameworks available these days that enable a huge amount of visually impressive tricks – from animating content to organising it. This is the first of a series of articles showing how to use these frameworks to make your application a better place – Tabs using JQuery.

What will we need?

Chances are most of you are reading this using a tabbed browser so you know how useful such a thing is, and fortunately a tabbed section on your webpage is just a few simple lines of code away using the hugely popular JQuery framework.

Fortunately, this is a simple one – we just need the JQuery framework file and the JQuery UI javascript files. The UI downloader allows you to choose the features you want, so for this part I have just downloaded the tabs section. You also need some knowledge of CSS so you can style the tabs to look right.

Now we have what we need, let’s get started.

How to begin

The first thing we need to import the javascript files into your HTML file. The following code should be in the section of your html file.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-tabs.js"></script>

The next thing to do is be able to notify the script when the document is loaded; the page elements need to exist in order to change them into tabbed form.

<script>
$(document).ready(function()
{
	$("#tabs > ul").tabs(); // Note ‘#tabs’ refers to the div container storing the tab information.
});
</script>

Quite simply, this will be fired once the rest of the file has loaded up. Note that I am using the $(id) notation to select items from the document which is functionality provided by jquery. This is the only piece of javascript we will be using – it really is that easy!

We’re now ready to start adding content.

How to make the tabs

The tabs will be held within a div container, so we need to make that – note that it has the same name as we specified in our javascript in the previous section (in this case we used ‘#tabs’ so our div will have the id ‘tabs’). We list our tab headers and actions in an unordered list element.

Here’s an example:

<div id="tabs" class="tabs">
<ul>
	<li><a href="target"><span>One</span></a></li>
	<li><a href="target"><span>Two</span></a></li>
</ul>
</div>

Now, there are various ways to put data into each tab. Firstly, we can insert data from another div on the page – to do this we just make the link point to the id of the div. An alternative method is to use AJAX to put the contents of another file into a tab – to do this we just make the link point to the file and JQuery will do the rest, it’s really really easy!

Here’s our updated example, with one link pointing to a div containing some content on the same page, and the other pointing to another page:

<div id="tabs" class="tabs">
<ul>
	<li><a href="#example"><span>Example</span></a></li>
	<li><a href="another_file.html"><span>Another File</span></a></li>
</ul>
        <div id="example">
        Some Example Text
        </div>
</div>

Note here that I’ve made the example div within the tabs div.

Our other file (another_file.html) can contain anything including Javascript:

<p>This is text in another file</p>

That’s all the HTML we need, it’s that simple and once you’ve put it all down, pretty intuitive too!

Styling the tabs

It might be a little confusing, but we don’t actually specify the css titles for the page elements, but here are the ones we need to style, and exactly what they do. The easiest way to learn how the styles affect the layout is probably to download the sample code, run it and then change the styles to see what changes on screen – this is where you’ll need your CSS skills!
As a bit of a helper, here is the way the code will actually be displayed in the browser, courtesy of the JQuery UI Documentation:

<ul class="ui-tabs-nav">
	<li class="ui-tabs-selected"><a href="#fragment-1"></a></li>
	<li class="ui-tabs-unselect"><a href="#fragment-2"></a></li>
	<li class="ui-tabs-disabled"><a href="#fragment-3"></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel"></div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
  • li – The main reason we need to style this element is to tell it to be vertical (tab headers stacked on top of each other) or horizontal (tab headers side by side).
  • .ui-tabs-nav – This is the section containing the tab headers – it is the full width or height of the entire tabbed pane so I would tend to find it best to simple style this to have the same background as the main page.
  • .ui-tabs-selected – This is (as you would expect) the class that styles the currently selected tab header.
  • .ui-tabs-unselect – This doesn’t actually do much – I don’t even bother applying styling to it. Leave a comment if you have a good use for it.
  • .ui-tabs-disabled – This styles a disabled tab header.
  • .ui-tabs-panel – This is the actual panel which displays the contents of the tab section.
  • .ui-tabs-hide – This is to style the tabs that aren’t shown at the time – the minimum it must contain is ‘display: none;’.

Okay, so that’s the basic elements and if you only style those then I assure you it won’t look very good. Each tab header is a link, therefore we should style the links – this lets us style unselected tabs differently from selected tabs. To do this, we style the .ui-tabs-nav a element. This will be overridden by the .ui-tabs-selected element meaning we can show them both differently. That may all sound a little overly-confusing and cryptic, but in reality it’s straightforward – have a look at the sample code (style.css) and it should make sense. I’ve styled the demo to include a few effects I think look good and commented those to point them out.

Conclusion

JQuery tabs are very useful things to have on a webpage that contains a lot of content that needs organised. There is a fair amount more that you can do with them than I have shown here (the FAQ section in the Documentation is an excellent place to start) but hopefully I’ve given you the push forward to get you into producing your own effective interfaces!
JQuery really is an excellent framework and has a lot of really excellent applications so if you’re serious about adding javascript to your web applications I highly recommend you have a look through the documentation.

View the Demo Download the ZIP file

Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments

  1. Is there anyway to change the appearance of each tab? Like with a css image replacement using class names for each list item? I tried this but there seems to be a conflict with the dynamically added css. Not sure if there is a way around this.

  2. Comment by Brian on November 19, 2008 9:38 am

    I’m trying to do the same thing as Alan, styling each tab individually. Basically I am creating a banner at the top of a page with 3 tabs. I’m trying to use your examples and convert it. But for some reason the tabs are only a sliver of the image. If I input text for the link, then it will be the size of the text. I do not want any text in the tabs, only the image.

    For the image, I have two buttons on 1 image. Active is one state of the image, rollover and unselected is the other state. So when you select say tab2, tab1 image should shift to 0 0, while tab2 image shifts to 0 44.

    Dunno if this makes sense or not…

  3. @Alan and Brian:
    Are you wanting a separate image for each different tab selector, or do you just want an image to be used for a selected tab, and a different image to be used for an unselected one?

    If it’s the 2nd option, you just need to specify a background image instead of a colour for the respective css classes, and also specify a width (otherwise it’ll be really thin).

    If it’s the first option, I’ll have to play about with it and figure it out - I have an idea but I’m not sure if it will work.

    Thanks,

    J

  4. Comment by Brian on November 19, 2008 7:50 pm

    I am using separate images for each tab. And depending on the tab state, I want it to show a different position of the image. So in selected state, it will be in the default position, unselected state it would shift the image up 44 pixels.

    I have it showing the images properly now, but only in a single state. I used a separate id for each li tag.

    test1
    test2
    test3

    I just can’t shift the background dependent on the state yet.

  5. Sorry I’ve just come back to this; I haven’t had much time for ProgTuts recently.
    The best I can think of at the moment is using javascript - give each a href tag in your list of tabs an onMouseClick event which points out to a javascript method that sets that image to be where you want it and all the others back to the default. Not particularly elegant but it should work!
    I’ll have a better think about it over the christmas holidays because I have so much work to do at the moment! If you post it up on the ProgTuts forum as well then maybe some others will see it and give some contribution.

    J

Leave a Comment

(required)

(required)