Home » jQuery » jQuery Tabs

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

Like this Article? Subscribe to get every article sent to your email.

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 […]
  • 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 […]
  • 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 […]
  • 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 […]
  • 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 […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback