Tab箱
上一页 第 7 章 ZUML页面及XUL组件集 下一页

Tab箱

组件: tabbox ， tabs ， tab ， tabpanels 和tabpanel 。

Tab box 允许开发人员将大量组件分别置于几个组内，且每次只显示一组，这样用户界面不会太难于阅读。在同一时间内仅会显示一组(亦作，面板)。一旦一个隐藏组的tab被点击后，此组的组件变得可见而前一个可见组变得不可见。

tab box的通用语法如下。

<tabbox>
   <tabs>
      <tab label="First"/>
      <tab label="Second"/>
   </tabs>
   <tabpanels>
      <tabpanel>The first panel.</tabpanel>
      <tabpanel>The second panel</tabpanel>
   </tabpanels>
</tabbox>

当前选中的tab组件由selected属性给出，将其设为true。这样可以给当前选中tab不同的外观，这样可以容易看出被选中。在同一时间内，仅有一个tab的值为true。

通过Java代码有两种方式可以改变选中的tab。如下所示，它们是等价的。

tab1.setSelected(true);
tabbox.setSelectedTab(tab1);

当然，你可以直接将selected属性设为true。

<tab label="My Tab" selected="true"/>

若没有tab被选中，则第一个自动被选中。

嵌套tab box

tab面板可以包含任何组件包括另一个tab box。

<tabbox>
   <tabs>
      <tab label="First"/>
      <tab label="Second"/>
   </tabs>
   <tabpanels>
      <tabpanel>
      The first panel.
      <tabbox>
         <tabs>
            <tab label="Nested 1"/>
            <tab label="Nested 2"/>
            <tab label="Nested 3"/>
         </tabs>
         <tabpanels>
            <tabpanel>The first nested panel</tabpanel>
            <tabpanel>The second nested panel</tabpanel>
            <tabpanel>The third nested panel</tabpanel>
         </tabpanels>
      </tabbox>
      </tabpanel>
      <tabpanel>The second panel</tabpanel>
   </tabpanels>
</tabbox>

The Accordion Tab Boxes

Tab box 支持两种模式(mold)：default和accordion。accordion模式的效果如下。

<tabbox mold="accordion">
   <tabs>
      <tab label="First"/>
      <tab label="Second"/>
   </tabs>
   <tabpanels>
      <tabpanel>The first panel.</tabpanel>
      <tabpanel>The second panel</tabpanel>
   </tabpanels>
</tabbox>

orient属性

开发人员可以使用orient属性来控制tab的方位。默认为水平布局。你可以将其变为垂直的，效果如下。

<tabbox width="400px" orient="vertical">
   <tabs>
      <tab label="A"/>
      <tab label="B"/>
      <tab label="C"/>
      <tab label="D"/>
      <tab label="E"/>
   </tabs>
   <tabpanels>
      <tabpanel>This is panel A</tabpanel>
      <tabpanel>This is panel B</tabpanel>
      <tabpanel>This is panel C</tabpanel>
      <tabpanel>This is panel D</tabpanel>
      <tabpanel>This is panel E</tabpanel>
   </tabpanels>
</tabbox>

Tabs的align属性

开发人员可以使用tabs的align属性控制tab的对齐方式。默认为start(最左边或最上边)。你可以将其改为center或end(最右边或最底部)，效果如下。

<tabbox width="250px">
   <tabs align="end">
      <tab label="Tab 1"/>

      <tab label="Tab 2"/>
   </tabs>
   <tabpanels>
      <tabpanel>This is panel 1</tabpanel>
      <tabpanel>This is panel 2</tabpanel>
   </tabpanels>
</tabbox>

closable属性

将closable属性设置为true，tab会显示关闭按钮，这样用户可以通过点击按钮来关闭tab和相应的tab面板。一旦用户点击了close按钮，onClose事件会被送至tab。此事件会由Tab的onClose方法来处理。然后，默认情况下，onClose方法将tab本身及相应的tab面板移除。

参考window的closable属性 。

disabled属性

通过将disabled属性设置为true，用户通过点击tab或close按钮不能选择或关闭相应的tab。但是，开发人员仍然可以编程控制tab的选择或关闭。

<tabbox width="300px" id="tbx">
   <tabs>

      <tab label="Step 1" id="tb1" disabled="true"/>
      <tab label="Step 2" id="tb2" disabled="true"/>
      <tab label="Step 3" id="tb3" disabled="true"/>
   </tabs>
   <tabpanels>
      <tabpanel><button label="to Step2" onClick="tbx.selectedTab=tb2"/></tabpanel>
      <tabpanel><button label="to Step3" onClick="tbx.selectedTab=tb3"/></tabpanel>
      <tabpanel>This is panel 3</tabpanel>
   </tabpanels>
</tabbox>

Tab面板的随机存取

就像其它组件，你可以仅在tab面板变为可见时加载其内容。最简单的方式是使用fulfill属性来推迟tab面板子组件的创建。

<tabbox>
   <tabs>
      <tab label="Preload" selected="true"/>
      <tab id="tab2" label="OnDemand"/>
   </tabs>
   <tabpanels>
      <tabpanel>
   This panel is pre-loaded since no fulfill specified
      </tabpanel>
      <tabpanel fulfill="tab2.onSelect">
   This panel is loaded only tab2 receives the onSelect event
      </tabpanel>
   </tabpanels>
</tabbox>

如果你更加喜欢手动创建子组件或自动操纵面板，你可以监听onSelect事件，然后当面板被选中时填充其内容。如下所示，

<tabbox id="tabbox" width="400" mold="accordion">
   <tabs>
      <tab label="Preload"/>
      <tab label="OnDemand" onSelect="load(self.linkedPanel)"/>
   </tabs>
   <tabpanels>
      <tabpanel>
   This panel is pre-loaded.
      </tabpanel>
      <tabpanel>
      </tabpanel>
   </tabpanels>
   <zscript><![CDATA[
   void load(Tabpanel panel) {
      if (panel != null && panel.getChildren().isEmpty())
         new Label("Second panel is loaded").setParent(panel);
   }
   ]]></zscript>
</tabbox>

上一页 上一级 下一页
箱式模型 起始页 网格