Intereting Posts

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

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

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

Я попробовал обходное решение установить свойство style.display в «» в HTML, но затем сразу же установил его в «Javascript» на «none», но он все равно не работает – изменение происходит слишком рано, и это должно произойти после отображения 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 без запуска в показанном состоянии?

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

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

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

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

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

  

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

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

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

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

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

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

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

еще лучше

Ну, я не решил эту проблему, но придумал обходной путь … Создание TabContainer в событии click, вместо того, чтобы создавать его скрытым при загрузке страницы, а затем показывать его на событие click.

HTML:

 

JS:

 var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer')); //add tabs tabContainer.startup(); 

После того, как вы установите display: block сделайте следующее:

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

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

Протестировано с 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(); } } 

Первое (установка style.display = "none" ) является правильным. На месте

… затем установите style.display = “block”

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

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

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

this.getParent().resize();

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

Вы сохраните немного javascript, если просто используете видимость: hidden; (хотя tabContainer все равно занимает место на странице)

Еще одна альтернатива, которую я использую довольно часто, – это не отображение: none / block; Я использую height: 0px / auto;

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

Между этими решениями, надеюсь, вы будете работать на вас.