Comment afficher et masquer dynamiquement un TabContainer entier à l'aide de DOJO?

Question

DOJO semble avoir quelques bizarreries ici. J'ai spécifiquement besoin que le TabContainer soit caché quand la page se charge, mais devienne visible après que l'utilisateur ait cliqué sur un bouton. La première chose que j'ai essayé est de définir style.display = "none" pour démarrer, puis de définir style.display = "block" sur l'événement click. Malheureusement, cela ne fonctionne que partiellement - la page rendra une boîte invisible dans le bon emplacement/dimensions, mais ne rend pas le contenu réel. Le contenu de la boîte n'est rendu que lorsqu'il est déclenché par quelque chose d'autre (par exemple, aller dans un onglet FF différent ou suspendre/reprendre firebug rendra la boîte de rendu).

Si la propriété style.display est définie pour être visible au chargement de la page, tout fonctionne correctement. Vous pouvez basculer la propriété d'affichage et afficher ou masquer le tabcontainer correctement. Mais s'il est défini sur "none" au chargement de la page, il se bloque. J'ai essayé une solution de contournement de définir la propriété style.display sur "" dans le HTML, mais en la définissant immédiatement sur "none" dans le Javascript, mais elle échoue toujours - le changement se produit trop tôt et il doit se produire après le rendu tabcontainer (qui peut prendre une seconde ou deux).

Quelques exemples de code dépouillé:

HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;display:none;">
</div>

puis le Javascript pour afficher l'onglet sur un clic de l'utilisateur:

function initTabs() 
{ 
var tabContainer = dojo.byId('tabContainer'); 
tabContainer.style.display = 'block'; 
} 

Comment puis-je afficher/masquer dynamiquement un TabContainer sans le démarrer dans l'état affiché?

Answer 1

vous devriez faire

dijit.byId("tabContainer").domNode.style.display = 'block' 

ou peut-être

dijit.byId("tabContainer").domNode.style.visibility = 'hidden'; 

est encore mieux

Answer 2

Eh bien, je ne l'ai pas résoudre ce problème, mais je suis venu avec une solution de contournement ... Création TabContainer sur l'événement click, au lieu de le créer masqué lors du chargement de la page, puis de l'afficher sur l'événement click.

HTML:

<div id="tabContainer">  
</div> 

JS:

var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer')); 
//add tabs 
tabContainer.startup(); 

Answer 3

Après avoir configuré display: block faire:

dijit.byId('tabContainer').resize(); 

widgets dijit.layout souvent ne se fixe pas correctement si elles sont display: none (et parfois même quand visibility: hidden). Vous devez jouer avec Firebug jusqu'à ce que vous compreniez ce qui fonctionne!

Answer 4

Il existe une solution pour cela. Si vous voulez montrer TabContainer calll:

dijit.byId("tabContainer").domNode.style.display = 'block'; 
dijit.byId("tabContainer").resize(); 

et utilisez 'none' si vous voulez cacher TabContainer.

Cela fonctionne pour moi, mais la vérité est, il est pas évident :)

Answer 5

La première chose (réglage style.display = "none") est juste. Au lieu de

... puis définir style.display = "bloc"

vous devez simplement appeler .set_visible méthode JS du ajax TabContainer quand "... l'utilisateur clique sur un bouton", comme :

$find('<%= Tabs.ClientID %>').set_visible(true); 

Answer 6

Ancien thread mais j'ai connu ce même problème et c'est ainsi que je l'ai résolu. D'abord, vous ne pouvez pas utiliser display: none. Par les gens à DOJO, vous devez utiliser la visibilité: caché avec des dijits ou cela ne fonctionnera pas. Alors, vous voulez ceci:

<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;"> 

Ensuite, pour afficher ce que vous procédez comme suit:

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

Maintenant, le problème que cela pose est ce que vous avez déjà découvert. Cela permet de réserver une div invisible dans votre fenêtre de 500 pixels. Donc, si vous utilisez un bordercontainer, il y aura cet espace 500px vide dans votre page. Pour résoudre cela, j'ai dû créer mes dijits par programme et les injecter dans un div vide, plutôt que de faire ce que vous avez fait et de le faire de manière déclarative. J'espère que cela aidera quelqu'un là-bas.

Answer 7

Je l'ai utilisé après avoir réglé l'affichage de style: block et ça marche super! De cette façon, vous n'avez pas besoin de connaître l'ID du conteneur à redimensionner.

this.getParent().resize();

Answer 8

Si vous utilisez dijit.byId ("TabContainer") Modifier la taille(). après avoir défini l'affichage pour bloquer, cela ramènera les en-têtes d'onglet.

Vous économisez un peu de javascript si vous utilisez juste visibilité: caché; (bien que le tabContainer occupera toujours de l'espace sur la page)

Une autre alternative que j'utilise assez souvent est au lieu de affichage: none/block; J'utilise hauteur: 0px/auto;

Vous pouvez également changer la position en absolu et définir les coordonnées de l'écran quelque part également. Cela demande beaucoup plus de changements de css que de simplement faire de la hauteur. C'est ma méthode préférée si cela fonctionne dans ma situation.

Entre ces solutions, nous espérons travailler pour vous.

Answer 9

Testé avec succès avec Dojo 1.10. Utilisez le registre au lieu de "dijit.byId()". La méthode redimensionner() ne fonctionne que sur le dijit.layout.BorderContainer.

define([ 
    "dijit/registry" // registry 
], function(registry) { 

    var show = true; 

    if (show) { 
     domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'}); 
     registry.byId("dijitLayoutBorderContainer").resize(); 
    } else { 
     domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'}); 
     registry.byId("dijitLayoutBorderContainer").resize(); 
    } 

}