Posted in ColdFusion | Posted on 08-08-2007 | 3,135 views
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>
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.
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>
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:
1selected="#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.
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.
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
<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.
select="#session.here is 'thisTag'#"
[Add Comment] [Subscribe to Comments]