Jak dynamicznie wyświetlać i ukrywać cały element TabContainer za pomocą DOJO?

Question

DOJO wydaje się mieć tutaj pewne dziwactwa. Szczególnie potrzebuję ukryć TabContainer po załadowaniu strony, ale stanie się widoczny po kliknięciu przycisku przez użytkownika. Pierwszą rzeczą, którą próbowałem, było ustawienie style.display = "none", aby rozpocząć, a następnie ustawienie style.display = "block" dla zdarzenia click. Niestety, tylko częściowo działa - strona wyrenderuje niewidzialne pudełko we właściwej lokalizacji/wymiarach, ale nie wyrenderuje rzeczywistej zawartości. Zawartość pudełka jest renderowana tylko wtedy, gdy zostanie wywołana przez coś innego (na przykład przejście do innej zakładki FF lub zawieszenie/wznowienie firebug spowoduje, że pole będzie renderowane).

Jeśli właściwość style.display jest widoczna przy ładowaniu strony, wszystko działa poprawnie. Możesz przełączyć właściwość wyświetlania i pokazuje lub odpowiednio ukrywa tabulator. Ale jeśli jest ustawiony na "none" przy ładowaniu strony, wkręca się.

Próbowałem obejść ustawienie właściwości style.display na "" w kodzie HTML, ale natychmiast ustawiłem ją na "none" w JavaScript, ale nadal się nie udaje - zmiana następuje zbyt wcześnie i musi nastąpić po renderowanie tabPlayera (co może zająć sekundę lub dwie).

Niektóre pozbawione przykładowy kod:

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

a następnie Javascript by pokazać kartę na użytkownika kliknij:

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

Jak mogę dynamicznie pokazać/ukryć TabContainer bez uruchamiania go w pokazanym stanie?

Answer 1

należy zrobić

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

czy może

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

jest jeszcze lepiej

Answer 2

Cóż, nie rozwiązuje tego problemu, ale wpadłem na obejście ... Tworzenie TabContainer w zdarzeniu kliknięcia, zamiast tworzenia go ukrytego podczas ładowania strony, a następnie wyświetlania go w zdarzeniu kliknięcia.

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

Po ustawieniu display: block to zrobić:

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

dijit.layout widgety często nie układać się prawidłowo jeśli są wyświetlane: brak (a czasami nawet gdy widoczność: ukryta). Musisz się bawić w Firebug, dopóki nie zrozumiesz, co działa!

Answer 4

Istnieje rozwiązanie tego problemu. Jeśli chcesz pokazać TabContainer calll:

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

i użyj "none", jeśli chcesz ukryć TabContainer.

Działa to dla mnie, ale to jest prawda, to nie jest oczywiste :)

Answer 5

Pierwszą rzeczą (ustawienie style.display = "none") ma rację. W miejsce

... następnie ustawienie style.display = "blok"

należy po prostu zadzwonić .set_visible JS metody Ajax TabContainer kiedy "... użytkownik kliknie przycisk", jak :

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

Answer 6

Stary wątek, ale doświadczyłem tego samego problemu i tak go rozwiązałem. Po pierwsze nie można używać wyświetlacza: brak. Dla ludzi w DOJO, musisz użyć widoczności: ukryty z dijitami, ale to nie zadziała. Więc, chcesz to:

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

Następnie, aby pokazać to, wykonaj następujące czynności:

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

Teraz problem ten stwarza to, co już się dowiedziałem. Zastrzega to niewidoczny div w twoim oknie o szerokości 500 pikseli. Więc jeśli używasz kontra bankowego, na twojej stronie będzie pusta luka 500px. Aby rozwiązać ten problem, musiałem programować moje dijty i wprowadzać je do pustego div, zamiast robić to, co zrobiłeś i robić to deklaratywnie. Mam nadzieję, że to pomaga komuś tam.

Answer 7

Użyłem tego po ustawieniu wyświetlania stylu: blokuj i działa świetnie! W ten sposób nie musisz znać ID pojemnika, aby zmienić rozmiar.

this.getParent().resize();

Answer 8

Jeśli używasz dijit.byId ("tabContainer"), zmiana rozmiaru (.); po ustawieniu ekranu na blok spowoduje przywrócenie nagłówków kart.

Zaoszczędzisz trochę javascriptu, jeśli po prostu użyjesz visibility: hidden; (mimo że tabContainer nadal zajmuje miejsce na stronie)

Kolejna alternatywa, której używam dość często, to zamiast display: none/block; Używam wysokość: 0px/auto;

Można również zmienić pozycję na bezwzględną i ustawić współrzędne także dla off-screen. To wymaga o wiele więcej zmian w css niż po prostu wykonanie wysokości. To moja preferowana metoda, jeśli działa w mojej sytuacji.

Pomiędzy tymi rozwiązaniami mamy nadzieję, że jeden z nich zadziała.

Answer 9

Testowane pomyślnie z Dojo 1.10. Użyj rejestru zamiast "dijit.byId()". Metoda zmiana rozmiaru() działa tylko na urządzeniu 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(); 
    } 

}