Solved

Create tabs inside cflayout area

Posted on 2011-03-04
4
776 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 15

Accepted Solution

by:
Gurpreet Singh Randhawa earned 500 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Fixing Old Legacy Code 1 24
Add animation to your css 12 32
Is it possible to create a playfile with setacl or icacle? 3 27
Coldfusion - rename files in a folder 4 8
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 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

16 Experts available now in Live!

Get 1:1 Help Now