Сделайте вкладки Tab Tab Tab с одним и тем же размером и равномерно растяните их до размера контейнера табуляции.

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 (whidth контейнер/номер из Чайлдс - другие вещи)
4. Создать window resize событие изменения, чтобы сделать 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 Если вы хотите: Fiddle