Tabs and Tabbox
Your browser displays probably several web pages in windows accessible by tabs. We will describe step by step how to achieve such a tabbed interface in XUL language with tabbox .
Tabbox is a special box that contains a collection of pages accessed via tabs. This can be done by defining a list of tabs, followed by a list of panels that contain pages or widgets.
The comprehensive code looks like this:
<tabbox> <tabs> <tab label="" /> </tabs> <tabpanels> <tabpanel>
... widgets... </tabpanel> </tabpanels> </tabbox>
There are as many tab tags and tabpanel as tabs and pages.
The tags for defining tabbed pages
All these tags are used in the previous code of a tabbed structure:
Box to contain specific panels with tabs.
List of tabs.
Definition of a tab.
List of panels.
Definition of a panel, container of other widgets that are contained within the page.
The tabbox container tells the runtime that panels are stacked and displayed one at a time. The remaining tags are specialized containers.
An example to achieve an interface made of pages accessible via tabs. The interface consists of two pages, so two tabs, each page will contain a textbox that allows you to enter text. All other widgets or sets of elements could form the content of pages too.
That is the simplified code:
<tabbox> <tabs> <tab label="Page 1" /> <tab label="Page 2" /> </tabs> <tabpanels> <tabpanel>
<textbox value="First page"></textbox> </tabpanel> <tabpanel> <textbox value="Second page"></textbox> </tabpanel> </tabpanels> </tabbox>
- Demo code.zip.
How put tabs in multi row?
<tabbox flex="1"> <tabs > <tab label="A" /> <tab label="B" /> <tab label="C" /> <tab label="D" /> </tabs> <tabpanels flex="1" > <label value="Tab A" /> <label value="Tab B" /> <label value="Tab C" /> <label value="Tab D" /> </tabpanels> </tabbox>I want to put tab C below tab A, and tab D below tab B. Is it possible?