В действительности TabContainer – это всего лишь более причудливая версия диджита StackContainer, главное отличие которого заключается в том, что TabContainer уже имеет набор вкладок, которые в любой момент времени могут использоваться для выбора требуемой страницы. Фактически TabContainer наследует StackContainer и добавляет к нему лишь несколько новых особенностей, относящихся к списку вкладок. Пример 14.6 иллюстрирует типичный способ использования диджита TabContainer.
Пример 14.6. Создание диджита TabContainer в разметке
<div dojoType="dijit.layout.TabContainer"
style="width:225px; height:100px; margin:5px; border:solid 1px;">
<div dojoType="dijit.layout.ContentPane" title="one">
One fish...
</div>
<div dojoType="dijit.layout.ContentPane" title="two">
Two fish...
</div>
<div dojoType="dijit.layout.ContentPane" title="red"
closable="true">Red fish...
<script type="dojo/method" event="onClose" args="evt">
console.log("Closing", this.title);
return true; //чтобы панель закрылась, следует вернуть true!
</script>
</div>
<div dojoType="dijit.layout.ContentPane" title="blue">
Blue fish...
</div>
</div>
Обратите особое внимание, что позиции вкладок устанавливаются автоматически – вам достаточно просто определить значение атрибута 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();