TabPanel widget en javascript, sans dépendances !

Bug connus

  1. Sur mac, les combinaisons utilisant normalement Ctrl devraient également fonctionner avec cmd
    (à tester)
  2. Ctrl + page up/page down ne fonctionne pas sur firefox/chrome (pas possible de surcharger le raccourci natif, pas forcément souhaitable non plus) et marche sur ie mais ne bloque pas le comportement normal d'ie (debut/fin de page)

Compatibilité actuelle

EventListener polyfill - classlist.shim.js

  1. Firefox : 3.6+
  2. Chrome : 8+ ? (classList polyfill, 1+)
  3. Opera : 11.5+ ? (10 avec polyfill addEventListener)
  4. Internet Explorer : 10+
  5. IE 9 : classlist polyfill nécéssaire
  6. IE 8 : polyfill eventlistener et classList nécessaire, navigation clavier perturbé, mais possible.
  7. IE 7, 6 : Consultable, mais pas d'interaction.

Télécharger les sources : tabz.0.4.dev.js, 12.6ko tabz.0.4.min.js, 7ko

Fiable

Robuste

Le système de panneaux navigable utilise une base des plus simples : une balise qui sert de conteneur et chacun de ses enfants direct représentent un panneau !
Non, rien de plus.

Accessible

Les éléments pertinent se voient ajouter les rôles et attributs ARIA correspondant.

L'ordre de tabulation est logique et solide.

Navigable au clavier

L'ensemble des éléments sont utilisable au clavier, pour plusieurs type d'intéractions

Depuis le menu de navigation

  • Panneau suivant : touches droite , bas et Page ▼
  • Panneau précédent : touches haut , gauche et Page ▲
  • Premier panneau : touche Début ▮◄
  • Dernier panneau : touche Fin ►▮
  • Suppression : la combinaison Alt + Suppr (si autorisé, cf. options)

Depuis les panneaux

  • Panneau suivant : la combinaison ctrl + Page ▼
  • Panneau précédent : la combinaison Ctrl + Page ▲
  • Sélectioner l'onglet courant :combinaison Ctrl +
  • Suppression : la combinaison Alt+Suppr (si autorisé, cf. options)

Inspiration

Inspiré par le tab panel system (en) de Nicolas Hoffmann

Spécification

Le widget se base sur la description du w3c d'un tab panel widget utilisant wai-aria (en)

Pratique

Le script est très facile à utiliser !

Suivez simplement les étapes suivantes :

Référence au script et une petite ligne de CSS obligatoire

<style> /* Minimum requis en css */ [aria-hidden=true]{ display:none; } /* Il y a moyen de contourner l'obligation de display none avec le module SecureTabIndex ( cf. configuration ), Mais ça peut poser quelques problèmes sur le contenu des panneaux */ </style> <script type="text/javascript" src="chemin/vers/tabz.min.js"></script>

Un peu de markup html

<div id="myTabPanelId"> <div data-name="Slide 1"> <h5>Slide 1</h5> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nesciunt enim deserunt, ratione ducimus iste, magnam doloribus magni nihil ad placeat impedit perspiciatis aut earum at illo. Aut, harum iste? </p> </div> <div data-name="Slide 2"> <h5>Slide 2</h5> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, eum? Illum laborum vero delectus, rem nisi? Dolores repudiandae praesentium architecto officiis laborum sapiente iusto libero ipsum, impedit magnam quae consectetur! </p> </div> <div data-name="Et une dernière pour la route"> <h5>Slide 3</h5> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magni esse sequi assumenda repellat nemo debitis ipsum, eum maiores non eius facere eligendi ipsa modi dolores tempore quae velit porro. </p> </div> </div>

Initialisation (js)

function pageLoaded() { /* any node, realy, you can use querySelector, querySelectorAll, or any method to get the reference of a nodeElement*/ var nodeExample = document.getElementById('myTabPanelId'); new TabPanel({ target: nodeExample }); } document.addEventListener('Load', pageLoaded());

