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:
1 <cflayout type="tab">
2
3 <cflayoutarea title="Tab 1">
4 <p>
5 This is the first tab.
6 </p>
7 </cflayoutarea>
8
9 <cflayoutarea title="Tab 2" selected="true">
10 <p>
11 This is the second tab.
12 </p>
13 </cflayoutarea>
14
15 </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.
2
3 <cflayoutarea title="Tab 1">
4 <p>
5 This is the first tab.
6 </p>
7 </cflayoutarea>
8
9 <cflayoutarea title="Tab 2" selected="true">
10 <p>
11 This is the second tab.
12 </p>
13 </cflayoutarea>
14
15 </cflayout>
1 <cflayout type="tab">
2
3 <cflayoutarea title="Tab 1" selected="#isDefined('url.tab1')#">
4 <p>
5 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.
6 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
7 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
8 are the masters of my enemy, we are the saviors of my life. So be it, until there is no enemy, but peace. Amen.
9 </p>
10 </cflayoutarea>
11
12 <cflayoutarea title="Tab 2" selected="#isDefined('url.tab2')#">
13 <p>
14 This is the second tab.
15 </p>
16 </cflayoutarea>
17
18 </cflayout>
In this example, each tab has a selected attribute that looks like so:
2
3 <cflayoutarea title="Tab 1" selected="#isDefined('url.tab1')#">
4 <p>
5 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.
6 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
7 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
8 are the masters of my enemy, we are the saviors of my life. So be it, until there is no enemy, but peace. Amen.
9 </p>
10 </cflayoutarea>
11
12 <cflayoutarea title="Tab 2" selected="#isDefined('url.tab2')#">
13 <p>
14 This is the second tab.
15 </p>
16 </cflayoutarea>
17
18 </cflayout>
1 selected="#isDefined('url.tabX')#"
To load the page with tab 2 selected, you would simply go to this URL:
http://localhost/test.cfm?tab2Notice that you don't need to actually pass a value as the code just checks for the existence of the value.
Comment 1 written by todd sharp on 8 August 2007, at 8:32 AM
Comment 2 written by Charlie Arehart on 8 August 2007, at 11:52 AM
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/products/coldfusion/). 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.
Comment 3 written by Raymond Camden on 8 August 2007, at 12:01 PM
Comment 4 written by Jeff on 13 August 2007, at 4:51 PM
Comment 5 written by George Fallar on 23 February 2008, at 7:29 PM
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
Comment 6 written by Don on 3 September 2009, at 1:55 PM
<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.
Comment 7 written by Raymond Camden on 3 September 2009, at 1:56 PM
select="#session.here is 'thisTag'#"
Comment 8 written by Don on 3 September 2009, at 2:06 PM
[Add Comment] [Subscribe to Comments]