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.

🆙 tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite.

Cliquer pour lire la documentation

Mode responsive avec gestion de l'espacement vertical
{up tab}
< h4>texte onglet< /h4>
< p>texte du panneau< /p>
< img src="/..">
{/up tab}
Sur mobile ou sur demande, l'affichage est en mode accordion
script JS adapté par Lomart pour gestion répartition verticale
@author: Lomart @version: UP-1.0 @license: GNU/GPLv3 @credit: Script de bhaveshcmedhekar @tags: layout-dynamic
  • tab = tab: tab ou accordion
  • auto: 0 ou delai en millisecondes pour changement automatique d'onglet

Style des titres (onglets)

  • title-tag = h4: balise utilisée pour les titres onglets
  • title-style: classe(s) et style inline onglets
  • title-class: classe(s) onglets (obsolète)

Style des panneaux de contenu

  • content-style: classe(s) et style inline contenu
  • content-class: classe(s) contenu (obsolète)
  • espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir

Style du bloc principal

  • id: identifiant
  • style: classe(s) et style(s) bloc principal
  • class: classe(s) bloc principal (obsolète)
  • css-head (base-css): règles CSS mises dans le head

paramètres Javascript pour configuration

  • side: left ou right
  • active_tab: 1 a N
  • plugin_type: accordion (interne, ne pas modifier)
  • content_display = block: interne, ne pas modifier, défini par espace-vertical
Version 1.62
ajout option auto par pleconte et correction regex
Version 1.7
ajout option css-head, espace-vertical et content_display.
Version 2.9
ajout option preserve-tag
Version 3.1
possibilité de changer d'onglet à partir d'un lien dans l'URL ou dans la page. Plus d'infos

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

  • question n°1
  • question n°2
  • question n°3
  • question n°4

texte pour la question n°1

texte pour la question n°2 mais un peu plus long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Cum audissem Antiochum, Brute, ut solebam, cum M. Sin laboramus, quis est, qui alienae modum statuat industriae? Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Sed tamen intellego quid velit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Huius, Lyco, oratione locuples, rebus ipsis ielunior. Duo Reges: constructio interrete. Quod non faceret, si in voluptate summum bonum poneret. Aliter enim nosmet ipsos nosse non possumus.

Ergo id est convenienter naturae vivere, a natura discedere. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Ea possunt paria non esse. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Huius ego nunc auctoritatem sequens idem faciam. Quae similitudo in genere etiam humano apparet. Quo studio Aristophanem putamus aetatem in litteris duxisse? Et quidem saepe quaerimus verbum Latinum par Graeco et quod idem valeat; Verba tu fingas et ea dicas, quae non sentias? Et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem.

Sit enim idem caecus, debilis. Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Videamus igitur sententias eorum, tum ad verba redeamus. Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Post enim Chrysippum eum non sane est disputatum.

3 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum ením bonum exposuit vacuitatem doloris; Satis est ad hoc responsum. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Videsne ut, quibus summa est in voluptate, perspicuum sit quid iis faciendum sit aut non faciendum? Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Sic enim censent, oportunitatis esse beate vivere.

Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Ratio quidem vestra sic cogit. Quae quidem vel cum periculo est quaerenda vobis; Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Certe, nisi voluptatem tanti aestimaretis. Quippe: habes enim a rhetoribus;

Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Graece donan, Latine voluptatem vocant. Duo Reges: constructio interrete. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. Verum esto: verbum ipsum voluptatis non habet dignitatem, nec nos fortasse intellegimus. Quamquam tu hanc copiosiorem etiam soles dicere. Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. Consequentia exquirere, quoad sit id, quod volumus, effectum.

4 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. At enim hic etiam dolore. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Duo Reges: constructio interrete. Quorum altera prosunt, nocent altera.

Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. At iam decimum annum in spelunca iacet. Neque solum ea communia, verum etiam paria esse dixerunt. Illa tamen simplicia, vestra versuta. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Illa argumenta propria videamus, cur omnia sint paria peccata.

<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>

Le contenu est organisé dans une structure simple: un titre h4 est le libellé de l'onglet, tout le code suivant jusqu'au prochain titre est son contenu.

title-class & title-style
personnalisation pour les onglets
content-class & content-style
personnalisation pour les panneaux de contenu
title-tag
non utilisé dans l'exemple, cette option permet d'utiliser une autre balise que h4 pour identifier le titre des onglets

Note: pour avoir directement un accordion, vous pouvez le demander par { up tab=accordion ...


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
  • Onglet n°1
  • 1 ligne
  • 2 lignes
  • 3 lignes
  • 4 lignes
  • non espacé

Titre du premier onglet

🆙
un petit UP bien centré entre le titre et le pied

Une ligne tout en bas pour démontrer l'action de option espace-vertical

une unique ligne alignée en haut

une première ligne en haut

une deuxième ligne en bas

une première ligne en haut

une deuxième ligne au centre

une troisième ligne en bas

une première ligne

une deuxième ligne

une troisième ligne

une quatrième ligne en bas

une première ligne en haut

une deuxième juste au dessous. Voir les explications ligne 35
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
Ligne commentaire
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.
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
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).
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.
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}
  • accordion n°1
  • accordion n°2
  • accordion n°3
  • accordion n°4

texte pour la question n°1

