?
Solved

Create tabs inside cflayout area

Posted on 2011-03-04
4
Medium Priority
?
783 Views
Last Modified: 2012-08-14
Hi,

I try to add a tabs who is set inside a layout of a cflayout border area.

Here is my code

<cflayout name="layoutTest" type="border" fittowindow="yes">
            
                <cflayoutarea name="top" position="top" size="70" splitter="false" overflow="hidden">
                    
                </cflayoutarea>
            
                <cflayoutarea align="center" position="left"  name="left" overflow="auto" size="382" splitter="true" bindonload="true"></cflayoutarea>
            
                <cflayoutarea name="center" position="center" overflow="auto">
                <cflayout type="tabTest" name="tabLayout"></cflayout>
                </cflayoutarea>
            
                    
            </cflayout>

Open in new window


So i need to add a link in the left layout (call left) who create a tab inside the tabTest Layout with a url.


Thanks in advance.

Mike
0
Comment
Question by:quarkmike
  • 2
4 Comments
 
LVL 39

Expert Comment

by:gdemaria
ID: 35038353

The format for your cflayout tab is not correct, the type should be "tab"

Check out this example

<cflayout type="border">
    <cflayoutarea position="top">
        Here you can put your menu
    </cflayoutarea>
        <cflayoutarea position="left" name="test" title="Tree" splitter="true" minsize="150"
                    collapsible="true" size="200" source="tree.cfm" >
    </cflayoutarea>
    <cflayoutarea position="center" >
    <cflayout type="tab" name="tabs">
        <cflayoutarea name="tab1" title="Tab1" style="height:100%" source="grid.cfm" >
        </cflayoutarea>
        <cflayoutarea title="Tab2">
                another tab
        </cflayoutarea>
    </cflayout>
    </cflayoutarea>
</cflayout>

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35039284
The cflayout tag controls the appearance and arrangement of one or more child cflayoutarea regions

Try this, also there is no bindOnLoad attribute in CFLAYOUTAREA

<cflayout name="layoutTest" type="border" fittowindow="yes">
            
                <cflayoutarea name="top" position="top" size="70" splitter="false" overflow="hidden">
                    
                </cflayoutarea>
            
                <cflayoutarea align="center" position="left"  name="left" overflow="auto" size="382" splitter="true">
                
                </cflayoutarea>
            
                <cflayoutarea name="center" position="center" overflow="auto">
                	<cflayout type="tab" name="tabLayout">
                    	<cflayoutarea title="Tab 1" style="background-color:##FFAAFF;" closable="true">
        					This is text in layout area 1
    						</cflayoutarea>
                   </cflayout>
                </cflayoutarea>
            
                    
            </cflayout>

Open in new window

0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35039329
>>So i need to add a link in the left layout (call left) who create a tab inside the tabTest Layout with a url.

Here is how you can do it.. instead of URL I have a button, you can replace it with URL... test it out

<cflayout name="layoutTest" type="border" fittowindow="yes">
            
                <cflayoutarea name="top" position="top" size="70" splitter="false" overflow="hidden">
                    
                </cflayoutarea>
            
                <cflayoutarea align="center" position="left"  name="left" overflow="auto" size="382" splitter="true">
                	<cfform>
    					<cfinput name="show" width="40" value="show tab" type="button" 
       					 onClick="ColdFusion.Layout.showTab('tabLayout', 'area2');">
					</cfform>
                
                </cflayoutarea>
            
                <cflayoutarea name="center" position="center" overflow="auto">
                	<cflayout type="tab" name="tabLayout">
                    	<cflayoutarea name="area2" title="Tab 2" inithide="true" 
            				style="background-color:##FFCCFF" >
       							 This is text in layout area 2
   							 </cflayoutarea>

                   </cflayout>
                </cflayoutarea>
            
                    
            </cflayout>

Open in new window

0
 
LVL 16

Accepted Solution

by:
Gurpreet Singh Randhawa earned 2000 total points
ID: 35041819
You can simply follow this tutorial:

http://tutorial2.learncf.com/

it shows you with a demo what and how to create a Tab

or this also!

http://www.mollerus.net/tom/blog/2007/06/tabbed_dialog_boxes_with_cflayout.html
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Suggested Courses
Course of the Month15 days, 4 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question