Interface à onglets

Aperçu

Chef du projet : Stephane Berube (@berubs)

Objet

Comprime plusieurs sections de contenu dans le même espace physique et fourni des onglets qui permettent à l'utilisateur de choisi la section de contenu à afficher.

Avantages

  • Prise en charge de plusieurs onglets sur une même page.
  • Plusieurs options de mise en forme.
  • Possibilité de régler l’onglet affiché par défaut.
  • Prise en charge du passage automatique d’un onglet au suivant; le délai est réglable.
  • Possibilité d’imposer la même hauteur à tous les onglets (celle du plus long).
  • Compatibilité avec le système de grille CSS.
  • Conformes à WCAG 2.0 AA
  • Recours aux WAI-ARIA pour accroître l’accessibilité
  • Approche d'amélioration progressive

Needs translation

Recommended usage

Use When

  • To display multiple pieces of content with the same format.
  • The tabbed interface can be used as a slideshow to display images.

Appearance

When using this feature to display images, corresponding numbers should be displayed that indicate which image is currently being displayed, as in this example on the Canadian Crown website.

Behaviour

When using the tabbed interface to display text (as in this example on pwgsc.gc.ca), the transition speed must allow enough time for the user to read the text displayed.

When used to promote web content, selecting text or an image should take the user to a new page.

Users must be able to pause (or re-start) rotating tabs.

Content

When used to promote web content, selecting text or an image should take the user to a new page.

Mise en oeuvre

  • Créez un groupe d’onglets pour chaque ensemble d’onglets à l’aide de <div class="wet-boew-tabbedinterface">.
  • Ajoutez <div class="tabs-panel"> à chaque groupe d'onglets, et les balises <div id...> à chaque onglet. L'attribute id pour chaque panneau doit avoir la même valeur que l'attribute href pour l'onglet associé (après le symbole "#"). Par exemple : 
<div class="wet-boew-tabbedinterface">
    <ul class="tabs">
        <li><a href="#tab1">Événements nationaux</a></li>
        <li><a href="#tab2">Événements régionaux</a></li>
        <li><a href="#tab3">Événements locaux</a></li>
    </ul>
    <div class="tabs-panel">
        <div id="tab1">
            <p>onglet 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p><a href="#">lien factice</a></p>
        </div>
        <div id="tab2">
            <p>onglet 2 - Consectetur adipiscing elit. Praesent sit amet felis.</p>
            <p><a href="#">lien factice</a></p>
        </div>
        <div id="tab3">
            <p>onglet 3 - Praesent sit amet felis. Etiam malesuada.</p>
            <p><a href="#">lien factice</a></p>
        </div>
    </div>
</div>

Facultatif : Pour modifier l’apparence par défaut d’un ensemble d’onglets, ajoutez l’une des six classes suivantes au groupe d’onglets :

  • tabs-style-1: onglets horizontaux stylisés
  • tabs-style-2: nouvelles déroulantes horizontales
  • tabs-style-3: nouvelles déroulantes verticales avec les liens à droit
  • tabs-style-4: diaporama avec des liens texte en dessous
  • tabs-style-5: diaporama sans liens texte
  • tabs-style-6: images déroulantes horizontales avec des liens texte ou des liens image en dessous

Nota : les classes tabs-style-2 et tabs-style-3 ont été conçues sans espacement interne; ainsi, les images peuvent remplir tout l’espace prévu. Vous devez donc utiliser la classe <div class="tabs-panel"> avec les paragraphes et tout autre contenu textuel afin d’ajouter les marges voulues. Par exemple :

Facultatif : Spécifier l'onglet par défault par ajouter class="default" à l'onglet. Par exemple :

<ul class="tabs">
    <li><a href="#tab1">Événements nationaux</a></li>
    <li class="default"><a href="#tab2">Événements régionaux</a></li>
    <li><a href="#tab3">Événements locaux</a></li>
</ul>

Facultatif : Ajouter class="auto-height-none" au groupe d'onglets pour annuler la mécanisme qui force le panneaux d'être la même hauteur :

<div class="wet-boew-tabbedinterface auto-height-none">

Facultatif : Ajouter class="cycle-fast", class="cycle" ou class="cycle-slow" au groupe d'onglets pour ajouter les boutons "Jouer"/"Pause" ("Play"/"Pause") pour passer automatiquement d'un onglet à l'autre. Les onglets changent chaque 2 secondes pour cycle-fast, chaque 6 secondes pour cycle et chaque 8 secondes pour cycle-slow. Un délai de rotation différent peut être spécifié avec data-wet-boew='{"cycle":10000}' où la valeur pour cycle est le délai en millisecondes. Les onglets passent de l'un à l'autre automatiquement par défault sauf si class="auto-play-none" est ajouté au groupe d'onglets.

<div class="wet-boew-tabbedinterface cycle auto-play-none">

Facultatif : Ajouter class="animate-fast", class="animate" ou class="animate-slow" au groupe d'onglets pour obtenir un effet rapide, moyenne ou lent de pâlissement en passant d'un onglet à l'autre.

<div class="wet-boew-tabbedinterface animate">

Facultatif : Ajouter class="slide-horz" ou class="slide-vert" au groupe d'onglets pour obtenir un effet déroulant en passant d'un onglet à l'autre.

<div class="wet-boew-tabbedinterface animate slide-horz">

Facultatif : Lorsque vous créez des tableaux parents - enfants, vous devez utiliser les éléments row-start et row-end, sauf dans de rares cas où ça n'est pas souhaitable. Par exemple, si vous utilisez des widgets glisser-déplacer, toutes les cellules du tableau doivent avoir la même taille, car l'ajout de l'élément row-start ou row-end dans certaines d'entre elles peut causer quelques problèmes de mise en page lorsque vous déplacez une case d'une colonne à une autre. Dans cette situation, utilisez plutôt la classe embedded-grid. Cette feuille de style CSS agit comme un conteneur pour les onglets; vous n'avez donc pas à les placer dans une cellule du tableau. De plus, elle fait disparaître les bordures afin que l'espace soit disponible dans toute sa largeur.

Exemples

Développement

L'interface à onglets est dépendent sur EasyTabs.js (licence MIT, licence GPL), EqualHeights (licence GPL) et le plugiciel jQuery Metadata (licence MIT, licence GPL).

Le code pour l'interface à onglets se trouve à plusieurs endroits dans le répertoire source de la BOEW :

Problèmes connus

  • Les utilisateurs risquent de ne pas consulter le contenu caché par défaut.
  • Le fait de consulter tout le contenu exige un effort supplémentaire de la part des utilisateurs.
  • Une page d’envergure peut être publiée intégralement à son chargement avant que cette fonction ne la divise en onglets.
  • L’en-tête des onglets peut entraîner des problèmes d’accessibilité s’il n’est pas assez descriptif (utiliser « 1 », « 2 » et « 3 » pour les actualités par exemple). Utilisez la classe wb-invisible pour donner aux onglets des en-têtes plus descriptifs sans en modifier l’apparence. Par exemple : 
    1<span class="wb-invisible"> Onglet 1</span>
2<span class="wb-invisible"> Onglet 2</span>
  • L’ajout d’effets de transition entre les onglets (le fondu, entre autres) risque de permettre à l’utilisateur de sélectionner un deuxième onglet avant que l’effet de transition du premier soit terminé. Dans ce cas, le deuxième onglet sélectionné est mis en évidence, mais le contenu du premier onglet est publié. Vu ce risque, cette composante ne démontre ni ne recommande l’utilisation des fonctions d’animation (qui sont réglées à « false »).

Historique des versions

Références