0

我并排有 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 i'我不确定我错过了什么。我在有问题的 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;
}
4

1 回答 1

2

使用 dijit/layout/BorderContainer，将 2 个内容窗格放在其中，将 2 个容器的区域属性之一设置为“center”，另一个设置为“right”。当您想要调整其中一个内容窗格的大小时，请使用包含“w”属性的对象调用它们的“resize”方法。在内容窗格上调用调整大小后，在边框容器上调用“布局”。

例子 ：

require([
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/form/Button",
    "dojo/domReady!"
], function(BorderContainer, ContentPane, Button){
    var container = new BorderContainer({
    design : "headline",
    gutters : false
    }, "container");

    var pane1 = new ContentPane({
        region : "center",
        id : "pane1"
    });

    var pane2 = new ContentPane({
        region : "right",
        id : "pane2"

    });

    var toolbar = new ContentPane({
        region : "bottom",
        id : "toolbar"
    });

    var btn = new Button({
        label : "Change right side",
        onClick : function(){
            pane2.resize({ w :  Math.random() * pane2.get("w") });
            container.layout();
        }
    });

    toolbar.addChild(btn);
    container.addChild(pane1);
    container.addChild(pane2);
    container.addChild(toolbar);
    container.startup();

});

看到这个小提琴：http: //jsfiddle.net/psoares/vEsy7/

于 2013-07-15T18:39:44.697 回答