Ae pessoal tudo bom com vcs,
estou eu aqui, mais uma vez, perguntando…
porque como diz o ditado, perguntar nao ofende 
mas entao, estou aqui com um enorme problema, é o seguinte:
Preciso fazer um site em ajax, que contem uma série de
e preciso que, ao clicar em determinado botao, determinada tela apareca no div que eu desejar.
ó, abaixo ta o meu codigo, no seu estado atual, quero apenas que o menu: North tenha 1 botao que chame outro menu na div West, deu pra entender ?
segue o codigo
<meta http-equiv="Context-Type" content="text/html; charset=UTF-8">
<!--
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Complex Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<script type="text/javascript">
var djConfig = { isDebug: true };
</script>
<script type="text/javascript" src="./dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.TabContainer");
dojo.require("dojo.widget.LinkPane");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.Checkbox");
</script>
<style type="text/css">
body {
font-family : sans-serif;
}
.dojoTabPaneWrapper {
padding : 10px 10px 10px 10px;
}
</style>
<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI utilities file -->
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
<script type="text/javascript" src="./yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="./resources/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="./resources/css/layout.css"/>
<link rel="stylesheet" type="text/css" href="./resources/css/grid.css"/>
<script language="javascript" src="./grid/PropsGrid.js"></script>
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
.ylayout-panel-north {
border:0px none;
background-color:#c3daf9;
}
#nav {
}
#autoTabs, #center1, #center2, #west {
padding:10px;
}
#north, #south{
font:normal 8pt arial, helvetica;
padding:4px;
}
.ylayout-panel-center p {
margin:5px;
}
#props-panel .ygrid-col-0{
}
#props-panel .ygrid-col-1{
}
</style>
<script type="text/javascript">
Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 150,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 50,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true
}
});
var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
// bogus object as a data source
propsGrid.setSource({
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
});
propsGrid.render();
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'Menu 1'}));
// layout.add('west', new YAHOO.ext.ContentPanel('west2', {title: 'Menu 2'}));
//layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
//layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
//layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
//layout.getRegion('west2').hide();
layout.getRegion('west').hide();
//layout.getRegion('west2').hide();
layout.endUpdate();
},
toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Mostrar o Menu';
}else{
west.show();
link.innerHTML = 'Esconder o Menu';
}
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>
<div id ="container">
<div id="north" class="ylayout-inactive-content">
<a href="#" onclick="Example.toggleWest(this);return false;">Mostrar o Menu</a>
</div>
<div id="west" class="ylayout-inactive-content">
<!--
Menu de opções do Link 1 . </div>
-->
</div>
<div id="autoTabs" class="ylayout-inactive-content"> The layout manager will
automatically create and/or remove the TabPanel component when a region has
more than one panel. Close one of my panels and you can see what I mean. </div>
<div id="center2" class="ylayout-inactive-content">
teste
<p><a href="#" onclick="Example.toggleWest(this);return false;">Show West Region</a></p>
</div>
<div id="center1" class="ylayout-inactive-content">
teste
</div>
<div id="props-panel" class="ylayout-inactive-content" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="ylayout-inactive-content">Status BAR.... </div>
</div>
</body>
</html>
