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

One Touch Video Grabber / Video Capture - EZGrabberWith Geniatech's USB2.0 Onetouch, you can capture all the video clips from your video sources such as VHS/VCR/DVD/DV camcorder before they disappear. ... Read More >

ASICS MICROFIBER LOW ANKLE SOCK w/TAB (2795) for WOMEN - 6 PAIRGREAT VALUE!!! The Asics Low Ankle sock w/Tab is a soft and lightweight sock that boasts a microfiber basketweave construction with spandex for a touch of "stretchiness." Fit's Women's shoe sizes 6 to 11. 6-pair Pack. Socks for the "TRUE RUNNER."

Permatex 21351 Rear Window Defogger Tab AdhesiveQuickly and easily bonds defogger tab to grid on rear window. Provides a low-cost, high-quality repair for damaged rear window defogger tabs. Complete kit for a quick repair. Suggested Applications: Rear window defogger tabs

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”