tab ~ des onglets responsives

Des onglets et accordions responsives

Sur un script de bhaveshcmedhekar (licence MIT) adapté par Lomart

Version 2.5 Prise en charge des attributs class et style des titres d'onglets. Possibilité d'ouvrir un onglet en ajoutant son ID dans l'URL de la page.

Ce script affiche du contenu dans des panneaux avec des onglets en haut, à gauche ou à droite. Sur petit écran, l'affichage se transforme en accordion.

Avec des onglets

les onglets au-dessus

<p>{up tab | active_tab=2 }</p>
<h4><img src="/images/icons/flag/fr.png" alt=""/> question n°1</h4>
<p>texte pour la question n°1</p>
<h4><img src="/images/icons/flag/be.png" alt=""/>  question n°2</h4>
<p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
<h4><img src="/images/icons/flag/us.png" alt=""/> question n°3</h4>
<p>3 : {up lorem=3,decorate}</p>
<h4><img src="/images/icons/flag/gb.png" alt=""/> question n°4</h4>
<p>4 : {up lorem=2}</p>
<p>{/up tab}</p>

les onglets sur le côté

Cette partie de la démo a été réecrite en novembre 2019 pour utiliser les fonctionnalités de la version 1.7 de UP

Pour cet exemple, nous allons mettre en oeuvre plusieurs options pour améliorer le rendu.

• side pour mettre les onglets sur le côté
• onglets : réduction de la largeur par title-style
• contenu : content-class pour la couleur de fond et content-title pour avoir une hauteur minimale et augmenter la largeur pour compenser la réduction des onglets
• espace-vertical pour une répartition verticale du contenu v1.7
• css-head pour styler l'ensemble.
• rotation automatique des onglets (un ajout de Pascal Leconte) v1.7

Le shortcode et les explications juste après

{up tab | side=left
| title-style=width:15% 
| content-class=bg-jauneClair  
| content-style=min-width:85%;min-height:350px
| espace-vertical=1
| auto=8000
| css-head=
  #id > ul li[border-left:1px solid #bbb]
  #id > ul li::after[width:0]
  #id > ul li.active[background:yellow]
  #id > ul li.active::after[background:red;width:10px]
  #id div.accordian_header[background:#fff] /*pour mobile*/
  #id .tab_content p [margin:0] /*pour demo */
}

<h4>Onglet n°1</h4>
	<h2 class="tc notoc">Titre du premier onglet</h2>
	<p class="tc">{up icon=Ux1F199,48}<br>un petit UP bien centré entre le titre et le pied</p>
	<p style="border-top: dashed 1px #069; margin-bottom:0">Une ligne tout en bas pour démontrer l'action de l'option espace-vertical</p>
