在任何浏览器中，将选项卡容器放置在标题窗格上看起来都很奇怪，但是如果我使用dojo v1.6，它看起来非常完美。将代码移植到1.8.4时，我在这里做错了吗？还是在更高版本中坏了？
请在此代码中更改dojo版本，然后查看区别。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/**1.6**/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{
padding:0;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.TitlePane");
dojo.require("dijit.layout.TabContainer");
//require(["dojo/dnd/move", "dojo/_base/declare", "dojo/dom-construct", "dijit/layout/TabContainer", "dijit/TitlePane", "dijit/layout/BorderContainer", "dojox/layout/ExpandoPane", "dojo/domReady!"]);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;margin:0;">
<div dojotype="dijit.layout.ContentPane" region="center" style="width:500px;height:500px; border:1px solid #000;padding:0;">
<div style="position:absolute;width:500px;height:500px; left:30px; top:10px; z-Index:999;">
<div id="titlepane" dojoType="dijit.TitlePane" title="Show Tabs" closable="false" open="false">
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:100%; height:100%">
<div id="one" dojoType="dijit.layout.ContentPane" title="Tab 1" selected="true">
Tab 1 content
</div>
<div id="two" dojoType="dijit.layout.ContentPane" title="Tab 2">
Tab 2 content
</div>
<div id="three" dojoType="dijit.layout.ContentPane" title="Tab 3">
Tab 3 content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
两个问题。首先，代码在BorderContainer内部包含TitlePane，但TitlePane is not designed to reside inside of layout widgets：
它扩展了ContentPane，但由于未在其他布局小部件内使用
其次，按照书面规定，标题窗格内的TabContainer需要绝对高度，而不是相对高度。由于BorderContainer会为您计算绝对高度，因此您可以在BorderContainers（或其他布局小部件）中获得TabContainers的相对高度。由于TitlePane不提供该计算，因此您必须指定绝对高度...
或者，您可以通过“ doLayout = false”告诉TabContainer不要做自己的布局：
<!DOCTYPE html>
<html>
<head>
<link href='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js'></script>
</head>
<body class='claro'>
<div data-dojo-id='titlePane' data-dojo-type='dijit/TitlePane' data-dojo-props='region:"trailing"'>
<div data-dojo-id='tabContainer' data-dojo-type='dijit/layout/TabContainer' data-dojo-props='doLayout:false'>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 1"'>Hi!</div>
<div data-dojo-type='dijit/layout/ContentPane' data-dojo-props='title:"Tab 2"'>There!</div>
<div>
</div>
<script type='text/javascript'>
require(['dojo/ready', 'dojo/parser'], function (ready, Parser) {
ready(function () {
Parser.parse().then(function () {
});
});
});
</script>
</body>
</html>
您可以使用style ='height：100px;'替换TabContainer上的data-dojo-props。并获得类似的效果。唯一的区别是doLayout false使用所包含内容的自动高度，而height：100px则为您提供静态高度。
关于javascript - 标题 Pane 中的Dojo tabcontainer在版本> 1.6中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19552053/