TabContainer

В действительности TabContainer – это всего лишь более причудливая версия диджита StackContainer, главное отличие которого заключается в том, что TabContainer уже имеет набор вкладок, которые в любой момент времени могут использоваться для выбора требуемой страницы. Фактически TabContainer наследует StackContainer и добавляет к нему лишь несколько новых особенностей, относящихся к списку вкладок. Пример 14.6 иллюстрирует типичный способ использования диджита TabContainer.
Пример 14.6. Создание диджита TabContainer в разметке
style="width:225px; height:100px; margin:5px; border:solid 1px;">
One fish...

Two fish...

closable="true">Red fish...


Blue fish...



Обратите особое внимание, что позиции вкладок устанавливаются автоматически – вам достаточно просто определить значение атрибута title для каждого дочернего виджета в TabContainer, а обо всем остальном позаботятся внутренние механизмы, не требуя от вас прямого вмешательства (и это лучшее решение).


Кроме того, следует отметить, что вы можете сделать вкладки закрывающимися – с помощью атрибута closeable, а дополнительная точка расширения onClose позволит выполнить какиелибо действия при закрытии вкладки. Однако, будьте внимательны: чтобы вкладка закрылась, точка расширения onClose должна вернуть значение true.

Так же, как и в случае с диджитом StackContainer, в TabContainer можно реализовать отложенную загрузку содержимого, установив в виджетах ContentPane атрибут preload в значение false.

Пример 14.7. Создание диджита TabContainer программным способом var container = new dijit.layout.TabContainer({
tabPosition: "left-h",
style : "width:200px;height:200px;"
}, "foo");
var leftChild = new dijit.layout.ContentPane({title : "tab1"});
leftChild.domNode.innerHTML="tab 1";
var rightChild = new dijit.layout.ContentPane({title : "tab2",
closable: true});
rightChild.domNode.innerHTML="tab 2";
container.addChild(leftChild);
container.addChild(rightChild);
container.startup();

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
AccordionContainer
BorderContainer
ContentPane
StackContainer
Общие особенности диджитов компоновки

Вернуться в раздел: Dojo / Виджеты компоновки