Interface à onglets
Table des matières
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>
etJouer<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
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 2
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 3
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre 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
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 5
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 6
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre 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)
Mise en forme : tabs-style-3
La démo comprend : les éléments cycle-fast
et animate-fast
Onglet 10
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 11
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 12
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Titre 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.
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.
Onglet 34
Onglet 35
span-2
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
span-2
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
span-2
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
span-2
Titre X
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
- Date de modification :