dijit TabContainerタブを同じサイズにして、タブコンテナのサイズに均等に伸ばしてください

Question

タブを同じサイズにして、均等にタブのサイズをTabContainerのサイズに伸ばす方法を教えてください。下の図は、タブのサイズが異なり、左揃えであることを示しています。しかし、私はそれらにタブコンテナの3分の1でなければならない同じサイズにしたい。

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. の数は、タブコンテナ
3. の幅は、すべての子に計算されたwhidth（whidthコンテナ/番号を適用し計算計算しますdynamiclyあなたが持っているタブのどんな数をそれを行うには

   他のもの）window resize変更イベントを作成します

4. widthダイナミック

を作るために - チャイルズのあなたがしたい場合

require([ 
 
\t "dojo/query", 
 
    "dojo/on", 
 
\t "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); 
 
\t 
 
    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(){ 
 
    \t 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

ここ

は溶液で