Как динамически показать и скрыть весь TabContainer с помощью DOJO?

Question

У DOJO, кажется, есть некоторые причуды здесь. Мне особенно нужно, чтобы TabContainer скрывался при загрузке страницы, но затем становился видимым после того, как пользователь нажимает кнопку. Первое, что я попробовал, это установить style.display = "none" для запуска, а затем установить style.display = "block" в событии click. К сожалению, это работает только частично - страница будет отображать невидимое поле в нужном месте / размерах, но не отображать фактическое содержимое. Содержимое блока отображается только при его запуске чем-то другим (например, переход на другую вкладку FF или приостановка / возобновление firebug приведут к отображению блока).

Если свойство style.display установлено на отображение при загрузке страницы, все работает нормально. Вы можете переключать свойство display, и оно правильно отображает или скрывает tabcontainer. Но если при загрузке страницы установлено значение «нет», оно облажается.

Я попробовал обходной путь установки свойства style.display в HTML в «», но затем сразу установил его в «none» в Javascript, но все равно не получилось - изменение происходит слишком рано, и оно должно произойти после рендеринг tabcontainer (который может занять секунду или две).

Некоторые образцы кода:

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

, а затем Javascript для отображения вкладки при нажатии пользователем:

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

Как я могу динамически отображать / скрывать TabContainer без его запуска в показанном состоянии?

Answer 1

Для этого есть решение. Если вы хотите показать вызов TabContainer:

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

и используйте 'none', если вы хотите скрыть TabContainer.

Это работает для меня, но это правда, это не очевидно:)

Answer 2

Старая тема, но у меня возникла такая же проблема, и вот как я ее решил. Во-первых, вы не можете использовать дисплей: нет. По словам людей из DOJO, вы должны использовать видимость: скрытый с dijits, иначе это не сработает. Итак, вы хотите это:

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

Затем, чтобы показать это, вы делаете следующее:

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

Теперь проблема в том, что вы уже узнали. Это резервирует невидимый div в вашем окне просмотра шириной 500 пикселей. Так что, если вы используете bordercontainer, на вашей странице будет пустой пробел в 500px. Чтобы решить эту проблему, мне пришлось программно создавать свои ди-джиты и вставлять их в пустой блок, а не делать то, что вы делали, и делать это декларативно. Надеюсь, это поможет кому-то там.

Answer 3

вы должны сделать

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

или, возможно,

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

еще лучше

Answer 4

Успешно протестировано с Dojo 1.10 . Используйте реестр вместо "dijit.byId ()". Метод resize () работает только на 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();
    }

}

Answer 5

После того, как вы установили отображение: заблокируйте это:

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

Виджеты dijit.layout часто не выстраиваются должным образом, если они отображаются: нет (а иногда даже когда видимость скрыта). Вы должны возиться в Firebug, пока не поймете, что работает!

Answer 6

Ну, я не решил эту проблему, но я нашел обходной путь ... Создание TabContainer для события click вместо его скрытия при загрузке страницы, а затем показ его в событии 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 7

Если вы используете dijit.byId ("tabContainer"). Resize ();после того, как вы установите блокировку дисплея, он вернет заголовки вкладок.

Вы сэкономите немного JavaScript, если просто используете видимость: скрытый;(хотя tabContainer по-прежнему будет занимать место на странице)

Другая альтернатива, которую я использую довольно часто, это вместо display: none / block;Я использую высоту: 0px / auto;

Вы также можете переключить положение в абсолютное и установить где-нибудь координаты для вне экрана.Это требует гораздо больше изменений CSS, чем просто сделать высоту.Это мой предпочтительный метод, если он работает в моей ситуации.

Надеемся, что между этими решениями будет работать один для вас.

Answer 8

Я использовал это после установки стиля отображения: блок, и он прекрасно работает! Таким образом, вам не нужно знать идентификатор контейнера для изменения размера.

this.getParent().resize();

Answer 9

Первое (настройка style.display = "none") - это правильно. Вместо

... затем настройка style.display = "block"

Вы должны просто вызвать .set_visible JS-метод ajax TabContainer, когда «... пользователь нажимает кнопку», например:

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