Подобно TabContainer, диджит AccordionContainer наследует StackContainer и является средством, позволяющим отображать дочерние виджеты по одному в каждый конкретный момент времени. Визуальное отличие этого диджита состоит в том, что он изображается в виде гармошки и воспроизводит анимационный эффект при выборе любого дочернего виджета.

Еще одно важная особенность AccordionContainer заключается в необходимости использовать специальный дочерний контейнер AccordionPane, который служит оберткой для всех его дочерних виджетов. Обсуждение фактических причин, объясняющих такое положение дел, не представляет особого интереса; достаточно знать, что это связано с внутренней реализацией AccordionContainer. Вообще достаточно воспринимать AccordionPane как ContentPane, и все будет в порядке.

В примере 14.8 демонстрируется простой виджет AccordionContainer в действии.
Пример 14.8. Создание диджита AccordionContainer в разметке

<div id="foo" dojoType="dijit.layout.AccordionContainer"
style="width:150px; height:150px; margin:5px">
<div dojoType="dijit.layout.AccordionPane" title="one">
<p>One fish...</p>
</div>
<div dojoType="dijit.layout.AccordionPane" title="two">
<p>Two fish...</p>
</div>
<div dojoType="dijit.layout.AccordionPane" title="red">
<p>Red fish...</p>
</div>
<div id="blue" dojoType="dijit.layout.AccordionPane" title="blue">
<div dojoType="dijit.layout.ContentPane" href="blueFish"></div>
</div>
</div>

Что касается прикладного интерфейса: сам диджит AccordionContainer предоставляет единственный дополнительный атрибут помимо тех, что предлагаются диджитом StackContainer.

Мы могли бы оставить реализацию примера создания диджита программным способом в качестве самостоятельного упражнения для тех, кому это интересно, однако в данном случае порядок создания, как показано в примере 14.9, несколько отличается от описанного ранее, потому что AccordionPane – это отдельный диджит.

Добавлено: 25 Июля 2018 07:24:13 Добавил: Андрей Ковальчук Нравится 0

Добавить