Possible to combine dhtmlxTabbar with jQuery Layout?

Hi,

Is it possible to combine dhtmlxTabbar with jQuery Layout?

I want to create a structure where each dhtmlx tab has an inner jQuery layout: each layout has a left pane and center pane. I have tried some html but it does not work.

The html looks like this:

<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>

	<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="jquery.layout.js"></SCRIPT>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="codebase/dhtmlxtabbar.css"/>
	<script src="codebase/dhtmlxtabbar.js"></script>
	
<SCRIPT type="text/javascript">
	$(document).ready(function () {
		$('#inner_layout').layout({ applyDefaultStyles: true });
	});
</SCRIPT>
</HEAD>
<BODY>
	<div id="a_tabbar" class="dhtmlxTabBar" style="width:99%; height:99%;">
	
		<div id="a1" name="Tab 1-1" selected="1" style="display: none;">
		    <div id="inner_layout" style="width:99%; height:99%;">
				<DIV class="ui-layout-center">Center
					<P>Here is text in the center panel</P>
				</DIV>
				<DIV class="ui-layout-west">West</DIV>
			</div>
		</div>		
		<div id="a2" name="Tab 1-2" style="display: none;">
		</div>	
		<div id="a3" name="Tab 1-3">			
		</div>
	</div>
	
</BODY>
</HTML>

Attached file includes example and all necessary files. Can you advise how this may be achieved?

Thanks
Rael
jquery_layout.zip (75.5 KB)

Hi,

take out display: none; from ‘a1’ and ‘a2’.

Hi
It will be more easier if you create tabbar the next way:

[code]

Layout Example
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.layout.js"></SCRIPT>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="codebase/dhtmlxtabbar.css"/>
<script src="codebase/dhtmlxtabbar.js"></script>
Center

Here is text in the center panel

West
[/code] Locally it works fine with your demo