Interface à onglets

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Questions ou commentaires?

Needs translation

But

À partir d'une structure et de sous-structure multiple, le contenu sera transformé en interface à onglets. Ce plugiciel implémentes l'interface à onglet définie par la norme WAI-ARIA pour les écrans larges et pour les petits écrans l'accordion définie par la norme WAI-ARIA sera utilisé.

Examples

Comment l'implémenter

Interface à onglet

  1. Ajouter un élément div avec la classe wb-tabs.
  2. Incorporer un second élément div avec la classe tabpanels, à l'élément div précédent.
  3. Pour chaque onglet, ajouter un élément details avec un id unique. Ajouter l'attribut open="open" à l'onglet afin qu'il soit ouvert par défaut 
    <div class="wb-tabs">
	<div class="tabpanels">
		<details id="details-panel1">
			...
		</details>
		<details id="details-panel2" open="open">
			...
		</details>
  4. Ajouter l'élément summary avec une étiquette de l'onglet pour chaque élément details. 
    <details id="details-panel1">
		<summary>Exemple 1</summary>
		...
	</details>
	<details id="details-panel2" open="open">
		<summary>Exemple 2</summary>
		...
	</details>
  5. Ajouter le contenu de l'onglet après chaque élément summary.

Code

<div class="wb-tabs">
	<div class="tabpanels">
		<details id="details-panel1">
			<summary>Exemple 1</summary>
			<p>
				...
			</p>
		</details>
		<details id="details-panel2" open="open">
			<summary>Exemple 2</summary>
			<p>
				...
			</p>
		</details>
		...
	</div>
</div>

Carrousel

  1. Ajouter un élément div avec la classe wb-tabs et avec une des classes suivante carousel-s1 ou carousel-s2.
  2. Incorporer un second élément div avec la classe tabpanels, à l'élément div précédent.
  3. Pour chaque onglet, ajouter un élément div avec un identifiant id unique ainsi que les attributs role="tabpanel" et class="out". Pour l'onglet qui devrait être ouvert par défaut, remplacer la classe out par in.
  4. Il est possible de définir l'effet de transition en ajoutant un des classe suivante à l'élément div de l'onglet:
    • fade: Transition en fondu
    • slide: Transition par glissement horizontal
    • slidevert: Transition par glissement vertical
    <div class="wb-tabs carousel-s1">
	<div class="tabpanels">
		<div role="tabpanel" id="panel1" class="in fade">
		</div>
		<div role="tabpanel" id="panel2" class="out fade">
		</div>
	</div>
</div>
  5. Insérer un élément figure pour chaque onglet.
  6. Chaque éléments figure peut contenir:
    • Une image: Ajouter l'image à l'élément figure suivi par l'élément figcaption qui contiendra le sous-titre de l'onglet. 
      <div role="tabpanel" id="panel1" class="in fade">
	<figure>
		<img src="img/protect-environment.jpg" alt="Panneau  1" />
		<figcaption>
			<p>
				Prenez note : <a href="http://www.tc.gc.ca/fra/aviationcivile/opssvs/generale-personnel-changements-1814.htm">Renouvellement du carnet de documents d'aviation</a><br />
				En savoir plus sur <a href="http://www.tc.gc.ca/fra/aerien-menu.htm">le transport aérien</a> au Canada.
			</p>
		</figcaption>
	</figure>
</div>
    • Une vidéo: Ajouter le lecteur multimédia à l'élément figure selon la documentation du lecteur multimédia. 
      <figure class="wb-mltmd" data-wb-mltmd='{"shareUrl": "http://youtu.be/6hvfIm4eEdI"}'>
	<video poster="http://www.servicecanada.gc.ca/fra/video/images/te-lj-fra.jpg" title="Trouver un emploi">
		<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.webm" />
		<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-fra.mp4" />
		<track src="cpts-lg-fr.html" kind="captions" data-type="text/html" srclang="fr" label="Français" />
	</video>
	<figcaption>
		<p>Trouver un emploi (<a href="http://www.servicecanada.gc.ca/fra/video/te.shtml">Transcription</a>)</p>
	</figcaption>
