Dojo semble avoir des bizarreries ici. J'ai spécifiquement besoin de cacher le TabContainer lorsque la page se charge, mais devenez visible après que l'utilisateur clique sur un bouton. La première chose que j'ai essayée est de régler style.display = "aucun" pour démarrer, puis régler style.display = "bloquer" dans 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 rendant pas le contenu réel. Le contenu de la boîte ne fait que rendre rendu lorsqu'il est déclenché par autre chose (par exemple, aller à une autre tabulation FF ou suspendre / reprendre Firebug rendra la boîte Render).
Si la propriété Style.Display est définie pour être visible sur la charge de la page , tout fonctionne bien. Vous pouvez basculer la propriété d'affichage et indique-t-il ou masque le TabContainer correctement. Mais si elle est définie sur "Aucun" sur la charge de la page, elle visse. p>
J'ai essayé une solution de contournement de la configuration de la propriété Style.Display à "" dans le HTML, mais en le réglant immédiatement sur "Aucun" dans le JavaScript, mais il échoue toujours - le changement survient trop tôt et il a besoin se produire après que les rendus tabcontainer (qui peuvent prendre une seconde ou deux). P>
Code de l'exemple dépouillé: P>
HTML: puis le JavaScript pour afficher l'onglet d'un utilisateur cliquez sur: p>
>
div code >> p> function initTabs()
{
var tabContainer = dojo.byId('tabContainer');
tabContainer.style.display = 'block';
}
9 Réponses :
Vous devriez faire ou peut-être est encore meilleur
La première option ne fonctionne pas non plus. La deuxième option, modifiée comme ce que je suppose que vous avez voulu ("visible" et non "caché") fonctionne un peu mieux, mais toujours pas juste. L'utilisation de la propriété de visibilité permet de masquer et de montrer correctement le TabContainer, mais il prend toujours de la place sur la page tout en cachée (une boîte invisible).
Eh bien, vous pourriez changer la position en absolu. Mais cela le rend gentil d'un piratage laid.
Eh bien, je n'ai pas résolu ce problème, mais je suis venu avec une solution de contournement ... Création du TabContainer dans l'événement du clic, au lieu de la créer de la charge de la page, puis de l'afficher sur l'événement de clic.
HTML: P>
var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer'));
//add tabs
tabContainer.startup();
Après avoir défini l'affichage: Bloc Faites ceci:
dijit.byId('tabContainer').resize();
Il y a une solution pour cela. Si vous souhaitez afficher TabContainer CallLL:
dijit.byId("tabContainer").domNode.style.display = 'block';
dijit.byId("tabContainer").resize();
Juste une mise à jour pour 1,8+, exiger (["dojo / dom-style"], fonction (Domstyle) {domstyle.set (dijit.byid ("TabContainer"). Domnode, {"Afficher": "Bloc" }); dijit.byid ("tabcontainer"). redize ();} PS - Je sais que je devrais aussi modifier dijit.byid ("onglecontainer") à à ["dojo / dom-attr"], fonction (Domattr) {}); mais vous obtenez le point
La première chose (réglage ... puis régler style.display = "bloc" p>
blockquote> Vous devez simplement appeler style.display = "Aucun" code>) est correct. À la place de
.set_visible code> js méthode de l'AJAX TabContainer lorsque "... utilisateur clique sur un bouton", comme: p> $find('<%= Tabs.ClientID %>').set_visible(true);
Vieux fil mais j'ai vécu ce même problème et c'est comme ça que je l'ai résolu. Tout d'abord, vous ne pouvez pas utiliser l'affichage: Aucun. Pour que les gens de Dojo, vous devez utiliser la visibilité: caché avec des dijits ou cela ne fonctionnera pas. Donc, vous voulez ceci: puis, pour montrer ceci, vous effectuez les suivantes: maintenant , le problème que cela pose est ce que vous avez déjà découvert. Cela se réserve une division invisible dans votre fenêtre de 500PX de large. Donc, si vous utilisez un franchéContainer, il y aura cet espace vide de 500px dans votre page. Pour résoudre ce problème, je devais créer mes dijits de manière programmatique et les injecter dans une div vide, plutôt que de faire ce que vous avez fait et faites-la déclarer. J'espère que cela aide quelqu'un là-bas.
@streetlight - J'ai eu quelques années depuis que j'ai travaillé avec Dojo. Vous devriez juste essayer de l'essayer. Désolé ne peut pas être plus d'aide.
J'ai utilisé cela après avoir défini l'affichage de style: bloc et cela fonctionne bien! De cette façon, vous n'avez pas besoin de connaître l'ID du conteneur pour redimensionner.
this.getparent (). redimensionner ();
Si vous utilisez dijit.byID ("tabcontainer"). Redimensionner (); Après avoir réglé l'affichage pour le bloquer, il ramènera les en-têtes d'onglets.
Vous économiserez un peu de JavaScript si vous utilisez simplement Visibilité: cachée; (Bien que le TabContainer prend toujours de la place sur la page)
Une autre alternative que j'utilise assez fréquemment est au lieu de Affichage: aucun / bloc; j'utilise Hauteur: 0PX / Auto;
Vous pouvez également changer la position en absolu et définir également les coordonnées de l'écran hors écran. Cela nécessite beaucoup plus de changements de CSS que de simplement faire la hauteur. C'est ma méthode préférée si cela fonctionne dans ma situation.
entre ces solutions, j'espère que l'on fonctionnera pour vous.
Testé de manière successive avec 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 phase 1 est "utilise jQuery". La phase 3 est un profit.
Vu ce conseil plusieurs fois, mais je suis coincé avec Dojo.
Ouais je n'étais pas sérieux. :) C'est un peu de jibe à l'ensemble de la culture "Utilisez jQuery" (bien que j'adore JQuery, alors ...).