L'élément tabcontrol permet la commutation entre différentes vues. Il y a une correspondance directe entre les enfants du tabbox et du tabpanel. Il signifie que le clic sur le premier onglet ouvre la vue définie par le premier enfant du tabpanel, la deuxième étiquette ouvre le deuxième enfant du tabpanel et ainsi de suite.

Un tabcontrol en alignement vertical.

Un tabcontrol en alignement horizontal. Remarquez que les éléments tabcontrol peuvent être imbriqués.

<?xml-stylesheet href="css1.css" type="text/css" title="css1"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <tabcontrol align="horizontal">
          <tabbox align="horizontal">
               <tab>AAA</tab>
               <tab>BBB</tab>
          </tabbox>
          <tabpanel>
                    <tabcontrol align="vertical">
                         <tabbox align="horizontal">
                              <tab>XXX</tab>
                              <tab>YYY</tab>
                         </tabbox>
                         <tabpanel>
                              <box>
                                   <titledbutton value="111"/>
                                   <titledbutton value="222"/>
                                   <titledbutton value="333"/>
                              </box>
                              <box>
                                   <titledbutton value="xxx"/>
                                   <titledbutton value="yyy"/>
                                   <titledbutton value="zzz"/>
                              </box>
                         </tabpanel>
                    </tabcontrol>
                    <box>
                         <titledbutton value="20" oncommand="document.getElementById('prog').setAttribute('value',20)"/>
                         <titledbutton value="50" oncommand="document.getElementById('prog').setAttribute('value',50)"/>
                         <titledbutton value="80" oncommand="document.getElementById('prog').setAttribute('value',80)"/>

                    </box>
               </tabpanel>
     </tabcontrol>
</window>

css1.css

Toutes les propriétés sont spécifiées dans les CSS.

@import url(chrome://global/skin);
window {background-color: silver}
titledbutton {color:navy; font-weight:bold; margin:5px; padding:3px;border: solid navy}
titledbutton {list-style-image: url("chrome://messenger/skin/folder.gif");}
titledbutton:hover {border: solid red}
titledbutton:active {list-style-image: url("chrome://messenger/skin/folder-open.gif");}
progressmeter {margin:15px}