.NET Answers

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/

Republished by Blog Post Promoter