Wie kann ich eine einzelne Registerkarte im tabContainer von Dojo dynamisch ausblenden/anzeigen?

Question

Ich habe einige Schwierigkeiten, dies herauszufinden. Was ich versuche, ist, wenn eine bestimmte Bedingung erfüllt ist, eine Registerkarte angezeigt wird, wenn dies nicht der Fall ist, ist die Registerkarte ausgeblendet. Ich habe ein paar Antworten auf ähnliche Fragen geprüft und sie haben alle so ziemlich die gleiche Antwort gegeben, die entweder dies zu tun ist:

dojo.style("tabContainer", "visibility", "visible"); 

Allerdings, wenn ich dies tun, bekomme ich die Meldung, dass .style ist keine Funktion. Kann mir jemand erklären, wie ich die Sichtbarkeit ändern muss?

Screenshot der ausgewählten Registerkarte im TabContainer

-Code

this.tabContainer.getChildren()[0].style("visibility", "visible"); 

Answer 1

Statt mit dem Stil zu spielen, würde ich lieber verwenden, um das disabled Attribut des Reiters und überschreiben Sie die CSS fügt. So:

require([ 
 
    "dijit/layout/TabContainer", 
 
    "dijit/layout/ContentPane", 
 
    "dojo/domReady!" 
 
    ], 
 

 
    function(TabContainer, ContentPane) { 
 

 
    var tabContainer = new TabContainer({}, "tabContainer"); 
 
    tabContainer.startup(); 
 

 
    var cp1 = new ContentPane({ 
 
     title: "Pane 1", 
 
     content: "Pane 1" 
 
    }); 
 
    tabContainer.addChild(cp1); 
 

 
    var cp2 = new ContentPane({ 
 
     title: "Pane 2", 
 
     content: "Pane 2" 
 
    }); 
 
    tabContainer.addChild(cp2); 
 

 

 
    //make sure you did not selected the tab you are going to hide 
 
    tabContainer.selectChild(cp2); 
 
    //disable the tab. It will be hidden by the css class 'dijitTabDisabled' 
 
    cp1.controlButton.set('disabled', true); 
 

 
    /* 
 
    Note: 
 
    
 
    cp1 = tabContainer.getChildren()[0]; 
 
    cp2 = tabContainer.getChildren()[1]; 
 
    
 
    so you could write: 
 
    
 
    tabContainer.selectChild(tabContainer.getChildren()[1]); 
 
    tabContainer.getChildren()[0].controlButton.set('disabled', true); 
 
    
 
    */ 
 

 
    });

.tundra .dijitTabDisabled { 
 
    display: none !important 
 
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"> 
 

 
<div class="tundra"> 
 
    <div id="tabContainer"> 
 

 
    </div> 
 
</div>

Answer 2

, wenn Sie verwenden Dojo 1.7+, verwenden Dojo/dom-Stil für eine bessere Praxis.

Sie können die Registerkarte ausblenden, indem Sie css zu tab.controlButton hinzufügen. Wie folgt aus:

domStyle.set(tab.controlButton.domNode, "visibility", "hidden"); 

Werfen Sie einen Blick hier https://jsfiddle.net/an90dr/ep32anm8/