dojo - 如何使用 dijit.layout.TabContainer 指定选定的选项卡？

Question

• 如何在启动时指定选定的选项卡？
• 您如何以编程方式选择选项卡？

Answer 1

HTML - 使用选定的属性。

<div id="tabContainer" dojoType="dijit.layout.TabContainer" 
     tabStrip="true" style="width: 100%; height: 20em;">
    <div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1">Tab 1</div>
    <div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2"
         selected="true">Selected tab 2</div>
</div>

JavaScript -在 TabContainer 小部件上使用selectChild方法。

var cp = new dijit.layout.ContentPane({
                     title: 'Tab title',                       
                     content: 'Selected tab...'
                  });
var tc = dijit.byId("tabContainer");
tc.addChild(cp);
tc.selectChild(cp);

您可以在此处找到更多示例：TabContainer Demo

警告！！！这个演示来自夜间构建。并非所有功能都包含在 1.3.2 版本中。

Answer 2

您可以使用选定的属性 指定要在启动时显示的选项卡。

new dijit.layout.ContentPane({title: "My Tab Title",
content: dojo.byId("MyContent"),selected:true});

在 TabContainer 启动后，您可以将 selectChild 与 id 或对小部件的引用一起使用。请注意，在 TabContainer 启动之前调用 selectChild 会导致错误。