Tab Quickies
I’ve been working a lot recently with tab layouts in ColdFusion. Through this, I’ve learned a few tricks that I thought I would pull together into a quick blog entry.
Color Coding Tabs
We have a need on an application we’re working on to color code tabs according to the tabs status. So, for example, if the tab had a status of good it might be color coded green. Bad would be red. The quickest and easiest way to do this is to simply add a span tag with a style attribute like this:
<cflayoutarea title="<span style=’color: green’>Tab 1</span>">
<p>My Tab 1</p>
</cflayoutarea>
<cflayoutarea title="<span style=’color: red’>Tab 2</span>">
<p>My Tab 2</p>
</cflayoutarea> </cflayout>
This results in tabs that look like this: 
The problem is, this is both ugly and inflexible. I really dislike the use of HTML markup in the title attribute of the cflayout tag. Also, what if, as a user fills out a form that these tab colors need to change? A more elegant (but lengthy) solution is to use the EXT objects which ColdFusion uses to create the tabs. Using these, you can get a handle on the tabs and, from there, apply your color coding. Here’s a simple which uses a JavaScript function that will change the color of a named tab:
<head>
<script type="text/javascript">
colortab = function(tabName, color){
/ get the underlying EXT object for the tab layout
var tabs = ColdFusion.Layout.getTabLayout(‘myTabs’);
/ get the tab you want to color
var tab = tabs.getTab(tabName);
/ set the color of this tab via the DOM
tab.el.dom.firstChild.firstChild.firstChild.style.color = color;
}
init = function(){
colortab(‘tab1′, ‘green’);
colortab(‘tab2′, ‘red’);
}
</script>
<!— call the init function on load —>
<cfset ajaxOnLoad(‘init’) /> </head>
<body>
<!— display the tabs —>
<cflayout name="myTabs" type="tab">
<cflayoutarea name="tab1" title="Tab 1">
<p>My Tab 1</p>
</cflayoutarea>
<cflayoutarea name="tab2" title="Tab 2">
<p>My Tab 2</p>
</cflayoutarea>
</cflayout>
</body>
</html>
The nice thing about this code is that you could easily use this function to change the color of a tab as needed. Note: I actually had to place the script block in the HTML head for the ajaxOnLoad() function to call the init method.
Fixing Tab Display Widths
While working with tabs I also ran into a problem where tab widths were not being set correctly in some cases. Due to a business requirement, we had to show a small image in the tab (like a stop light) to support the color of the tab. So, despite the fact that I don’t like HMTL in the title attribute, we were using code like this to add the image into the tab:
<cflayout name="myTabs" type="tab">
<cflayoutarea name="tab1" title="<img src=’small_alert_low.gif’ border=’0′ /> Tab 1">
<p>My Tab 1</p>
</cflayoutarea>
<cflayoutarea name="tab2" title="<img src=’small_alert_high.gif’ border=’0′ /> Tab 2">
<p>My Tab 2</p>
</cflayoutarea> </cflayout>
The problem was, this would cause the tabs to be sized incorrectly. In our application the tabs were too narrow. In the samples I’m working from the tabs are too wide. Here’s a screen shot to show an example of this: 
We also had a similar problem with the tabs were placed in a div that was initially hidden. Upon showing the div the tabs appeared to have no title: 
The solution to this was to get a handle on the tab and use the DOM to resize two elements that make up the tab. Here’s a JavaScript function to manually size the tab correctly:
/ get the underlying EXT object for the tab layout
var tabs = ColdFusion.Layout.getTabLayout(‘myTabs’);
/ get the tab you want to color
var tab = tabs.getTab(tabName);
/ set the color of this tab via the DOM
tab.el.dom.firstChild.firstChild.firstChild.style.width = ‘auto’;
tab.el.dom.firstChild.firstChild.style.width = ‘auto’;
}
However, due to limitations of the EXT TabPanel object, you can’t get an array of tabs and you’ll need to manually call this function for each tab! So, in our real application we used jQuery to do this for us with this script:
this.style.width = ‘auto’;
});
$("#tabs .x-tabs-text").each(function(i){
this.style.width = ‘auto’;
});
So, there are lots of hoops to jump though with the ColdFusion tabs system, but it seems to be easier than any of the alternatives I’ve worked with.
That is sweet. I was wanting each tab to display a number of records, but I didn’t want to do this initially because it takes to long to show the results. With your examples I should be able to show a loading graphic on each tab and retrieve the info in the background, then update the tabs when done.
Hi
Is there a simular way to underline the tab title on mouseover?
Thx.
Thanks.
This worked perfectly for us.