</figure>
    • Du contenu divers: Ajouter le contenu à l'élément figure suivi de l'élément figcaption contenant le sous-titre de l'onglet. 
      <div role="tabpanel" id="panel1" class="in fade">
	<figure>
		<table>
			...
		</table>
		<figcaption>
			<p>Sous-titre de l'onglet</p>
		</figcaption>
	</figure>
</div>
  7. Ajouter l'élément ul avec les attributs role="tablist" au début de l'élément div qui contient la classe wb-tabs.
  8. Ajouter un élément li correspondant à chaque onglet, et ce à l'intérieur de l'élément ul créer à l'étape précédente. Ajouter l'attribut class="active" pour l'onglet qui devrait être ouvert par défaut.
  9. Ajouter l'élément a pour chaque élément li
  10. Définisser l'ancre de chaque onglet et inscriver l'étiquette correspondante. 
    <ul role="tablist">
	<li class="active"><a href="#panel27">Onglet 1</a></li>
	<li><a href="#panel28">Onglet 2</a></li>
		...
</ul>
  11. Optionel: Surcharger les paramètres par défauts en utilisant les options configuration.
  12. Optionel: Ajouter un lien externe qui influancera la visibilité de l'onglet. L'attribut href doit inclure l'identifiant id de l'onglet. (v4.0.8+) 
    <p><a href="#panel3" class="wb-tabs-ext">Afficher le troisième onglet</a></p>

Code

<div class="wb-tabs carousel-s1">
	<ul role="tablist">
		<li class="active"><a href="#panel1">Onglet 1</a></li>
		<li><a href="#panel2">Onglet 2</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel1" class="in fade">
			<figure>
				<img src="img/protect-environment.jpg" alt="Onglet 1" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel2" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="Onglet 2" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Option de configuration (Seulement pour le carrousel)

Option Description Comment configurer Valeurs
Style du carrousel Configurer le style du carrousel. Ajouter la valeur, conjointement à la classe wb-tabs (ex., class="wb-tabs carousel-s1")
carousel-s1:
La zone de contrôle gris est situé en haut du carrousel.
carousel-s2:
La zone de contrôle blanc avec des coin rond est situé en bas du carrousel.
Changer la temps d'affichage de l'onglet (data-wb-tabs) Cette configuration définie le temps d'affichage d'un onglet avant de débuté la transition vers l'onglet subsequant. Ce temps d'attente est définie par la propriété interval de l'attribut data-wb-tabs. Ajouter l'attribut data-wb-tabs à l'élément contenant class="wb-tabs" et définisser le temps d'affichage de l'onglet à l'aide de la propriété interval avec une valeur en seconde. 
data-wb-tabs='{"interval": 3}'
6 (default):
Six seconde avant la transition vers onglet suivant
Entier
Nombre de seconde avant chaque transition
Changer la vitesse entre chaque transition (slow, fast) Cette configuration définie une vitesse avant de débuter la transition de l'onglet suivant. Il peut être définie par les classe slow (lent) ou fast (rapide). Ajouter la classe slow ou fast après la classe wb-tabs. 
class="wb-tabs slow"
Omis (default):
Six seconde avant la transition vers l'onglet suivant
slow
Neuf seconde avant la transition vers l'onglet suivant
fast
Trois seconde avant la transition vers l'onget suivant
Effet de transition Définie un type d'effet de transition pour chaque onglet. Ajouter la classe correspondante à l'élément qui contient soit la classe in ou out de chaque onglet.
fade:
Transition en fondu
slide
Transition par glissement horizontal
slidevert
Transition par glissement vertical
<div role="tabpanel" id="panel21" class="in fade">
Retirer la lecture (data-wb-tabs) (v4.0.5+) Retire le bouton de lecture du carrousel. Ajouter la propriété excludePlay à l'attribut data-wb-tabs avec la valeur true.
false (default):
Le bouton de lecture est inclus dans le carrousel.
true:
Le bouton de lecture est exclus du carrousel.
data-wb-tabs='{"excludePlay": true}'
Retirer la lecture (exclude-play) (v4.0.5+) Retire le bouton de lecture du carrousel. Ajouter la classe excludePlay à l'élément définissant les carousel.
Omis (défault):
Le bouton de lecture est inclus dans le carrousel.
playing:
Le bouton de lecture est exclus du carrousel.
class="wb-tabs excludePlay"
Lecture automatique (data-wb-tabs) (v4.0.5+) Démare l'animation du carrousel dès le chargement de la page.
Avertissement: Démarrer le carrousel automatiquement lors du chargement de la page peux occasionner des distraction ayant des conséquance de convivialité déagréable pour les visiteurs.		 Ajouter la propriété playing avec la valeur true au donnée contenu dans data-wb-tabs.
Note: La lecture automatique ne fonctionnera pas si le bouton de lecture a été retiré du carrousel.
false (défaut):
Le carrousel ne démarre pas automatiquement.
true:
Le carrousel démarre automatiquement.
data-wb-tabs='{"playing": true}'
Lecture automatique (playing) Démare l'animation du carrousel dès le chargement de la page.
Avertissement: Démarrer le carrousel automatiquement lors du chargement de la page peux occasionner des distraction ayant des conséquance de convivialité déagréable pour les visiteurs.		 Ajouter la classse playing à l'élément définissant les carousel.
Omis (défault):
Le carrousel ne démarre pas automatiquement.
playing:
Le carrousel démarre automatiquement.
class="wb-tabs playing"

