Defines a region within a cflayout tag body, such as an individual tab of a tabbed layout.

Display Management Tags

cfdiv cflayout cfpod cfwindow

ColdFusion 8: Added this tag

In a border layout 
<cflayoutarea 
    required 
    position="bottom|center|left|right|top" 
    optional 
    align="left|center|justify|right" 
    collapsible="false|true" 
    initcollapsed="false|true" 
    inithide="false|true" 
    maxSize="number of pixels" 
    minSize="number of pixels" 
    name="string" 
    onBindError = "JavaScript function name" 
    overflow = "auto|hidden" 
    size="number of pixels" 
    source="URL" 
    splitter="false|true"  
    style="CSS style specification" 
    title="string"> 
 
    area elements 
 
</cflayoutarea> 
 
In a hbox or vbox layout 
<cflayoutarea 
    optional 
    name="string" 
    onBindError = "JavaScript function name" 
    overflow = "auto|hidden|scroll|visble" 
    size="number of pixels" 
    source="URL" 
    style="CSS style specification"> 
 
    area elements 
 
</layoutarea> 
 
In a tab layout 
<cflayoutarea 
    optional 
    bindonload="false|true" 
    closable="false|true" 
    disabled="false|true" 
    inithide="false|true" 
    name="string" 
    onBindError = "JavaScript function name" 
    overflow = "auto|hidden|scroll|visble" 
    refreshOnActivate = "false|true" 
    selected="false|true" 
    source="URL" 
    style="CSS style specification" 
    tabTip="text" 
    title="string"> 
 
    area elements 
 
</layoutarea>  
 
In an accordion layout 
<cflayoutarea 
    optional 
    bindonload="false|true" 
    closable="false|true" 
    name="string" 
    onBindError = "JavaScript function name" 
    overflow = "auto|hidden|scroll|visble" 
    refreshOnActivate = "false|true" 
    selected="false|true" 
    source="URL" 
    style="CSS style specification" 
    title="string" 
    titleicon="icon location"> 
 
    area elements 
 

If you specify a source attribute, all child tags are ignored. If you do not have child tags, close the tag with />. Note: You can specify this tag’s attribute in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag’s attribute name as structure key.

All cflayoutarea tags must be children of cflayout tags and cannot have cflayoutarea tags as immediate children, but they can contain cflayout tags. However, the cflayoutarea tags do not have to be direct children of the cflayout tag; instead, the cflayout tag could have a tag such as cfloop or cfquery as a child, and the cflayoutarea tags could be in the body of the cfloop or cfquery tag. These rules let you create arbitrarily complex combinations of different layouts.
Note: You cannot put a layout of type border inside a layout of type tab.
If you do not specify a size attribute value, ColdFusion attempts to determine the required size for the layout area contents. However, in some cases, such as when the layout area contains AJAX controls, ColdFusion might not be able to determine the required size, and you must specify the size attribute to make the AJAX control appear. In these cases, a scroll bar appears for the layout area.
You can use a source attribute or a tag body to specify the layout area contents; if you specify both, ColdFusion uses the contents specified by the source attribute and ignores the tag body. If you use a source attribute, an animated icon and the text "Loading..." appears while the contents is being fetched.
If the source attribute specifies a page that defines JavaScript functions, the function definitions on that page must have the following format:
functionName = function(arguments) {function body} Function definitions that use the following format may not work:
function functionName (arguments) {function body} However, Adobe recommends that you include all custom JavaScript in external JavaScript files and import them on the application’s main page, and not write them inline in code that you get using the source attribute. Imported pages do not have this function definition format restriction.
If you use the source attribute, you can use a bind expression to include form field values or other form control attributes as part of the source specification. You can bind to HTML format form controls only. For detailed information on using bind expressions see Using Ajax Data and Development Features in the Developing ColdFusion Applications.
In border type layouts, a center layout area always takes up any space that is not used by the other areas, even if you do not specify a cflayoutarea tag with a centerposition attribute. Therefore, if you want only two layout areas in either direction, one of the two must be the center area, or you must explicitly size the two areas to take up the full layout area.
When you nest layouts, set the inner layout area initial sizes appropriately to ensure that they appear.
Use the following JavaScript functions to enable, disable, show, hide, expand, collapse, and select layout areas:
Function
Description
ColdFusion.Layout.createTab
Creates a tab in an existing tabbed layout.
ColdFusion.Layout.disableTab
Disables the specified tab so it cannot be selected.
ColdFusion.Layout.enableTab
Enables the specified tab so users can select it and display the area contents.
ColdFusion.Layout.hideTab
Hides a tab.
ColdFusion.Layout.selectTab
Selects a tab and displays the layout area contents.
ColdFusion.Layout.showTab
Shows a tab that was hidden using the inithide attribute or the hideTab() function.
ColdFusion.Layout.collapseArea
Collapses an area of a border layout.
ColdFusion.Layout.expandArea
Expands a collapsed area of a border layout.
ColdFusion.Layout.getTabLayout
Hides an area of a border layout.
ColdFusion.Layout.hideArea
Hides an area of a border layout.
ColdFusion.Layout.showArea
Shows an area of a border layout that was hidden using the inithide attribute or the hideArea() function.
ColdFusion.Layout.hideAccordion
Hides an accordion.
ColdFusion.Layout.showAccordion
Shows an accordion that was hidden using the inithide attribute or the hideArea() function.
ColdFusion.Layout.selectAccordion
Selects an accordion and displays the layout area contents.
ColdFusion.Layout.collapseAccordion
Collapses an area of an accordion layout.
ColdFusion.Layout.expandAccordion
Expands a collapsed area of an accordion layout.

Note: When you use the style attribute to specify the background color of a border layout area, specify a height style of 100% to make the background color cover the entire layout area. This is because the style specification applies to an inner content area of the layout area, not the layout area itself, and the 100% specification ensures that the content area takes up all available space in the layout area.

The following example creates a three-tabbed layout and lets you use buttons to dynamically control the second tab.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
</head> 
<body> 
<h3>Atab</h3> 
<cflayout type="tab" name="thelayout" tabheight="175" style="background-color:##CCffFF; 
        color:red; height:200"> 
    <cflayoutarea title="Tab 1" style="background-color:##FFAAFF;" closable="true"> 
        This is text in layout area 1 
    </cflayoutarea> 
    <cflayoutarea name="area2" title="Tab 2" inithide="true"  
            style="background-color:##FFCCFF" > 
        This is text in layout area 2 
    </cflayoutarea> 
    <cflayoutarea title="Tab 3" style="background-color:##FF99FF;"> 
        This is text in layout area 3 
    </cflayoutarea> 
</cflayout> 
<br /> 
<cfform> 
    <cfinput name="show" width="40" value="show tab" type="button"  
        onClick="ColdFusion.Layout.showTab('thelayout', 'area2');"> 
    <cfinput name="hide" width="40" value="hide tab" type="button"  
        onClick="ColdFusion.Layout.hideTab('thelayout', 'area2');"> 
    <cfinput name="enable" width="40" value="enable tab" type="button"  
        onClick="ColdFusion.Layout.enableTab('thelayout', 'area2');"> 
    <cfinput name="disable" width="40" value="disable tab" type="button"  
        onClick="ColdFusion.Layout.disableTab('thelayout', 'area2');"> 
    <cfinput name="select" width="40" value="select tab" type="button"  
        onClick="ColdFusion.Layout.selectTab('thelayout', 'area2');"> 
</cfform> 
</body> 
</html>