A quick and simple tip - ColdFusion 8 lets you set a default selected tab by using selected="true" in the tab. Here is a simple example:
<cflayout type="tab">
<cflayoutarea title="Tab 1">
<p>
This is the first tab.
</p>
</cflayoutarea>
<cflayoutarea title="Tab 2" selected="true">
<p>
This is the second tab.
</p>
</cflayoutarea>
</cflayout>
In this example, the second tab will be selected when the page loads, as opposed to the first one which is the default. But what if you wanted more control over the selected tab? Here is a way to do it so that you can control the selected tab in the URL itself.
<cflayout type="tab">
<cflayoutarea title="Tab 1" selected="#isDefined('url.tab1')#">
<p>
This is my tab. There are many like it but this one is mine. My tab is my best friend. It is my life. I must master it as I must master my life.
Without me, my tab is useless. Without my tab I am useless. I must fire my tab true. I must shoot straighter than my enemy, who is trying
to kill me. I must shoot him before he shoots me. I will. Before God I swear this creed: my tab and myself are defenders of my country, we
are the masters of my enemy, we are the saviors of my life. So be it, until there is no enemy, but peace. Amen.
</p>
</cflayoutarea>
<cflayoutarea title="Tab 2" selected="#isDefined('url.tab2')#">
<p>
This is the second tab.
</p>
</cflayoutarea>
</cflayout>
In this example, each tab has a selected attribute that looks like so:
selected="#isDefined('url.tabX')#"
To load the page with tab 2 selected, you would simply go to this URL:
http://localhost/test.cfm?tab2
Notice that you don't need to actually pass a value as the code just checks for the existence of the value.
Archived Comments
You scare me sometimes man... ;)
Cool tip, but I was hoping (by the title) that you might have the answer to "how to jump to a tab from the URL" if the site has NOT implemented such a technique as yours. To me, this is a bit of a limitation about these tabbed interfaces that I was thinking of writing about myself.
For instance, let's say I wanted to tell someone to go view the "why upgrade" info on the new CF front page (http://www.adobe.com/produc.... Sadly, one has to tell them to click the tab. I wish, instead, there was some URL we could offer so people could jump right to it.
Are we missing something?
But thanks for the work-around for those who may implement the feature on their own site.
I may not be reading you right. My technique would allow you to do what you said - it just requires the programmer to do his work on the back end.
Nice, this will be a great new feature to use as I have used tabs a lot lately in the apps I am developing.
Dude...
You probably just saved me two hours of trial and error trying to figure this out. And, thankfully, the solution doesn't require a descent into javascript hell.
You da man! Thanks.
g
Another way old comment. Why can't I do something like this :
<cfif session.here = "thisTab">selected="true"</cfif>
I do this and I get an error saying "Invalid Token 'c'"
But maybe I can adapt your method.
You can't put a CFIF inside a cf tag. You could do
select="#session.here is 'thisTag'#"
Hmmmm. Just move the cfif outside the layoutarea tag. That'll work.
Nice twist on Full Metal Jacket ;-)
You were the first to notice. :)
Simple and elegant - love your blog!