Ajax JavaScript CSS HTML 5 Gecko XUL

Les onglets avec Tabbox

Votre navigateur affiche probablement plusieurs pages Web dans des fenêtres accessibles par des onglets. Nous allons décrire pas à pas comment réaliser une telle interface à onglets en langage XUL avec tabbox.

La tabbox est une boite spéciale qui contient un ensemble de pages accessibles par onglets. La définition de ces pages à onglets est très simple. Elle se réalise en définissant une liste d'onglets, suivie par une liste de panels qui contiennent les pages.

Le code global ressemble à cela:

<tabbox>
    <tabs>
        <tab label="" />
    </tabs>
    <tabpanels>
        <tabpanel>
              ... widgets...
         </tabpanel>
    </tabpanels>
</tabbox>

Il y a autant de balises tab et tabpanel que d'onglets et pages associées.

Les balises de pages à onglets

Toutes ces balises sont utilisées dans le code de structure d'onglet précédent:

tabbox

Boite spécifique pour contenir des panels avec onglets.

tabs

Liste des onglets.

tab

Définition d'un onglet.

tabpanels

Liste des panels.

tabpanel

Définition d'un panel, conteneur d'autres widgets qui sont contenus dans la page.

La boite tabbox indique au runtime que les panels sont superposés et s'affichent un seul à la fois. Les autres balises sont des conteneurs spécialisés.

Démonstration

Un exemple pour réaliser une interface faites de pages accessibles par onglets. L'interface comprend deux pages, donc deux onglets, chaque page contiendra une textbox qui permet d'entrer du texte. Tous autres widgets ou ensembles d'éléments pourraient former le contenu des pages.

Voilà le code simplifié:

<tabbox>
    <tabs>
        <tab label="Page 1" />
        <tab label="Page 2" />
    </tabs>
    <tabpanels>
        <tabpanel>
            <textbox value="Premiere page"></textbox>
        </tabpanel>
        <tabpanel>
            <textbox value="Seconde page"></textbox>
        </tabpanel>
    </tabpanels>
</tabbox>