Question

同样的问题被问到in the Mozillazine forums earlier。借用他的描述：

我正在为Firefox开发一个扩展程序并且存在一个很大的问题。我的扩展程序中有很多选项卡，如果是小尺寸窗口，则某些选项卡不可见。这就是为什么我想要放置滚动条而我无法成功。

这是我的代码

<tabbox flex="1">
<tabs>
<arrowscrollbox allowevents="true" flex="1" class="tabbrowser-arrowscrollbox" orient="horizontal">
<tab id="tab_1" label="Tab 1"/>
<tab id="tab_2" label="Tab 2"/>
...
<tab id="tab_9" label="Tab 9"/>
</arrowscrollbox>
</tabs>
<tabpanels flex="1">
<tabpanel flex="1" orient="vertical" >Tab 1 content</tabpanel>  
<tabpanel flex="1" orient="vertical" >Tab 2 content</tabpanel>  
...
<tabpanel flex="1" orient="vertical" >Tab 9 content</tabpanel>  
</tabpanels>
</tabbox>

在这种情况下，滚动可以在选项卡上运行，但单击选项卡不会执行任何操作，因此不会显示相应的选项卡内容。如果我从tabs元素中删除arrowscrollbox元素，则不会滚动，并且某些选项卡不可见。

所以有人可以建议我使用滚动和正常工作的标签吗？

Answer 1

<tab>代码必须是<tabs>代码的直接内容，否则无效。 <tabs>标记不一定是<tabbox>标记的直接子标记，因此您可以在其间放置<arrowscrollbox>标记。这种方式有效：

<tabbox flex="1">
  <arrowscrollbox allowevents="true" class="tabbrowser-arrowscrollbox" orient="horizontal">
    <tabs>
      <tab id="tab_1" label="Tab 1"/>
      <tab id="tab_2" label="Tab 2"/>
      ...
      <tab id="tab_9" label="Tab 9"/>
    </tabs>
  </arrowscrollbox>
  <tabpanels flex="1">
    <tabpanel flex="1" orient="vertical" >Tab 1 content</tabpanel>
    <tabpanel flex="1" orient="vertical" >Tab 2 content</tabpanel>
    ...
    <tabpanel flex="1" orient="vertical" >Tab 9 content</tabpanel>
  </tabpanels>
</tabbox>

XUL选项卡选项卡滚动

1 个答案: