.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/

Other Related Items:

National Electrical Code 2008 Index TabsUser-friendly and up-to-date, these National Electrical Code®Tabs are a great way to organize the NEC® 2008. These self-adhesive tabs can reduc... Read More >

EXTRA MAGNET TABS FOR MAGNETIC COACHING BOARDSet of 15 magnet tabs with cardboard inserts. 1/2'' x 1 1/2'' permanent magnet.

Londons Times Funny Food Coffee other Digestibles - Javascript - Light Switch Covers - double toggle switchJavascript Light Switch Cover is new and handcrafted utilizing unique process resulting in a stunning high gloss ceramic-like finish. SET OF MATCHING SCREWS IS INCLUDED giving it a perfect finishing touch. Made of durable metal material.

Related Post

• jQuery 1.4 Released
• Do you Need My Help?
• jQuery Expand/Collapse Using Head Tags
• Does jQuery Make Us Lazy?
• jQuery – Dialog

Bookmark to:

Hide Sites

One Response to “jQuery Tabs”