<h4>1 ligne</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une unique ligne alignée en haut</p>
<h4>2 lignes</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
	<div>{up icon=Ux278B,#069,48px} une deuxième ligne en bas</div>
<h4>3 lignes</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
	<div>{up icon=Ux278B,#069,48px} une deuxième ligne au centre</div>
	<p>{up icon=Ux278C,#069,48px} une troisième ligne en bas</p>
<h4>4 lignes</h4>
	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne</p>
	<div>{up icon=Ux278B,#069,48px} une deuxième ligne</div>
	<p>{up icon=Ux278C,#069,48px} une troisième ligne</p>
	<p>{up icon=Ux278D,#069,48px} une quatrième ligne en bas</p>
<h4>non espacé</h4>
	<div>
		<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
		<div>{up icon=Ux278B,#069,48px} une deuxième juste au dessous. Voir les explications ligne 35</div>
	</div>
{/up tab}

Les explications

1

side=left pour mettre les onglets à gauche. right pour la droite. Sur mobile ou petit écran, les onglets se transformenr en accordions

2

title-style réduit la largeur des onglets

3

content-class ajoute un fond jaune clair aux contenus

4

content-style pour compenser la réduction de largeur des onglets et donner une hauteur minimale afin d'éviter les scintillements d'affichage dûs aux changement de hauteur

5

"espace-vertical est une nouvelle option (v1.7) qui permet de répartir le contenu verticalement dans la hauteur de l'onglet. Il suffit d'indiquer la profondeur des blocs à répartir. Pratiquement, si 1 n'a aucun effet, essayez 2.[br]Cette option a été créée pour afficher l'introduction des articles avec l'action jcontent_by_categories. C'est donc une option partagée par tous les onglet[br]Une fonctionnalité similaire est offerte par les nouvelles règles de up.css : bg-vspace-between, bg-vspace-between-1 et bg-vspace-between-2"

6

auto est la durée (en millisecondes) avant le changement automatique d'onglet. Un clic sur un onglet stoppe le défilement.

7

css-head va nous permettre d'ajouter des règles CSS spécifiques à cette boîte à onglets (#id sera remplacé par l'ID réelle). [br]Si les styles sont partagés par plusieurs onglets, il est préférable d'ajouter les classes avec l'action addcsshead et d'ajouter l'option class=nom_de_la_classe_dans_addcsshead

8-11

ces règles définissent le style des onglets

12

permet de forcer la couleur de fond en vue accordion

13

une règle spécifique à la démo pour supprimer les marges des balises P afin de mieux percevoir la répartition verticale

Pour le contenu, je vais uniquement relever les points délicats

17

la classe "notoc" est spécifique à la démo. Elle indique à l'action toc de ne pas ajouter ce titre au sommaire

18

une nouveauté de la version 1.7 : il est possible de mettre des shortcodes dans les shortcodes.[br]Une autre nouveauté est la refonte de l'action icon qui gère maintenant les fontes d'icônes, les caractères Unicode et les images à partir d'un unique shortcode. Ici, j'insère le caractère Unicode UP! en taille 48 px.

31

notez que l'on peut mélanger les types de balises, c'est uniquement sa profondeur qui est prise en compte pour la répartition verticale. Vous devez comprendre maintenant pourquoi j'ai mis espace-vertical=1. Les blocs sont des enfants direct du bloc contenu.

35

pour ne pas répartir verticalement les blocs, il suffit de les changer de profondeur. Ici dans un bloc DIV

Accordion

Bien que la fonction première de cette action est d'afficher du contenu dans des onglets, il est possible de l'afficher dans un accordion.
Il suffit d'indiquer accordion comme argument de tab

{up tab=accordion}

CSS évolué

Si les options proposées ne suffisent pas pour répondre à votre demande, vous pouvez utiliser l'option css-head pour spécifier votre CSS.

Pour la démonstration, je vais reprendre le premier exemple de cette démo

{up tab | active_tab=2
| css-head=
#id .tab_1, #id \[rel="tab_1"\], #id \[rel="tab_1"\].active:after[background:coral]
#id .tab_3[background:plum] #id \[rel="tab_3"\], #id \[rel="tab_3"\].active:after[background:indigo;color:white]
}
<h4><img src="/images/icons/flag/fr.png" alt="" /> question n°1</h4>
{up lorem=2,decorate}
<h4><img src="/images/icons/flag/be.png" alt="" /> question n°2</h4>
{up lorem=2,decorate}
<h4><img src="/images/icons/flag/us.png" alt="" /> question n°3</h4>
{up lorem=2,decorate}
{/up tab}

La modification des couleurs pour le premier et troisième onglet est uniquement fait par l'option css-head.

La première ligne définit 1 attribut (background:coral) que l'on applique à 3 sélecteur CSS :

#id .tab_1, #id \[rel="tab_1"\], #id \[rel="tab_1"\].active:after[background:coral]

1. #id .tab_1 : le contenu de l'onglet
2. #id \[rel="tab_1"\] : l'onglet
3. #id \[rel="tab_1"\].active:after : élément qui cache la bordure basse de l'onglet actif

La deuxième ligne définit 2 attributs : fond violet pour le contenu de l'onglet et fond violet, texte blanc pour l'onglet:

#id .tab_3[background:plum] 
#id \[rel="tab_3"\], #id \[rel="tab_3"\].active:after[background:indigo;color:white]

C'est similaire au premier onglet, sauf que le contenu est défini à part.

<p>{up tab | content-class=bg-white}</p>
<h4 class="bg-purple  bg-hover-blue" style="color: yellow;">Onglet 1</h4>
<p>Texte 1</p>
<h4 class="bg-green  bg-hover-blue" style="color: yellow; border-bottom: red dotted 2px;">Onglet 2</h4>
<p>Texte 2</p>
<p>{/up tab}</p>

Ouvrir la page sur un onglet

Depuis la version 2.5, il est possible d'ouvrir la page sur un onglet identifié par son ID

Par défaut, les onglets ont un identifiant tab_1, tab_2, etc. Mais, je vous conseille de les attribuer vous-même en mode code, il seront plus facile à mémoriser et surtout plus parlant !

{up modal=index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css
 | label=🆙 personnaliser le CSS de UP | class=btn btn-primary}

Il y a beaucoup d'avantage à utiliser l'action modal :

• l'article est chargé uniquement si le visiteur clique sur le bouton
• l'internaute ne quitte pas la page
• l'affichage occupe une grande partie de l'écran
• l'ajout de &tmpl=component à la fin de URL affiche uniquement le contenu sans aucun module

Pour en revenir à notre shortcode, l'option principale contient l'URL de l'article à laquelle on ajoute &tmpl=component et l'ancre pour ouvrir l'onglet. Je définis également le libellé du bouton et son style.

En réalité, j'ai crée une prefset pour chacune des pages appelées.

Donc mon shortcode est {up modal=memo-custom-css}. C'est plus court et surtout plus lisible !

Mon fichier prefs.ini contient une section

[memo-custom-css]
label="🆙 personnaliser le CSS de UP"
class="btn btn-primary "
modal="index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css"

Changer d'onglet

Depuis la version 3.1, il est possible de changer d'onglet en ajoutant une ancre dans le lien. Une petite démo pour comprendre le principe.

et le code correspondant

<p>{up tab}</p>
<h4 id="demo-ancre-1";>Onglet 1</h4>
<p>Texte de l'onglet 1</p>
<h4 id="demo-ancre-2">Onglet 2</h4>
<p>Texte de l'onglet 2</p>
<p><a href="/#demo-ancre-1">Revenir sur le premier onglet</a></p>
<p>{/up tab}</p>
<p><a href="/demo?amp;view=article&amp;id=39&amp;catid=8<mark>#demo-ancre-2">Ouvrir cette page en allant sur le deuxième onglet</a></p>
<p>{/up tab}</p>

J'ai ajouté un ID aux balises h4 des onglets pour qu'ils soient uniques.

Ensuite, il suffit de l'ajouter seul pour un déplacement dans la page ou à la fin du lien d'une autre page.

Je vous laisse analyser le code pour comprendre.

Si vous êtes faché avec le mode code, voici une solution 100% UP que j'utilise dans la démo ci-dessus pour définir le 3e onglet

{up html=h4 | id=demo-ancre-3}Onglet 3{/up html
Texte de l'onglet 3
{up html=a | href=#demo-ancre-1}Retour sur onglet 1{/up html}

Personnalisation

Si vous utilisez souvent cette action, il peut être judicieux de l'adapter à votre besoin et au design de votre site.

• Pour modifier les valeurs par défaut des options, il suffit de créer un fichier custom/prefs.ini dans le dossier de l'action tab. A partir de la version 1.4 de UP
  Exemple : vous voulez systématiquement appliquer une classe CSS définie dans votre fichier custom.css, ajouter dans [options] class=ma_classe
  Ce n'est pas plus compliqué. Cette adaptation ne sera jamais effacée par une mise à jour de UP.
• Si le style ou le comportement ne conviennent pas totalement, il est possible de les personnaliser en dupliquant les fichier CSS, SCSS et JS dans un sous-dossier custom. S'il existe, son contenu sera utilisé en place des fichiers de l'action. A partir de la version 1.31 de UP

Pour en savoir plus :