Solved

Create tabs inside cflayout area

Posted on 2011-03-04
4
775 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
Comment Utility

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
Comment Utility
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
Comment Utility
>>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 15

Accepted Solution

by:
myselfrandhawa earned 500 total points
Comment Utility
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This article will show, step by step, how to integrate R code into a R Sweave document
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now