Прокрутка вкладок XUL - PullRequest
Новая
       7

Прокрутка вкладок XUL

2 голосов
/ 10 ноября 2011

Тот же вопрос задавался на форумах 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 из элемента tabs, у меня не будет прокрутки, а некоторые вкладки не будут видны.

Так может ли кто-нибудь предложить мне способ, когда у меня будут и прокрутка и правильно работающие вкладки?

1 Ответ

4 голосов
/ 10 ноября 2011

Теги <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>
...