XUL 选项卡框选项卡滚动

发布于 2024-12-14 09:02:37 字数 1051 浏览 2 评论 0原文

之前在 Mozillazine 论坛中也曾提出过同样的问题。借用他的描述：

我正在开发 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>

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

那么，有人可以建议我一种既可以滚动又可以正常工作的选项卡的方法吗？

原文

The same question has been asked in the Mozillazine forums earlier. Borrowing his description:

I'm developing an extension for Firefox and have a great problem. I've got lots of tabs in my extension and in case of small size windows some of the tabs are not visible. That's why I want to put scrollbars and I can't succeed.

Here is my code

<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>

In this case scrolling does work on tabs but clicking on the tab does nothing, thus the correspondent tab content is not displayed.
If I remove the arrowscrollbox element from the tabs element, I get no scroll and some of tabs are not visible.

So can anyone suggest me a way when I will have both scrolling and properly working tabs?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

近箐 2024-12-21 09:02:37

标签必须是标签的直接子代，否则它将不起作用。标记不必是标记的直接子级，因此您可以将 < /code> 标签之间。这样它就可以工作：

<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>

The <tab> tags have to be direct clildren of the <tabs> tag, otherwise it won't work. The <tabs> tag doesn't have to be a direct child of the <tabbox> tag however so you can put the <arrowscrollbox> tag in between. This way it works:

<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>

回复收藏 0 原文

~没有更多了~