Introduction

When I set out to design a tabbed interface generator, my primary goal was to create an interface that would load all the data in each tab in a single page request. This would allow the user to click on each tab in the interface and instantly see the data on that tab without waiting for it to load. This requirement necessitated the use of DHTML.

Bascially, DHTML or Dynamic HTML, uses a combination of HTML, CSS, and Javascript to alter the display in the browser after the page has been generated.

In order to make the visual interface as flexible as possible, I decided to use a CSS based design for the tabs. I found an excellent example of what I was looking for in an article on alistapart.com. The examples in the article provided almost everything I needed for the visual design. However, I thought that the user experience would be better if the tab control was self-contained, so I added CSS to add a box surrounding each tab. Warning: Version 0.1 is Internet Explorer Only.

Another problem with the example was the use of ID selectors for the tab control. The intent of their implementation was for a menu to be used as a website's primary navigation. In order to allow multiple tab controls on a single page, I changed the ID selectors to CLASS selectors, by simply changing the '#' signs to periods, and modifying the HTML to use class="classname" instead of id="idname".

Allowing the user to switch between tabs on the page without a reload requires several things to happen.

1. Every tab must be duplicated in both an 'On' and 'Off' state. The 'Off' state tabs are simply not displayed using display: none;.
2. Javascript and styles must be dynamically generated for every tab in the control.

There are 3 files required to fully implement the system.

1. DHTMLTab.cfm - The workhorse of the system that generates the tab control.
2. DHTMLTabItem.cfm - A child tag that just routes data back to the parent.
3. Application.cfm - Since custom tags can't see local variables on the page, I use the REQUEST scope to allow the custom tag to make it's data available to the calling page and vice versa.

Implementation

To produce a tab control, you use the DHTMLTab and DHTMLTabItem tags.

The DHTMLTab tag has 6 optional parameters. The default behaviors can be changed in the cfparam section of the custom tag.

1. Height - Height in pixels of the tab control.
2. Width - Width in pixels of the tab control.
3. Indent - Number of pixels the tabs on the control will be indented.
4. Border - [true,false] Determine if the border should appear around the tab control
5. BorderColor - Hex color that should be used for the border (no pound sign)
6. ContentPadding - Padding in pixels that will surround the content.

Examples

Unfortunately some of the CSS display features work best in IE. I hope to make future improvements including:

• Compliant with both IE/Firefox.
• Skinnable appearance (i.e. skin="flashform") to change the visual appearance.

Download

Installation Instructions

1. Copy DHTMLTab.cfm and DHTMLTabItem.cfm to your 'customtags' folder, or include them in the same directory as the calling template.
2. Copy the code in the included application.cfm file and paste it in your application.cfm file.
3. Copy the /images/tab/ folder into your images folder. If you use different folder names for your images, you will have to update the CSS in DHTMLTab.cfm to use the correct path.
4. The original source files for the tab images are available as Fireworks PNG files in the /tab/ folder, as well as the original files from alistapart (in the /tab/original/ folder).

There are still a few bugs with how the focus state is maintained in the Javascript array, but I hope to have those worked out soon. Watch http://www.nmconsulting.us/tags/ for updates.

Last updated 10/25/2005 1:00 pm.