Événements

Événement Déclencheur Ce qu'il fait
wb-init.wb-tabs Déclenché manuellement (ex., $( ".wb-tabs" ).trigger( "wb-init.wb-tabs" );). Utilisé pour initialiser manuellement l'interface à onglet. Note : L'interface à onglet sera initialisé automatiquement à moins que le code de l'interface à onglet soit ajouté après que la page ait déjà été chargée.
wb-ready.wb-tabs (v4.0.5+) Déclenché automatiquement après que le lecteur soit initialisé. Utilisé pour identifier quel interface à onglet ou carrousel est initialisé (cible de l'événement) 
$( document ).on( "wb-ready.wb-tabs", ".wb-tabs", function( event ) {
});
$( ".wb-tabs" ).on( "wb-ready.wb-tabs", function( event ) {
});
wb-updated.wb-tabs (v4.0.5+) Déclenché automatiquement après que l'interface à onglet/carrousel a été mise à jour (l'onglet visible a changé) Utilisé pour identifier quel interface à onglet/carrousel a été mise à jour (cible de l'événement) et transmet l'onglet recement visible (comme un objet jQuery). 
$( document ).on( "wb-updated.wb-tabs", ".wb-tabs", function( event, $newPanel ) {
});
$( ".wb-tabs" ).on( "wb-updated.wb-tabs", function( event, $newPanel ) {
});
wb-shift.wb-tabs (v4.0.8+) Déclanché manuellement ou automatiquement afin de changer l'onglet visible. Change l'onglet visible. La valeur de shiftto est le nombre d'onglet a déplacer en avant avec nombre positive, ou avec un nombre négatif, le déplacement se fait de reculon. 
$elm.trigger({
    type: "wb-shift.wb-tabs",
    shiftto: 1
});
wb-select.wb-tabs Déclanché manuellement ou automatiquement afin de changer l'onglet visible. Change l'onglet visible. La valeur de id est l'attribut id de l'onglet à afficher 
$elm.trigger({
    type: "wb-select.wb-tabs",
    id: "panel3"
});
wb-ready.wb (v4.0.5+) Déclenché automatiquement quant BOEW a fini son chargement et son exécution. Utilisé pour identifier quand tous les plugiciels BOEW et les polyfills ont terminé leur chargement et leur exécution 
$( document ).on( "wb-ready.wb", function( event ) {
});

Code source

Code source de l'interface à onglet sur GitHub

Date de modification :