Add Comment
Tabs With CFLAYOUT Tutorial
ColdFusion Tutorial #2
This tutorial shows some of the features that you can easily achieve using the <cflayout and <cflayoutarea tags.
demo.cfm
Firstly what i'm doing here is displaying a few different things that you can do with the layout tags.On line 2 and 5 we create two layouts of type tab, what we are doing here is embeding one tab set in another.
On line 3 we are creating a tab called Static, this contains some static text line 4 followed by another set of two tabs, Mouse and Duck. Both of these tabs have static but different content.
Line 14 gets interesting, we create another tab within the first tab set, specify a source attribute which is another coldufsion page. When you include content this way, you will find that the content of the tab doesn't actually load until you click the Dynamic tab. This is a good thing as if you have a large set of tabs your page doesn't need to preload a large amount of html.
Also on this line, we specify the refreshOnActive attribute, this tells the tab to load every time that tab is clicked, this is good if the content is changing and you want it up to date.
If you don't specify this, once the content is loaded, it persists on the tab regardless of how many other tabs you switch to.
dynamic.cfm
This page is very simple, it just outputs the current date and type. The reason i'm doing this is so that you can see that the content is being loaded dynamically each time the tab is selected.Have a look at the demo to see it all working.
Demo
See this code running!
Download
Download this code as a zip!
Comments
That's such a help! Thanks!I want to know how you change the font and font weight of the title such as "Copy & Paste" in your example.
bye for now,
Julia
Julia Elms @ Monday 28 Jan 2008 - 06:08:25 AM
I was wondering if it is possible to change the color/text on a per tab basis? I have a set of tabs, and each of those tabs may have a set of sub tabs.
I was able to set the background color of the selected tab (both levels) to blue by modifying the style to:
##myTabs .x-tabs-strip .on .x-tabs-right .x-tabs-left {background: ##D6EEFA no-repeat right 0px;}
I was also able to set the text color of the sub tabs to red by modifying the style to:
##subTabs .x-tabs-strip .x-tabs-text {color:##ff8080;}
My question is, can i just alter the text/color of a specific subtab? I tried using the same syntax as above, but does this not work since it's at the <cflayoutarea> level? Can you only modify the tabs at the <cflayout> level?
The first sub tab is coded:
<cflayoutarea title="Sub Tab 1" name="st1">
However the code below does not work...
##st1 .x-tabs-strip .x-tabs-text {color:##ff8080;}
Any help is greatly appreciated, thanks!
Joe Finan @ Thursday 01 May 2008 - 03:07:26 AM
Click button to add a comment
Author
Dale Fraser