【发布时间】：2013-07-13 13:19:09
【问题描述】：
我有 2 个并排的 Dojo Dijit ContentPane。我想显示/隐藏其中一个，并根据需要让另一个动态拉伸。我正在使用一个使用“dijit.layout.BorderContainer”的 ESRI 映射示例。 “divRightMenu”将正确显示/隐藏自己，但是，当打开时，而不是推动“mapDiv”Div，它只是出现在它的顶部。我希望“mapDiv”div 根据“divRightMenu”div 的可见状态动态调整自身大小。
我在下面包含了整页代码 - 我已经尝试过 style.Display = Block / None、style.Visibility = Visible/Hidden，以及尝试将 divRightMenu 的宽度从 1 像素动态设置为 150像素。在所有情况下，divRightMenu 都出现在 mapDiv 的“顶部”，而不是像我想要的那样“推动”它。如果我更改代码以便 divRightMenu 在页面加载时默认可见，那么当我隐藏它时会发生什么，它会消失，但它曾经占据的空白点仍然存在。这肯定是我想念的简单东西吗？
在过去（标准CSS），我会将“float:left/right”与“overflow:hidden”和display:block/none结合起来，可以轻松实现我想要的效果，但使用Dojo/ Dijit 我不确定我错过了什么。我在有问题的 2 个 DIV 标记的内联样式上尝试了浮动/溢出的各种组合，但无法使其正常工作。我还注意到一位发帖人提到他以编程方式即时创建了他的 dijit ContentPanes 来解决这个问题，但我希望有一个除此之外的解决方案（我需要在显示/隐藏 div 内容之间保留所有设置div，我不确定是否可以即时重新创建它）。
以下是我发现的与该主题相关的 2 个主题：
Dojo Toggle Hide and Show Divs
Toggling the display of a Dojo dijit
这些主要处理是否能够隐藏 div。就我而言，我可以隐藏/显示它，但无法从剩余的 DIV 中获得所需的自动调整大小行为。
在任何情况下，完整的代码示例都包含在下面 - 任何帮助将不胜感激：
主索引.htm 代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
}
function ToggleVisibility(id)
{
//if (dijit.byId(id).domNode.style.width == '150px') {
if (dijit.byId(id).domNode.style.display == 'block') {
dijit.byId(id).domNode.style.display = 'none';
//dijit.byId(id).domNode.style.width = "1px";
//dojo.style(id, "visibility", "hidden");
}
else {
//dijit.byId(id).domNode.style.width = "150px";
dijit.byId(id).domNode.style.display = 'block';
//dojo.style(id, "visibility", "visible");
}
dijit.byId(id).resize();
//dijit.byId("mapDiv").resize();
}
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"></script>
<script src="layout.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
<body class="tundra">
<!--TOPMOST LAYOUT CONTAINER-->
<div style="border:4px solid purple;width:100%;height:100%;" id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false">
<!--HEADER SECTION-->
<div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.ContentPane" region="top">
<div id="headerArea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.ContentPane" region="top">Logo Here</div>
<div id="navMenuArea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.ContentPane" region="top">Menu Here | <input type="button" onClick="ToggleVisibility('divRightMenu');" value="Toggle Right Menu"/></div>
</div>
<!--CENTER SECTION-->
<!--CENTER CONTAINER-->
<div id="mapDiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.ContentPane" region="center"></div>
<!--RIGHT CONTAINER-->
<div id="divRightMenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.ContentPane" region="right">
Right Menu
</div>
<!--FOOTER SECTION-->
<div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.ContentPane" region="bottom">
Footer Here
</div>
</div>
</body>
</html>
layout.js 代码：
dojo.require("esri.map");
var resizeTimer;
var map;
function init() {
var initialExtent = new esri.geometry.Extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.SpatialReference({
wkid: 4326
}));
map = new esri.Map("mapDiv", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
resizeMap();
});
});
var url = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledLayer);
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 800);
}
//show map on load
dojo.addOnLoad(init);
layout.css 代码：
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#FFF;
overflow:hidden;
font-family: "Trebuchet MS";
}
#header {
background-color:#FFF;
color:#999;
font-size:16pt;
font-weight:bold;
}
#headerArea {
text-align:left;
}
#navMenuArea {
text-align:right;
/*background:url(toolbar_bg.png) repeat #6788a2;*/
}
#topmenu {
background-color:#FFF;
color:#999;
font-size:16pt;
text-align:right;
font-weight:bold;
}
#footer {
background-color:#FFF;
color:#999;
font-size:10pt;
text-align:center;
}
【问题讨论】：
标签： hide dojo esri contentpane