Comment puis-je dynamiquement afficher et masquer un ensemble de TabContainer à l'aide de DOJO?

DOJO semble avoir quelques bizarreries ici. J'ai précisément besoin d'avoir le TabContainer cachés lorsque le chargement de la page, mais deviennent alors visibles une fois que l'utilisateur clique sur un bouton. La première chose que j'ai essayé est le réglage de style.display = "none" pour commencer, puis en définissant le style.display = "block" sur l'événement click. Malheureusement, cela ne fonctionne partiellement - la page se rendre invisible dans la boîte de droite emplacement/dimensions, mais de ne pas rendre le contenu réel. La zone de contenu qui ne se rendait lorsqu'il est déclenché par quelque chose d'autre (par exemple, passer à un autre onglet FF ou suspendre/reprendre firebug rendra la zone de rendu).

Si le style.propriété d'affichage est visible au chargement de la page, tout fonctionne bien. Vous pouvez activer /désactiver l'affichage de la propriété et il affiche ou masque la tabcontainer correctement. Mais s'il est réglé sur "none" au chargement de la page, il vis.

J'ai essayé une solution de contournement de définir le style.propriété d'affichage à "" dans le code HTML, mais ensuite immédiatement le réglage à "none" dans le Javascript, mais il ne parvient toujours pas - le changement se produit trop tôt, et il doit se produire après la tabcontainer rendus (ce qui peut prendre une seconde ou deux).

Certains dépouillé de l'échantillon de code:

HTML:

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

</div>

et puis 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 dynamiquement afficher/masquer un TabContainer sans avoir commencer dans la montre de l'état?

La Phase 1 est "Utiliser jQuery". La Phase 3 est le Profit.
Vu que des conseils un peu de temps, mais je suis coincé avec DOJO.
Ouais, je n'étais pas sérieux. 🙂 C'est un peu un empannage à l'ensemble "utiliser jQuery" culture (bien que j'aime jQuery...).

OriginalL'auteur | 2009-08-11

  1. 8

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

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

    et utiliser "aucun" si vous voulez cacher TabContainer.

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

    juste une mise à jour pour 1,8+, require(["dojo/dom-style"], function(domStyle) { domStyle.set(dijit.byId("tabContainer").domNode, {'display': 'block'}); dijit.byId("tabContainer").resize(); } p.s. - Je sais que je dois aussi modifier dijit.byId("tabContainer") à require(["dojo/dom-attr"], function(domAttr){}); mais u obtenir le point

    OriginalL'auteur Lukasz R.

  2. 6

    Vieux thread, mais j'ai vécu cette même question, et c'est comment je l'ai résolu. Tout d'abord, vous ne pouvez pas utiliser display:none. Par les gens de chez DOJO, vous devez utiliser visibility:hidden avec dijits ou cela ne fonctionnera pas. Donc, vous voulez ce:

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

    Puis, pour montrer cela, vous procédez de la manière suivante:

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

    Maintenant, le problème que cela pose est ce que vous avez déjà trouvé. Cette réserve un invisible div dans votre fenêtre qui est 500px de large. Donc, si vous utilisez un bordercontainer, il y aura ce vide 500px lacune dans votre page. Pour résoudre ce problème, j'ai dû créer mon dijits par programmation et de les injecter dans une div vide, plutôt que de faire ce que vous avez fait et de le faire de manière déclarative. Espérons que cela aide quelqu'un là-bas.

    Est-ce de travailler avec des classes?
    Été quelques années depuis que j'ai travaillé avec DOJO. Vous avez juste à essayer. Désolé peut pas être plus d'aide.
    Face -- merci pour votre réponse!

    OriginalL'auteur Perry

  3. 4

    que vous devriez faire 

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

    ou peut-être

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

    est encore mieux

    la première option ne fonctionne pas non plus. La deuxième option, modifié à ce que je suppose que vous avez voulu ("visibles" et non pas "caché") fonctionne un peu mieux, mais pas encore le droit. À l'aide de la propriété de visibilité rend le TabContainer masquer et d'afficher correctement, mais il faut encore de l'espace sur la page tout caché (invisible encadré).
    Ainsi vous pouvez changer la position à l'absolu. Mais que fait une sorte d'un vilain hack.
    display = 'none'

    OriginalL'auteur Marijn

  4. 1

    Bien, je n'ai pas de solution à ce problème, mais j'ai trouvé une solution de contournement...de la Création de la TabContainer sur l'événement de clic, plutôt que d'en créer caché au chargement de la page, puis de l'afficher à 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();

    OriginalL'auteur

  5. 1

    Après avoir défini display:block ce faire:

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

    bibliothèque dijit.mise en page des widgets, souvent, ne sont pas laïcs eux-mêmes correctement si elles sont en display:none (et parfois même lorsque la visibilité:caché). Vous avez à la tripoter de partout dans Firebug jusqu'à ce que vous comprendre ce qui fonctionne!

    OriginalL'auteur Michael B

  6. 1

    Testé avec succès avec Dojo 1.10 . L'utilisation du registre au lieu de "bibliothèque dijit.byId()". La méthode resize() ne fonctionne que sur le bibliothèque dijit.de mise en page.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();
    }

}

    OriginalL'auteur pushStack

  7. 0

    La première chose (réglage style.display = "none") est à droite. En lieu et place de

    ...puis en définissant le style.display = "block"

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

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

    OriginalL'auteur

  8. 0

    J'ai utilisé ce après avoir défini le style display:block et il fonctionne très bien! De cette façon, vous n'avez pas besoin de connaître le numéro d'identification du conteneur à redimensionner.

    this.getParent().resize();

    OriginalL'auteur teaman

  9. 0

    Si vous utilisez
    bibliothèque dijit.byId("tabContainer").resize();
    après avoir défini l'affichage à bloc, il va ramener l'onglet en-têtes.

    Vous économiserez un peu de javascript si vous utilisez simplement
    visibility: hidden;
    (bien que le tabContainer va encore prendre de l'espace sur la page)

    Une autre solution, que j'utilise assez souvent, c'est plutôt de
    display: none/block;
    J'utilise
    hauteur: 0px/auto;

    Vous pourrez également changer la position à l'absolu et définissez les coordonnées de hors de l'écran, quelque part aussi. Qui nécessitent beaucoup plus de css changements que de simplement faire de la hauteur. C'est ma méthode préférée si elle travaille dans ma situation.

    Entre ces solutions espérons que l'on va travailler pour vous.

    OriginalL'auteur Nick Clark