Yesterday I blogged about layouts in ColdFusion 8. This was accomplished with the handy cflayoutarea and cflayout tags. Today's post will use the same tabs but deal with tabs. (No, not bar tabs.) I'm a big fan of tabs for breaking up complex forms, so I'm happy to see this baked into the product.
Let's start with a simple example:
<cflayout type="tab">
<cflayoutarea title="Tab 1">
This is the first tab.
</cflayoutarea>
<cflayoutarea title="Tab 2">
This is the second tab.
</cflayoutarea>
</cflayout>
As you can see - this uses the same tags discussed in the previous post, except this time I used a type of tab. Insdie a tab based layout, all cflayoutarea groups will create a tab. The titles of the layoutareas will be the titles of the tabs. You can see a live demo of this here.
Building basic tab sets is trivial enough. ColdFusion provides many options for the tabs as well. As an example, you can supply a tab height to the layout control like so:
<cflayout type="tab" tabheight="100">
<cflayoutarea title="Tab 1">
<p>
This is the first tab.
</p>
<p>
This is the first tab.
</p>
<p>
This is the first tab.
</p>
<p>
This is the first tab.
</p>
</cflayoutarea>
<cflayoutarea title="Tab 2">
This is the second tab.
</cflayoutarea>
</cflayout>
This will set the height for the tabs. The content in the tabs will automatically scroll if they need to. (If for some reason you don't want this, you can set the overflow attribute to hidden.) The code above can be seen here.
You can also set the tabs to display at the bottom:
<cflayout type="tab" tabheight="100" tabPosition="bottom">
By default, the first tab is selected, but you can also specify a default tab in the code:
<cflayoutarea title="Tab 2" selected="true">
You can even disable a tab if you want:
<cflayoutarea title="Tab 2" disabled="true">
Along with all of these options, there is a nice JavaScript API to work with the tabs. You can select a tab. You can enable or disable tabs. You can even hide or show a tab (although this wasn't working for me so I assume it is currently buggy). For an example of all of this (including the buggy show/hide code), see this final demo. The code for this demo is:
<cflayout type="tab" tabheight="100" name="mytabs">
<cflayoutarea title="Tab 1" name="t1">
<p>
This is the first tab.
</p>
<p>
<form>
<select onChange="if(this.selectedIndex != 0) ColdFusion.Layout.selectTab('t' + this.options[this.selectedIndex].value,'mytabs')">
<option></option>
<cfloop index="x" from="2" to="5">
<cfoutput>
<option value="#x#">Select tab #x#</option>
</cfoutput>
</cfloop>
</select>
</p>
<p>
<a href="javaScript:ColdFusion.Layout.showTab('hiddentab','mytabs')">Show Hidden Tab</a> /
<a href="javaScript:ColdFusion.Layout.hideTab('hiddentab','mytabs')">Hide Hidden Tab</a>
</p>
</cflayoutarea>
<cfloop index="x" from="2" to="5">
<cflayoutarea title="Tab #x#" name="t#x#">
<cfoutput>
<p>
This is tab number #x#.
</p>
</cfoutput>
</cflayoutarea>
</cfloop>
<cflayoutarea title="Dharma Tab" name="hiddentab" inithide="true">
This is the hidden tab. Can't touch this.
</cflayoutarea>
</cflayout>