0

2 つの Dojo Dijit ContentPane が並んでいます。そのうちの 1 つを表示/非表示にし、必要に応じてもう 1 つを動的に拡大したいと考えています。「dijit.layout.BorderContainer」を使用する ESRI マッピングの例を使用しています。「divRightMenu」は正しく表示/非表示になりますが、開いたときに「mapDiv」Div を押すのではなく、その上に表示されます。「divRightMenu」divの表示状態に応じて、「mapDiv」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
Dojo dijit の表示の切り替え

これらは主に、div を非表示にできるかどうかを扱います。私の場合、それを非表示/表示することはできますが、残りの DIV から目的の自動サイズ変更動作を取得することはできません。

いずれにせよ、完全なコード サンプルが以下に含まれています。

メインの Index.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 つの contentpanes を配置し、2 つのコンテナーの region プロパティの 1 つを「center」に、もう 1 つを「right」に設定します。contentpanes のいずれかのサイズを変更する場合は、「w」プロパティを含むオブジェクトで「resize」メソッドを呼び出します。contentpane で resize を呼び出した後、border コンテナーで「layout」を呼び出します。

例 ：

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 に答える