个人中心
gpt4 book ai didi

javascript - 标题 Pane 中的 Dojo tabcontainer 在版本 > 1.6 中不起作用

转载 作者：行者123 更新时间：2023-11-30 17:48:44 24 4
gpt4 key购买 nike

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

It extends ContentPane but since it isn’t used inside other layout widgets

其次，如前所述，标题 Pane 内的 TabContainer 需要绝对高度，而不是相对高度。您可以在 BorderContainers(或其他布局小部件)内部使用 TabContainers 的相对高度，因为 BorderContainer 会为您计算绝对高度。由于 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>

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

关于javascript - 标题 Pane 中的 Dojo tabcontainer 在版本 > 1.6 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19552053/

24 4 0
文章推荐： javascript - WebAudio activeSourceCount
文章推荐： c - 从 EFS 读取的压缩结构给出了奇怪的结果
文章推荐： 将 ull 转换为 mpz_t
文章推荐： javascript - 每次单击页面操作按钮时，Chrome 扩展都不会运行
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com