使 dijit TabContainer 选项卡大小相同，并将它们均匀拉伸到选项卡容器的大小

Question

你能告诉我如何使标签大小相同并均匀拉伸到 TabContainer 的大小吗？下图显示选项卡的大小不同并且它们左对齐。但我希望它们大小相同，应该是选项卡容器的 1/3。

var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
});

var cpOrg = new ContentPane({
     title: "Mississippi",
     content: "Mississippi"
});
tc.addChild(cpOrg);

var cpShared = new ContentPane({
     title: "Utah",
     content: "Utah"
});
tc.addChild(cpShared);

var cpPrivate = new ContentPane({
     title: "New York",
     content: "New York"
});
tc.addChild(cpPrivate);

tc.startup();

Answer 1

很简单，只需找到 class 并对其应用样式。

无论您有多少个标签，都可以动态地执行此操作：

计算child个
计算 tabContainer 的宽度
应用于所有 child 计算出的宽度（容器宽度/child 数量 - 其他）
创建 window resize 更改事件以使 width 动态化

这是一个解决方案：

require([
 "dojo/query",
  "dojo/on",
 "dojo/dom-style",
  "dijit/layout/TabContainer", 
  "dijit/layout/ContentPane",
  "dojo/domReady!"
], function(query,On,domStyle,TabContainer,ContentPane) {
  
  var tc = new TabContainer({
    style: "height: 100px; width: 100%;"
  },"tabContainer");

  var cpOrg = new ContentPane({
       title: "Mississippi",
       content: "Mississippi"
  });
  
  tc.addChild(cpOrg);
 
  var cpShared = new ContentPane({
       title: "Utah",
       content: "Utah"
  });
  tc.addChild(cpShared);

  var cpPrivate = new ContentPane({
       title: "New York",
       content: "New York"
  });
  
  tc.addChild(cpPrivate);
  tc.startup();
 
  changeTabWidth();
  
  function changeTabWidth(){
    // get the number of child of tabContainer
    var number_of_child = tc.containerNode.childElementCount;
    
    // calculate width of tabContainer and divide by number of child then 
    // every tab has 6px left and right padding + 1px border right so 
    // size must be 6+6+3-1 for the last tab = "14" that's why we remove 14 above from the width sum
    var width = (domStyle.get(tc.containerNode,"width")/number_of_child) - 14;
    
    query(".dijitTabInner.dijitTabContent.dijitTab").forEach(function(element){
      domStyle.set(element, {
        width: width+"px"
      });
    });
  }
  
  // event to change width after window size changed 
  On(window,"resize",function(){
   changeTabWidth();
  })
  
});

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="tabContainer"></div>
</div>

Fiddle 如果你想要:Fiddle

使 dijit TabContainer 选项卡大小相同，并将它们均匀拉伸到选项卡容器的大小

Make dijit TabContainer tabs same size and evenly stretch them to the size of the tab container

javascript

dojo

tabcontainer