Et voila !

Slide 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nesciunt enim deserunt, ratione ducimus iste, magnam doloribus magni nihil ad placeat impedit perspiciatis aut earum at illo. Aut, harum iste?

Slide 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, eum? Illum laborum vero delectus, rem nisi? Dolores repudiandae praesentium architecto officiis laborum sapiente iusto libero ipsum, impedit magnam quae consectetur!

Slide 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates magni esse sequi assumenda repellat nemo debitis ipsum, eum maiores non eius facere eligendi ipsa modi dolores tempore quae velit porro.

Léger

Sans traitements, le widget pèse environ 12ko dans sa version complète. Certaines fonctionalitée avancée peuvent être enlevée etréduiront encore un peu le poid final!

Il y a deux module optionnel, l'un qui permet la gestion des animations css ( listener sur animationend ) et l'autre permetant de se passer du display none pour les panneau inactif ( permet de garder un comportement clavier normal tout en gardant les panneau inactif à l'écran)

  • Widget Complet

    • Sans optimisation : 12ko
    • Avec minification : 6.5ko
    • Compressé (gzip) : 2.1ko
  • Widget sans modules optionnel

    • Sans optimisation : 10ko
    • Avec minification : 6.1ko
    • Compressé (gzip) : 1.9ko
Marche bien sur les dernières version de internet explorer, chrome et firefox. Les premiers problèmes devraient apparaître avec internet explorer 9 (tests complets à venir)

La configuration de ce module est très simple !

Aucunes restriction autre que le bon sens pour le choix des balises à utiliser pour créer le widget.
Exemple : (div > div, ul > li, section > article ...)

Section > article

<section class="tabpanelWrapper"> <article class="tabPanel"></article> <article class="tabPanel"></article> <article class="tabPanel"></article> </section>

div > div

<div class="tabpanelWrapper"> <div class="tabPanel"></div> <div class="tabPanel"></div> <div class="tabPanel"></div> </div>

ul > li

<ul class="tabpanelWrapper"> <li class="tabPanel"></li> <li class="tabPanel"></li> <li class="tabPanel"></li> </ul>

CallFunction Options

Le constructeur du widget prend en paramètre un objet listant les options

var options = { //Obligatioire target: node, // targetedNode reference // Référence de l'élément à convertir // ex : document.getElementById('MyTabPanels') //Optionel anim: true || false (default), // Rajoute une classe "isAnimated" aux panneaux qui changent d'état // et attend la fin d'une animation css3 pour la retirer et désactiver // réelement le panneau. secureTabIndex: true || false (default), // Active le module SecureTabIdex (cf description du module) deleteBtn: true (default) || false, // Désactive les boutons de suppression, (mais pas la fonctionalité, // toujours accessible avec le raccourci [alt + supr]) deteleBtnString: 'Delete ' // Chaine de caractère utilisé par les boutons de suppression comme // texte ( défaut : 'Delete ') prendra la forme de 'Delete "tabName"' };

Options des panneaux

Les options de panneaux permettent de spécifier des comportements particulier au panneau auquel elles sont affectée.

id="MySlideName"
Les panneau n'ont pas besoin d'id pour fonctionner (le script en génère automatiquement). Vous pouvez tout de même spécifier les votres, pour les rendre plus lisible par exemple.
data-name="Un nom de panneau"
Spécifie un nom pour le panneau. Il sera utilisé par le script pour générer l'onglet correspondant.
Les panneaux n'ayant pas de nom utilisent leur numero de position dans leur widget comme contenu de l'onglet.
data-deletion
Permet la supression du panneau. La supression peut se faire via un raccourci clavier (alt+supr) ou un bouton spécifique.
aria-selected="true"
Permet de choisir le panneau sélectionné au chargement.
Par défaut, le panneau sélectionné est le premier de la liste. Un seul des panneaux peut utiliser cet attribut !

L'utilisation d'autres attributs pour le style ou d'autres scripts est tout à fait possible et ne devraient pas interférer.