Table of Contents
Advertisement
DEVELOPING COLDFUSION 9 APPLICATIONS
Requesting and Presenting Information
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cfdiv Example</title>
</head>
<body>
<cfform>
<cfinput name="tinput1" type="text">
</cfform>
<h3> using a div</h3>
<cfdiv bind="url:divsource.cfm?InputText={tinput1}" ID="theDiv"
style="background-color:##CCffFF; color:red; height:350"/>
</body>
</html>
The divsource.cfm file that defines the contents of the div region has the following code:
<h3>Echoing main page input:</h3>
<cfoutput>
<cfif isdefined("url.InputText")>
#url.InputText#
<cfelse>
No input
</cfif>
</cfoutput>
Using layouts
The cflayout tag controls the appearance and arrangement of one or more child
cflayoutarea regions contain display elements and can be arranged in one of the following ways:
• Horizontally or vertically.
• In a free-form bordered grid (panel layout) with up to five regions: top, bottom, left. right, and center. You can
optionally configure the layout so that users can resize or collapse any or all of the regions, except the center region.
The center region grows or shrinks to take up any space that other regions do not use. You can also dynamically
show or hide individual regions, or let users collapse, expand, or close regions.
• As a tabbed display, where selecting a tab changes the display region to show the contents of the tab's layout area.
You can dynamically show and hide, and enable and disable tabs, and optionally let users close tabs.
You can configure a layout area to have scroll bars all the time, only when the area content exceeds the available screen
size, or never. You can let layout area contents extend beyond the layout area. You can also nest layouts inside layout
areas to create complex displays.
You can define the layout area content in the
dynamically get the content by calling a CFC function, requesting a CFML page, or calling a JavaScript function.
ColdFusion provides many JavaScript functions for managing layouts, including functions to collapse, expand, show,
and hide border areas; and to create, enable, disable, select, show, and hide tabs. For a complete list of functions, see
Ajax JavaScript Functions in the CFML Reference.
The following example shows the use of a tabbed layout, including the use of JavaScript functions to enable and disable
a tab, and to show and hide a tab.
tag body. But, you can also use a bind expression to
cflayoutarea
Last updated 8/5/2010
regions. The
cflayoutarea
808
Advertisement
Table of Contents
