jQuery makes it easy for developers to deliver outstanding desktop-like functionality in the Web browser. Learn how to implement tabbed interfaces in jQuery.
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:
<li><a href="#tab1">Tab 1</li>
<li><a href="#tab2">Tab 2</li>
Tab 1 content here...
Tab 2 content here...
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:
$( "#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.
More TechRepublic posts about jQuery
- Poll: Are you using or learning jQuery?
- How to get started with jQuery
- jQuery: How to get objects by ID, Class, Tag, and Attribute
- How to use filter functions in jQuery
- Tutorial: jQuery Show, Hide, and Toggle functions
- How to create an expandable and contractible FAQ in jQuery
- How to create animations with jQuery
- Animations: How to use fadeout and slideToggle functions in jQuery
- Fun with menus: Navigation using jQuery, CSS3, and HTML5
- How to create shrink/grow and sliding navigation menus with jQuery, CSS3, and HTML5 Word
- How to create an image hover-preview effect using jQuery
- Create a tool tip text-box element using jQuery, CSS3, and HTML5
- Use jQuery for sortable UI elements
- Plug in GalleryView with jQuery on your website
- Use jQuery to meet users' expectations