Interface à onglets - nschonni/wet-boew GitHub Wiki

english

Ce composant convertit de façon dynamique plusieurs sections de contenu en une interface à onglets.

Table of Contents

Vue d’ensemble

Chef du projet : Stephane Berube (@berubs)

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

Utilisation recommandée

  • Toutes les pages appropriées.

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 trois 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
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&#160;: 
<pre>
    <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 un effet palîr rapide, moyenne ou lent en passant d'un onglet à l'autre.
<div class="wet-boew-tabbedinterface animate">
  • 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.

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

⚠️ **GitHub.com Fallback** ⚠️