Creating an HTML-based Tab Strip with jQuery UI
Dino Esposito | November 13, 2009
In this article, I’ll focus on some capabilities of a special library that takes client-side programming power to the next level. The library is jQuery UI, which is a collection of widgets and effects that completes the popular set of features offered by classic jQuery, with a special emphasis on building UIs. In this article, I’ll focus in particular on creating and skinning tabs.
The Importance of Accessing the DOM
When you think about client-side programming, you usually assume that any code will run faster, appear seamless, and produce zero flickering. This is all true, but there’s another, equally important aspect to consider.
Sometimes client-side code in AJAX solutions is limited to downloading some preformatted HTML content that is attached to a DOM element via
The best reason to use jQuery UI is that you can define your template according to known rules and then invoke a jQuery UI function on that DOM subtree when the host page is loaded or when you really need it. All of sudden, and quite magically, an otherwise static piece of HTML springs to life and starts reacting to mouse events. Furthermore, the same piece of HTML gets dressed with a new style that results from the great CSS support offered by jQuery UI.
The jQuery UI library is a free download from jqueryui.com. The library is highly modular. When you access the site, you can build your own package by combining the modules you think you will need. You can also link from your pages to a few prebuilt releases hosted on Google’s content delivery network (CDN). Controls in the jQuery UI library need a style library. When you download a package, a default theme is selected that you can freely change to any other you like better.
In the context of an ASP.NET MVC application, you store the CSS files under the Content folder by creating a jq-ui-Themes folder. Script files go under the Scripts\jQueryUI folder, as shown in Figure 1. The jQuery UI library requires the classic jQuery library. The latest version of jQuery UI is 1.7.2; this release goes hand in hand with jQuery version 1.3.2.
Template for Tabs
Let’s see what it takes to create a few tabs for a Web page using jQuery UI. To start off, you create a DOM structure according to the jQuery UI default panel for tabs. By default, the list of tabs belongs to a structure made by a DIV that contains a unordered list (UL). Here’s the required minimal markup:
Figure 2 shows the results. Not much to see, to be honest, but there’s enough to believe that something is going on.
You can invoke the
You can add one or more tabs dynamically, or you can flesh out the initial HTML template and provide a bunch of tabs out of the box. Here’s the code you need to create a tab dynamically:
The URL can point to a resource local to the application or to a previously hidden DIV within the page. You can’t use the tab as an IFRAME, however, which means that you can’t download from an external site. Likewise, any absolute link you might follow from a tab will update the browser, not the tab. A DIV within the page is pointed to by specifying it as a hash, in the form of #divID. When you point to a URL outside the page, the tab title is temporarily decorated with a “loading …” message as AJAX is used to download the markup to insert. Through the AjaxOptions settings shown in Table 1 you can customize to a good extent the mechanics of the download.
Figure 3 shows the current results.
In a similar way, you can remove an existing tab and destroy the container as a whole. Here’s the code you need; you identify the tab to remove by index:
Building a Realistic Tab Container
So much for a few basic tasks. Now let’s explore ways to use a tab’s function more effectively. The first point to consider is how you define the content of each tab. You can point a tab to a publicly reachable URL, or you can point it to a section of the current document. If you point to a publicly reachable URL, the content is downloaded in the background and then inserted in the page. The AJAX infrastructure of classic jQuery is used to download dynamic content from the Web.
A common alternative is to give the tab container a relatively static structure and make each tab point to a child block of the root DIV that the tab container is centered on. The following markup shows a static schema for a tab container:
Each displayed tab is represented with an LI element that contains a child anchor element. Here’s the generic template as it is defined in the library’s source code:
When you click a tab, the URL in the anchor is followed and results in in-page navigation if a #-based URL is used.
Any content you want to see displayed when a given tab is selected, if it is not dynamically downloaded from a URL, must be placed as inline markup. At a minimum, this poses the problems of readability and maintenance. In ASP.NET MVC, however, you can work around the issue by using the
When you intend to use the tab container as a pagewide menu, you typically want the tab strip to be initialized on page loading. The ideal place to do this in a jQuery context is via the
As you can see, you can do quite a few things to initialize the
Settings for the Tab Container
As you’ve seen, the tabs function sets up the container. The function is quite flexible as far as its signature is concerned. For example, you can pass it a settings object as shown earlier. Any settings you pass on startup end up replacing the basic and default settings implicitly defined by the library. Table 1 shows some default values and some parameters you can configure at startup.
Sending Commands to the Tab Container
In addition to the settings object, the
The command is a predefined name recognized by the component. Some commands are parameterless, and others accept a few parameters. Table 2 shows some supported commands.
A component fires a number of events for the main situations you face when working. For example, an event occurs when a tab is selected, added, or removed. Likewise, an event is fired when the tab is shown, enabled or disabled, or loaded. Table 3 lists the events supported:
Table 4: Information available to event handlers.
Dealing with Tab Selection
More often than not, a user selects a tab in a container by clicking it or, perhaps, by hovering the mouse over the selected tab. It is useful, however, to have the ability to select a tab programmatically. The
The preceding code selects the third tab (if any). The index, obviously, is zero-based.
It is even more helpful sometimes to be able to retrieve the index of the currently selected tab, as shown here:
In this case, you proceed by invoking the
Another interesting capability that relates to selection is preventing a switch to another tab if the conditions on the currently selected tab don’t allow for that. All you need to do to prevent a change of selection is to handle the
Loading Content via AJAX
When you plan a tab strip, you typically have some UI content to break into many, and more usable, parts. The entire markup is downloaded with the page and built into the DOM. This means that most of the time, you know the content of the tabs already when you display tabs. In this regard, hiding a few tabs and displaying them on demand may be a way to improve the user’s experience; it can hardly be a way to improve the performance. On the other hand, using the AJAX loader ensures that you download markup and enlarge the DOM only on a strict demand.
You can download and display content automatically by setting the URL of a new tab to a same-domain URL. The
As an alternative, you can control the process yourself and use the jQuery AJAX API to make the connection, grab data, and then use the DOM API to attach it to a previously empty tab.
Having tabs in a Web interface is fairly common today. Most of the time, tabs are coded by loading segments of the page and attaching them to mouse events. When a particular link is clicked, the associated content is displayed. From a browser perspective, all the work is done when the page is first loaded. After that, it is all about changing some visibility attributes. The jQuery UI library allows you to build a tab strip out of some DIV tags and LI elements you might already have on the page. It’s as though these elements are styled to look like a tab strip, except that the style also includes some special behavior. To a good extent, tabs can also be manipulated dynamically. For me, however, the simplicity and effectiveness of the setup remains the most attractive trait.
About the Author
Dino is the author of "Programming ASP.NET MVC" for Microsoft Press and also coauthored the bestseller "Microsoft .NET: Architecting Applications for the Enterprise" (Microsoft Press 2008). A long time author and experienced consultant and trainer, Dino lives in Italy (when not traveling) and plays tennis (when not injured).