Faire des onglets de tab Tab Conteneur dijit de la même taille et les étirer uniformément à la taille du récipient de tabulation

Question

Pouvez-vous s'il vous plaît me dire comment faire les onglets de la même taille et les étirer uniformément à la taille du TabContainer? L'image ci-dessous montre que la taille des onglets est différente et qu'ils sont alignés à gauche. Mais je veux qu'ils soient de la même taille, ce qui devrait être 1/3 du conteneur de l'onglet.

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

Il est simple de localiser juste la classe et appliquer le style à elle.

Pour ce faire dynamicly peu importe le nombre d'onglets que vous avez:

1. Calculer le nombre de Childs
2. Calculer la largeur de la TabContainer
3. Appliquer à tous les enfants la whidth calculée (whidth conteneur/numéro de Childs - autres choses)
4. Créer window resize événement de changement pour rendre le width dynamique

Voici une solution:

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 Si vous voulez: Fiddle