Preselecting A Tab Via The URL In ColdFusion 8
By: Raymond Camden
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.