Comment afficher dynamiquement et cacher un TabContainer entier utilisant DOJO?

DOJO semble avoir des caprices ici. Je requierais spécifiquement que le TabContainer est masqué lorsque la page est chargée, mais que l'utilisateur clique sur un bouton. La première chose que j'ai essayé est de définir style.display = "none" pour commencer, puis de définir style.display = "block" sur l'événement de clic. Malheureusement, cela ne fonctionne que partiellement, la page rendra une boîte invisible dans le bon emplacement / dimensions, mais ne rendra pas le contenu réel. Le contenu de la boîte ne se fait que lorsqu'il est déclenché par autre chose (par exemple, aller à un onglet FF différent ou suspendre / reprendre un firebug rendra la boîte de rendu).

Si la propriété style.display est configurée pour être visible sur la charge de la page, tout fonctionne bien. Vous pouvez basculer la propriété d'affichage et elle affiche ou masque le tabcontainer correctement. Mais si elle est définie sur "aucun" en charge de la page, elle se bloque.

J'ai essayé une solution de mise en place de la propriété style.display à "" dans le HTML, mais je l'ai immédiatement configuré sur "none" dans le Javascript, mais il échoue encore: le changement survient trop tôt et il doit se produire après le rendu du tabcontainer ( Qui peut prendre une seconde ou deux).

Quelque code d'échantillon dépouillé

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

Et ensuite le Javascript pour afficher l'onglet sur un utilisateur, cliquez sur:

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

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

Il y a une solution pour cela. Si vous souhaitez afficher l'appel de TabContainer:

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

Et utilisez 'none' si vous souhaitez cacher TabContainer.

Cela fonctionne pour moi, mais c'est la vérité, ce n'est pas évident 🙂

Ancien fil mais j'ai connu ce même problème et c'est ainsi que je l'ai résolu. Tout d'abord, vous ne pouvez pas utiliser l'affichage: aucun. Par les gens de DOJO, vous devez utiliser la visibilité: caché avec dijits ou cela ne fonctionnera pas. Donc, vous voulez cela:

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

Ensuite, pour montrer ceci, 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 réserve une div invisible dans votre fenêtre qui mesure 500px de large. Donc, si vous utilisez un conteneur frontal, il y aura cet espace vide de 500px dans votre page. Pour résoudre ce problème, 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 façon déclarative. J'espère que cela aide quelqu'un là-bas.

tu devrais faire

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

ou peut-être

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

Est encore mieux

Eh bien, je n'ai pas résolu ce problème, mais j'ai trouvé une solution de contournement … Création du TabContainer sur l'événement de clic, au lieu de le créer caché sur le chargement de la page, puis de l'afficher sur l'événement de clic.

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(); 

Après avoir configuré l'affichage: block, procédez comme suit:

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

Les widgets de dijit.layout ne se déposent pas correctement s'ils sont affichés: aucun (et parfois même lorsque la visibilité est cachée). Vous devez jouer à Firebug jusqu'à ce que vous déterminez ce qui fonctionne!

Testé avec succès avec Dojo 1.10 . Utilisez le registre au lieu de "dijit.byId ()". La méthode redimensionner () fonctionne uniquement 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(); } } 

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

… puis le réglage style.display = "block"

Vous devriez simplement appeler .set_visible JS méthode de l'ajax TabContainer lorsque "… l'utilisateur clique sur un bouton", comme:

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

J'ai utilisé cela après avoir configuré l'affichage de style: bloquer et ça marche génial! De cette façon, vous n'avez pas besoin de connaître l'ID du conteneur pour redimensionner.

this.getParent().resize();

Si vous utilisez dijit.byId ("tabContainer"). Redimensionner (); Après avoir configuré l'affichage pour bloquer, cela ramènera les en-têtes des tabulations.

Vous économiserez un peu de javascript si vous utilisez simplement la visibilité: caché; (Même si le tabContainer prend encore de l'espace sur la page)

Une autre alternative que j'utilise assez souvent est au lieu de l'affichage: aucun / bloc; J'utilise la hauteur: 0px / auto;

Vous pouvez également changer la position en absolue et régler les coordonnées pour l'écran hors-terre ailleurs. Cela nécessite beaucoup plus de changements css que de simplement faire la taille. C'est ma méthode préférée si cela fonctionne dans ma situation.

Entre ces solutions, on espère que l'on travaillera pour vous.