texte pour la question n°2 mais un peu plus long

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Indicant pueri, in quibus ut in speculis natura cernitur. Sed quid sentiat, non videtis. Duo Reges: constructio interrete. Negare non possum. Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Vitiosum est enim in dividendo partem in genere numerare. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres.

Immo videri fortasse. Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Duarum enim vitarum nobis erunt instituta capienda. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus.

Si quicquam extra virtutem habeatur in bonis. Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; At hoc in eo M. Sed haec quidem liberius ab eo dicuntur et saepius. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Quid de Platone aut de Democrito loquar? An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Sed fortuna fortis; Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Profectus in exilium Tubulus statim nec respondere ausus; Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Quorum sine causa fieri nihil putandum est.

4 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Frater et T. Nihil enim iam habes, quod ad corpus referas; Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Si enim ita est, vide ne facinus facias, cum mori suadeas.

Ita graviter et severe voluptatem secrevit a bono. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Nihil enim iam habes, quod ad corpus referas; Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Ratio enim nostra consentit, pugnat oratio. Materiam vero rerum et copiam apud hos exilem, apud illos uberrimam reperiemus. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur.

Utrum igitur tibi litteram videor an totas paginas commovere? Mihi enim erit isdem istis fortasse iam utendum. Nulla profecto est, quin suam vim retineat a primo ad extremum. Dat enim intervalla et relaxat. Duo Reges: constructio interrete. Memini vero, inquam; Omnes enim iucundum motum, quo sensus hilaretur. Quamquam id quidem, infinitum est in hac urbe; Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q.

4 :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam si propter voluptatem, quae est ista laus, quae possit e macello peti? Duo Reges: constructio interrete. Quid igitur, inquit, eos responsuros putas? Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Serpere anguiculos, nare anaticulas, evolare merulas, cornibus uti videmus boves, nepas aculeis. Quod ea non occurrentia fingunt, vincunt Aristonem; Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Quid autem habent admirationis, cum prope accesseris?

At iam decimum annum in spelunca iacet. Atqui reperies, inquit, in hoc quidem pertinacem; Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Iam id ipsum absurdum, maximum malum neglegi. Ubi ut eam caperet aut quando? Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Ego vero volo in virtute vim esse quam maximam;

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

  • question n°1
  • question n°2
  • question n°3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et quidem Arcesilas tuus, etsi fuit in disserendo pertinacior, tamen noster fuit; Huius, Lyco, oratione locuples, rebus ipsis ielunior. Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt.

An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Etenim semper illud extra est, quod arte comprehenditur. Comprehensum, quod cognitum non habet? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad rem redeamus; Hoc est non modo cor non habere, sed ne palatum quidem. Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. An nisi populari fama? Duo Reges: constructio interrete. Conferam tecum, quam cuique verso rem subicias; Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Negat esse eam, inquit, propter se expetendam. Quid enim de amicitia statueris utilitatis causa expetenda vides. Et certamen honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio.

Quod quidem nobis non saepe contingit. Quis non odit sordidos, vanos, leves, futtiles? Minime id quidem, inquam, alienum, multumque ad ea, quae quaerimus, explicatio tua ista profecerit. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt. Quid ergo attinet gloriose loqui, nisi constanter loquare? At hoc in eo M.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid, de quo nulla dissensio est? Atqui reperies, inquit, in hoc quidem pertinacem; Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum.

Huius, Lyco, oratione locuples, rebus ipsis ielunior. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Duo Reges: constructio interrete. Non enim quaero quid verum, sed quid cuique dicendum sit. Quorum sine causa fieri nihil putandum est. Haec quo modo conveniant, non sane intellego. Hanc quoque iucunditatem, si vis, transfer in animum; Uterque enim summo bono fruitur, id est voluptate. Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Ut scias me intellegere, primum idem esse dico voluptatem, quod ille don.

{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.

Pour mémoire :

  • #id sera remplacé par l'ID de l'action afin que la règle soit limitée à celle-ci
  • UP n'accepte pas les accolades {} dans les shortcodes, il faut les remplacer par des crochets []
  • pour utiliser des crochets [], il faut les échapper avec un antislash devant \[\]

version 2.5 : Si vous attribuer des attributs class et style, ils seront pris en compte

Le shortcode en mode code pour voir les attributs ajoutés
<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>
  • Onglet 1
  • Onglet 2

Texte 1

Texte 2

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 !

Sur ce site, j'utilise cette possibilité pour ouvrir les articles références comme celui sur la personnalisation de UP.
Le bouton ci-contre ouvre la boite à onglets avec CSS ouvert.

{up modal=index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css
 | label=&#x1F199; 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="&#x1F199; personnaliser le CSS de UP"
class="btn btn-primary "
modal="index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css"
Pour vous souvenir des prefsets, c'est très simple ! Vous affichez la page avec le shortcode {up modal | ?}

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.

La démo

  • Onglet 1
  • Onglet 2
  • Onglet 3

Texte de l'onglet 1

Texte de l'onglet 2

Revenir sur le premier onglet

Texte de l'onglet 3

Retour sur onglet 1

Ouvrir cette page en allant sur le deuxième onglet

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 : 🆙 Comment personnaliser une action

Pour info, cette page utilise 46 action(s) :
upactionslist (1) readmore (2) csv2def (1) tabslide (1) toc (1) tab (6) lorem (9) icon (13) csv2table (1) flexauto (1) div (2) flexbox (1) modal (2) html (2) note (1) addcsshead (1) jcontent-info (1)