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-style-6
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
Onglet 2
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 2
Onglet 3
Onglet 1
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
Onglet 11
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
Onglet 12
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.
Onglet 12
Onglet 10
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-4
Mise en forme : tabs-style-5
Mise en forme : tabs-style-6
(v3.1.0)
La démo comprend : les éléments embedded-grid
, animate
, cycle
et slide-horz
.
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 :