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

The content of the tabs can be entered right into the 'content' attribute.

<cf_DHTMLTab>
    <cf_DHTMLTabItem title=
"Content 1" content="Default Implementation Tab 1">
    <cf_DHTMLTabItem title="Content 2" content="Default Implementation Tab 2">
</cf_DHTMLTab>


<cf_DHTMLTab indent="200">
    <cf_DHTMLTabItem title="Content 3" content="Tabs indented Tab 1">
    <cf_DHTMLTabItem title="Content 4" content="Tabs indented Tab 2">
</cf_DHTMLTab>





More complex displays are easy to create by generating the HTML first by using cfsavecontent.

Tab controls can be nested inside of other tabs.

<cf_DHTMLTab height="50" width="450">
<cf_DHTMLTabItem title="Sub Content 1" content="Sub 1">
<cf_DHTMLTabItem title="Sub Content 2" content="#tabs.tabtwocontenttwo#">
</cf_DHTMLTab>

What famous speech is this?

Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation or any nation so conceived and so dedicated can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting-place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But in a larger sense, we cannot dedicate, we cannot consecrate, we cannot hallow this ground. The brave men, living and dead who struggled here have consecrated it far above our poor power to add or detract. The world will little note nor long remember what we say here, but it can never forget what they did here.

It is for us the living rather to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion--that we here highly resolve that these dead shall not have died in vain, that this nation under God shall have a new birth of freedom, and that government of the people, by the people, for the people shall not perish from the earth.

<cf_DHTMLTab height="100" width="500" contentpadding="15">
    <cf_DHTMLTabItem title=
"Content 5" content="#tabs.tab1#">
    <cf_DHTMLTabItem title=
"Content 6" content="#tabs.tab2#">
    <cf_DHTMLTabItem title=
"Content 7" content="#tabs.tab3#">
</cf_DHTMLTab>

#i#

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.

About This Tutorial
Author: Nathan Miller
Skill Level: Intermediate 
 
 
 
Platforms Tested: CFMX,CFMX7
Total Views: 146,868
Submission Date: October 26, 2005
Last Update Date: June 05, 2009
All Tutorials By This Autor: 11
Discuss This Tutorial
  • I real love your web and I trying to do tabbed but I do have idea to do it and I love what you have done above

Advertisement

Sponsored By...
Mobile App Development (IOS, Android, Cordova, Phonegap, Objective-C, Java) - Austin, Texas Mobile Apps - Touch512, LLC.