jQuery Tabs

While the TabControl provided by Microsoft in the AJAX toolkit is probably a bit easier to use, the Tabs in jQuery are not much harder to implement and give us a bit more flexibility.

Here are the steps to implement:

First, make sure the HTML (ASPX) page you are creating is pointing at the stylesheet that contains the jQuery UI theme you are using.  The tabs make use of the themes and will not render as tabs unless the styles are pulled in.

Next you’ll need to create the HTML.  Everything that has to do with tabs should be wrapped in a DIV.  You can either give the ID a class or give it an ID, as long as you can select it later to apply the tabs() method that turns it all into a tabbed interface.

Within that DIV, you’ll place an unordered list:

<ul>
<li><a href="#firstTab">First</a></li>
<li><a href="#secondTab">Second</a></li>
<li><a href="#thirdTab">Third</a></li>
<li><a href="#forthTab">Forth</a></li>
</ul>

which represents your tabs.  Notice the href=”#id” stuff.  Those are pointing to ids of the DIVS that come next.

<div id="firstTab">first content</div>
<div id="secondTab">second content</div>
<div id="thirdTab">Third content</div>
<div id="forthTab">Forth content</div>

Next, in your jQuery code, select the outer DIV and call tabs()

$(function() {
    $("#tabs").tabs();
});

There are a ton of options for the tab control that would take several posts to cover, but I do want to point out just a few.

First, you can add tabs on the fly and remove them on the fly using the add() and remove() methods.

Second, you can load the tab’s content on the fly by using a real URL in the href, specifying a title tag and creating a similar ID for the DIV that represents the content area (spaces are replaced with underscores).  If you do this you can also pass in an option that tells it to cache the retrieved content or go after it every time the tab is requested.

Finally, you can easily enable and disable tabs by calling tabs() again with tabs(‘enable’,tabIndex) or tabs(‘disable’,tabIndex)

For the full documentation, see http://jqueryui.com/demos/tabs/

 

Other post in jQuery

Related Post

  • jQuery ProgressbarjQuery Progressbar Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know just how...
  • jQuery – Sliders (scrollbars to the rest of us)jQuery – Sliders (scrollbars to the rest of us) Scrollbars are a fundamental GUI widget that exist on every operating system.  With the browser continually morphing into it's own operating system it isn't surprising that there are several ...
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...
  • jQuery – DropjQuery – Drop Last week we took a look at how to make an element draggable.  This isn't of much use unless we can drop it. Fortunately, making an item droppable is about as easy as making it draggable. $...
  • jQuery Looks like XPathjQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a set of elem...