Solved

Create tabs inside cflayout area

Posted on 2011-03-04
4
779 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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…

726 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