Come faccio a mostrare e nascondere dinamicamente un intero TabContainer usando DOJO?

Question

DOJO sembra avere qualche stranezza qui. Ho specificamente bisogno di nascondere TabContainer quando la pagina viene caricata, ma poi diventa visibile dopo che l'utente fa clic su un pulsante. La prima cosa che ho provato è impostare style.display = "none" per iniziare, e quindi impostare style.display = "block" sull'evento click. Sfortunatamente, funziona solo parzialmente, la pagina renderà una scatola invisibile nella giusta posizione/dimensione, ma non renderà il contenuto reale. Il contenuto della scatola viene visualizzato solo quando viene attivato da qualcos'altro (ad esempio, andare a una scheda FF diversa o sospendere/riprendere firebug renderà il rendering della casella).

Se la proprietà style.display è impostata per essere visibile al caricamento della pagina, tutto funziona correttamente. È possibile attivare o disattivare la proprietà di visualizzazione e mostra o nasconde correttamente il contenitore di tabulazioni. Ma se è impostato su "nessuno" al caricamento della pagina, si rovina.

Ho provato una soluzione alternativa per impostare la proprietà style.display su "" nell'HTML, ma in seguito l'ho impostata immediatamente su "none" nel Javascript, ma non riesce ancora - la modifica si verifica troppo presto e deve avvenire dopo il tabcontainer esegue il rendering (che può richiedere un secondo o due).

Alcuni codice di esempio messo a nudo:

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

e poi il Javascript per visualizzare la scheda su un utente clic:

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

Come posso mostra/nascondi dinamicamente un TabContainer senza averlo avviato nello stato mostrato?

Answer 1

si dovrebbe fare

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

o forse

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

è ancora meglio

Answer 2

Beh, non ho risolto questo problema, ma mi si avvicinò con una soluzione ... Creazione il TabContainer sull'evento click, invece di crearlo nascosto al caricamento della pagina e quindi mostrarlo sull'evento 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

Dopo l'impostazione display: block fare questo: i widget

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

dijit.layout spesso non si trovava se stessi in modo corretto se sono visualizzati: nessuno (e talvolta anche quando visibilità: nascosta). Devi armeggiare in Firebug finché non capisci cosa funziona!

Answer 4

C'è una soluzione per questo. Se si desidera mostrare TabContainer Calll:

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

e utilizzare 'none' se si desidera nascondere TabContainer.

questo funziona per me, ma che è la verità, non è ovvio :)

Answer 5

La prima cosa (impostazione style.display = "none") è giusto. Al posto di

... quindi impostando style.display = "blocco"

si dovrebbe chiamare il metodo .set_visible JS del TabContainer Ajax quando "... utente fa clic su un pulsante", come :

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

Answer 6

Vecchio thread ma ho riscontrato questo stesso problema e questo è il modo in cui l'ho risolto. Innanzitutto, non è possibile utilizzare display: nessuno. Per le persone di DOJO, devi usare la visibilità: nascosto con dijits o questo non funzionerà. Quindi, si desidera che questo:

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

Poi, per mostrare questo effettuare le seguenti operazioni:

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

Ora, il problema questo pone è quello che già scoperto. Questo riserva un div invisibile nella tua vista che è larga 500px. Quindi se stai usando un bordercontainer, ci sarà questo vuoto vuoto di 500px nella tua pagina. Per risolvere questo, ho dovuto creare i miei dijits in modo programmatico e iniettarli in un div vuoto, piuttosto che fare ciò che hai fatto e farlo in modo dichiarativo. Spero che questo aiuti qualcuno là fuori.

Answer 7

L'ho usato dopo aver impostato il display di stile: blocco e funziona benissimo! In questo modo non è necessario conoscere l'ID del contenitore da ridimensionare.

this.getParent().resize();

Answer 8

Se si utilizza dijit.byId ("TabContainer") ridimensionare().; dopo aver impostato il display per bloccarlo riporterà le intestazioni delle schede.

Si risparmia un po 'di javascript se si utilizza solo la visibilità : nascosta; (sebbene il tabContainer occupi ancora spazio sulla pagina)

Un'altra alternativa che uso piuttosto frequentemente è invece di display: none/block; Io uso l'altezza : 0px/auto;

È anche possibile impostare la posizione su assoluto e impostare le coordinate anche fuori dallo schermo. Ciò richiede molti più css cambiamenti rispetto al semplice fare l'altezza però. Questo è il mio metodo preferito se funziona nella mia situazione.

Tra queste soluzioni si spera che funzionerà per voi.

Answer 9

Testato correttamente con Dojo 1.10. Usa registro invece di "dijit.byId()". Il metodo ridimensiona() funziona solo su 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(); 
    } 

}