Question

我正在尝试创建一个布局，其中带有两个选项卡的边框容器将显示一系列下拉按钮。例如，请考虑以下代码段：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
        </script>
        <script type='text/javascript'>
            dojo.require('dijit.form.DropDownButton');
            dojo.require('dijit.layout.ContentPane');
            dojo.require('dijit.layout.BorderContainer'); 
            dojo.require("dijit.layout.TabContainer");
        </script>
        <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 { width: 100%; height: 100%; margin: 0; overflow:hidden; }
        </style>
    </head>

    <body class="claro">
        <div dojoType="dijit.layout.BorderContainer" design="headline" gutters="true" liveSplitters="true" style="width: 100%; height: 100%;">
            <div dojoType="dijit.layout.ContentPane" splitter="true" region="center" style="width: 100%;">
                <div dojoType="dijit.layout.TabContainer" tabStrip="true" style="width: 100%; height: 100%">
                    <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
                         <div dojoType="dijit.layout.ContentPane">   
                             <span>Drop Down Button 1</span>
                             <span>Drop Down Button 2</span>
                        </div>
                        <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" style="width: 100%; height: 95%">                         
                            <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
                                Left
                            </div>
                            <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
                                Center
                            </div>
                        </div>
                    </div>
                    <div dojoType="dijit.layout.ContentPane" title="My second tab">
                        Lorem ipsum and all around - second...
                    </div>
                </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" splitter="true" region="bottom" style="height: 100px;">
                Bottom
            </div>
        </div>
    </body>
</html>

“下拉按钮1”和“下拉按钮2”跨度元素将在第一个选项卡元素内和相同选项卡内的边框容器上方很好地显示。现在，如果我们使用下面的代码片段将span元素与Dijit DropDownButton组件括起来：

<div dojoType="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">      
    <span>Drop Down Button 1</span>
</div>
<div dojoType="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">      
    <span>Drop Down Button 2</span>
</div>

标签和边框容器被扰乱并且没有正确显示。

我正在使用Dojo 1.6.1。

Answer 1

好吧，看起来你的“我的第一个标签”应该是BorderContainer，而不是ContentPane。因此，第一个标签有一个顶部（带按钮），加上你已经拥有的左边和中间。

换句话说，而不是：

<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
   <div dojoType="dijit.layout.ContentPane">   
       <span>Drop Down Button 1</span>
       <span>Drop Down Button 2</span>
   </div>
   <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" style="width: 100%; height: 95%">                         
       <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
             Left
       </div>
       <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
             Center
       </div>
  </div>
</div>

做的：

<div dojoType="dijit.layout.BorderContainer" title="My first tab" selected="true" design="headline">
  <div dojoType="dijit.layout.ContentPane" region="top">   
                         <span>Drop Down Button 1</span>
                         <span>Drop Down Button 2</span>
  </div>
  <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
       Left
  </div>
  <div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
       Center
  </div>
</div>

Dojo：当使用多个DropDownButton时，BorderContainer无法正确显示

1 个答案: