使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

简单地找到类并为其应用样式。

动态地执行任何数量的标签：

1. 计算孩子数
2. 计算tabContainer的宽度
3. 向所有孩子申请计算出的宽度（whidth容器/孩子数量 - 其他东西）
4. 创建window resize更改事件以使width动态

这是一个解决方案：

＆＃13;
＆＃13;
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();
  })
  
});
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

小提琴如果你想要：Fiddle