1

在任何浏览器中，在标题窗格上放置选项卡容器看起来都很奇怪，但如果我使用 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>
4

1 回答 1

2

两个问题。首先，代码在 BorderContainer 内有 TitlePane，但TitlePane 并非设计为驻留在布局小部件内：

它扩展了 ContentPane 但因为它没有在其他布局小部件中使用

其次，正如所写，标题窗格内的 TabContainer 需要一个绝对高度，而不是相对高度。您可以在 BorderContainers（或其他布局小部件）中使用 TabContainers 的相对高度，因为 BorderContainer 会为您计算绝对高度。由于 TitlePane 不提供该计算，因此您必须指定绝对高度...

或者，您可以告诉 TabContainer 不要使用“doLayout=false”进行自己的布局：

<!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>

您可以将 TabContainer 上的 data-dojo-props 替换为 style='height:100px;' 并获得类似的效果。唯一的区别是 doLayout false 使用包含内容的自动高度，而 height:100px 为您提供静态高度。

于 2013-10-25T19:35:27.063 回答