ONGLET

Le composant ONGLET permet d’ajouter ou de supprimer une classe pour produire un système d’onglet où un seul élément peut être actif.

Syntaxe

Comme tout déclencheur JS de SipaUI il est préfixé par data-su. À ce déclencheur on doit ajouter au moins deux paramètres (cont et ong, cf. ci-dessous) afin de donner l’(les) attribut(s) à positionner / supprimer. Attention, la syntaxe impose l’imbrication de guillemets : 2 pour encadrer la valeur du data-suonglet et d’autres pour encadrer les paramètres et leur valeur. Ces derniers doivent par ailleurs respecter la syntaxe JSON {"parametre":"valeur"}. Par conséquent, il faut choisir et des '' pour encadrer le contenu de onglet. Ce qui donne : data-suonglet='{"paramètre":"valeur"}'.

Paramètres

cont : sélecteur qui permet d’identifier à la fois les liens et les onglets de l’ensemble du système d’onglet (pour les relier entre eux)
ong : identifiant de l’onglet à ouvrir
klass : classe "active" qui est mise sur l’onglet actif et le/les liens qui ouvre celui-ci (par défaut : su-tab-on)
closer : est-ce que le fait de cliquer sur un onglet déjà ouvert doit le fermer ? (Valeur par défaut : false)

Classe supplémentaire

Classe CSS à mettre au même endroit que sur l’élément possédant l’attribut data-suonglet

su-tab-on (ou la classe choisie) : permet de choisir l’onglet à afficher au chargement, s’il y a un onglet à afficher, le composant se charge d’ajouter et enlever la classe par la suite.

Exemples

Démo 0 : cas basique

Basiquement, data-suonglet se produira sur l’élément possédant l’attribut. Dans ce cas il nécessite uniquement les paramètres minimums : cont pour déclarer les éléments concernés et ong pour cibler l’onglet particulier à afficher.

Le javascript se contente de manipuler des classes, du CSS est indispensable pour afficher / cacher les blocs

N. B. – Si vous observez le DOM pendant l’exécution du script au clic, vous verrez 3 classes "par défaut" positionnées (su-tab-on, su-onglet-onet ofonglet-on). Les 2 dernières sont là pour des raisons de rétrocompatibilité avec de vieilles versions de ce script, vous n’avez pas besoin de vous en soucier.

<style>
    [class*="onglet-contenu"] {
        display: none;
        border-top: 1px solid #858585;
        margin-top: 5px !important;
        padding-top: 5px;
    }
    .onglet {
        font-weight: bold;
    }
    .onglet::before {
        content: "|";
        display: inline-block;
        margin-right: 5px;
        color: #000;
    }
    .su-tab-on {
        display: block;
    }
    a.su-tab-on {
        display: inline;
        color: #000 !important
    }
</style>
<div class="demo0">
    <a class="onglet-id-1 onglet su-tab-on" href="javascript:;" data-suonglet='{"cont":".onglet-id-1","ong":".onglet-contenu1"}'>Onglet 1</a>
    <a class="onglet-id-1 onglet" href="javascript:;" data-suonglet='{"cont":".onglet-id-1","ong":".onglet-contenu2"}'>Onglet 2</a>
    <a class="onglet-id-1 onglet" href="javascript:;" data-suonglet='{"cont":".onglet-id-1","ong":".onglet-contenu3","closer":"1"}'>Onglet 3 - qui se referme si on re-clique dessus</a>
    <p class="onglet-id-1 onglet-contenu1 su-tab-on">Contenu onglet 1</p>
    <p class="onglet-id-1 onglet-contenu2">Contenu onglet 2</p>
    <p class="onglet-id-1 onglet-contenu3">Contenu onglet 3</p>
</div>

Démo 1 : cas avec usage de l’attribut `klass`

Ici, on utilise l’attribut klass pour avoir un nom de classe choisi (ici, « maclasse » !).

<style>
    [class*="onglet-contenu"] {
        display: none;
        border-top: 1px solid #858585;
        margin-top: 5px !important;
        padding-top: 5px;
    }
    .onglet {
        font-weight: bold;
    }
    .onglet::before {
        content: "|";
        display: inline-block;
        margin-right: 5px;
        color: #000;
    }
    .maclasse {
        display: block;
    }
    a.maclasse {
        display: inline;
        color: #000 !important
    }
</style>
<div class="demo1">
    <a class="onglet-id-2 onglet maclasse" href="javascript:;" data-suonglet='{"cont":".onglet-id-2","ong":".onglet-contenu1","klass":"maclasse"}'>Onglet 1</a>
    <a class="onglet-id-2 onglet" href="javascript:;" data-suonglet='{"cont":".onglet-id-2","ong":".onglet-contenu2","klass":"maclasse"}'>Onglet 2</a>
    <a class="onglet-id-2 onglet" href="javascript:;" data-suonglet='{"cont":".onglet-id-2","ong":".onglet-contenu3","klass":"maclasse","closer":"1"}'>Onglet 3 - qui se referme si on re-clique dessus</a>
    <p class="onglet-id-2 onglet-contenu1 maclasse">Contenu onglet 1</p>
    <p class="onglet-id-2 onglet-contenu2">Contenu onglet 2</p>
    <p class="onglet-id-2 onglet-contenu3">Contenu onglet 3</p>
</div>