One of the big UI components of native desktop applications are tabbed interfaces. Fortunately, jQueryUI makes them easy to implement. Here’s how to get them up and running quickly.

The basic structure of your HTML should look like this:

<div id="tab_wrapper">

<ul>


<li><a href="#tab1">Tab 1</li>


<li><a href="#tab2">Tab 2</li>


</ul>


<div id="tab1">


Tab 1 content here...


</div1>


<div id="tab2">


Tab 2 content here...


</div1>

</div>

The divs specified by ID in those anchors are going to be turned into tabs, and the list will become the tabs at the tob. When the user clicks the link, it will select that tab. It’s only one line of jQuery to turn this HTML into a tabbed interface:

$(function() {

$( "#tab_wrapper" ).tabs();

});

Well that’s a neat start, right? We can take it further if we want. The documentation shows off the full power, but I think that the most useful purpose is loading the data from outside sources. By using an anchor that points to another page instead of being the ID of an on-screen item, it will automatically load that resource when the tab is clicked. The content will be loaded via AJAX. As shown in the demonstration code, you can easily handle errors on the server to provide a friendly fallback.

Once again, we can see just how easy jQuery makes things for developers to deliver outstanding desktop-like functionality in the Web browser.

J.Ja

More TechRepublic posts about jQuery

Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.