Interface à onglets

Caractéristiques

  • Prise en charge de plusieurs onglets sur une même page.
  • Plusieurs options de mise en forme.
  • Possibilité de choisir l'onglet par défaut (<li class="default">).
  • Possibilité de choisir si le passage automatique d’un onglet à l’autre est activé; le délai est réglable (rapide : class="cycle-fast", lent : class="cycle-slow", normal : class="cycle").
  • Insertion de l'option Pause/Jouer si le passage automatique d’un onglet à l’autre est activé. Insertion du français pour les pages en français.
  • Seule, l'option Pause/Jouer n'est pas disponible puisque ces commandes ne sont pas significatives (« Pause » quoi?), et le code inséré dit en réalité : Pause<span class="wb-invisible"> : Arrêter la rotation des onglets</span> et Jouer<span class="wb-invisible"> : Lancer la rotation des onglets</span>.
  • Possibilité d’imposer la même hauteur à tous les onglets (celle du plus long). Cette caractéristique est utile lorsque le passage automatique d’un onglet à l’autre est activé : la page ne saute pas quand on passe d’un panneau à l’autre.

Code

<div class="wet-boew-tabbedinterface tabs-style-2">
	<ul class="tabs">
		<li><a href="#tabs1_1">Onglet 1</a></li>
		<li class="default"><a href="#tabs1_2">Onglet 2</a></li>
		<li><a href="#tabs1_3">Onglet 3</a></li>
	</ul>
	<div class="tabs-panel">
		<div id="tabs1_1">
			...
		</div>
		<div id="tabs1_2">
			...
		</div>
		<div id="tabs1_3">
			...
		</div>
	</div>
</div>

Noms de feuilles de style CSS

Ce module d'extension utilise les noms de feuilles de style CSS suivants :

  • wet-boew-tabbedinterface
  • tabs
  • tabs-panel
  • tabs-style-1
  • tabs-style-2
  • tabs-style-3
  • tabs-style-4
  • tabs-style-5
  • tabs-content-pad
  • clear
  • wb-invisible
  • default
  • cycle-fast
  • cycle-slow
  • cycle
  • auto-play
  • auto-height-none
  • animate-fast
  • animate-slow
  • animate
  • slide-horz
  • slide-vert

Exemples simples

Mise en forme par défaut

La démo comprend : aucun élément additionnel

Onglet 1

lien fictif

photoTitre X

Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Onglet 2

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

lien fictif

Onglet 3

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Mise en forme : tabs-style-1

La démo comprend : L’onglet default est celui du milieu.

Onglet 4

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Onglet 5

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Onglet 6

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Mise en forme : tabs-style-2

La démo comprend : les éléments cycle-slow, animate et slide-horz (v3.1 Bêta)

Onglet 7

Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Lien: Lien 1

description 1

Onglet 8

Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Lien: Lien 2

description 2

Onglet 9

Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Lien: Lien 3

description 3

Mise en forme : tabs-style-3

La démo comprend : les éléments cycle-fast et animate-fast

Onglet 10

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Onglet 11

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Onglet 12

lien fictif

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

Exemples complexes

Exemple n° 1

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.

Événements nationaux

Contenu

Contenu

Événements régionaux

Contenu

Contenu

Contenu

Contenu

Événements locaux

Contenu

Contenu

Contenu

Exemple n° 2

Certains onglets s'adaptent à la présence de cellules parents et enfants (c.-à-d. que vous pouvez insérer une cellule dans une autre).

Onglet 33

span-2 + span-6

Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

lien fictif

photo

Onglet 35

span-2

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

span-2

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

span-2

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.

span-2

photoTitre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.