frendeitpt

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.

🆙 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 - 07/2017 @license: GNU/GPLv3 @credit: Script de bhaveshcmedhekar @tags: layout-dynamic
  • tab = tab: tab ou accordion
  • title-tag = h4: balise utilisée pour les titres onglets
  • style: classe(s) et style(s) bloc principal
  • class: classe(s) bloc principal (obsolète)
  • title-style: classe(s) et style inline onglets
  • title-class: classe(s) onglets (obsolète)
  • content-style: classe(s) et style inline contenu
  • content-class: classe(s) contenu (obsolète)
  • auto: delai en millisecondes pour changement automatique d'onglet
  • espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
  • css-head (base-css): règles CSS mises dans le head
  • plugin_type: accordion
  • side: left ou right
  • active_tab: 1 a N
  • content_display = block: interne, défini par espace-vertical

    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. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Tamen a proposito, inquam, aberramus. Sic enim censent, oportunitatis esse beate vivere. Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Non enim iam stirpis bonum quaeret, sed animalis. Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Duo Reges: constructio interrete.

    Habent enim et bene longam et satis litigiosam disputationem. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Quippe: habes enim a rhetoribus; Quae iam oratio non a philosopho aliquo, sed a censore opprimenda est. Ego vero isti, inquam, permitto. Si verbum sequimur, primum longius verbum praepositum quam bonum. Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum iudicia defendere.

    Homines optimi non intellegunt totam rationem everti, si ita res se habeat. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Aliis esse maiora, illud dubium, ad id, quod summum bonum dicitis, ecquaenam possit fieri accessio. Id est enim, de quo quaerimus. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? Qua igitur re ab deo vincitur, si aeternitate non vincitur? Prioris generis est docilitas, memoria; Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur. Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Non quam nostram quidem, inquit Pomponius iocans;

    Quod non faceret, si in voluptate summum bonum poneret. Cur deinde Metrodori liberos commendas? Satis est tibi in te, satis in legibus, satis in mediocribus amicitiis praesidii. Atque his de rebus et splendida est eorum et illustris oratio. Quae cum dixisset paulumque institisset, Quid est?

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Quis enim redargueret? Res enim fortasse verae, certe graves, non ita tractantur, ut debent, sed aliquanto minutius. Sed quid attinet de rebus tam apertis plura requirere? Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Duo Reges: constructio interrete.

    Duo enim genera quae erant, fecit tria. Suam denique cuique naturam esse ad vivendum ducem. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Morbo gravissimo affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Si enim ad populum me vocas, eum. Quod quidem nobis non saepe contingit. Nihil ad rem! Ne sit sane; Urgent tamen et nihil remittunt. Estne, quaeso, inquam, sitienti in bibendo voluptas? Ad eas enim res ab Epicuro praecepta dantur.

    Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Nam et a te perfici istam disputationem volo, nec tua mihi oratio longa videri potest. Res enim fortasse verae, certe graves, non ita tractantur, ut debent, sed aliquanto minutius. Illa videamus, quae a te de amicitia dicta sunt. Inde igitur, inquit, ordiendum est. Nihil opus est exemplis hoc facere longius. Cur, nisi quod turpis oratio est? Verba tu fingas et ea dicas, quae non sentias? Non est igitur voluptas bonum. Primum quid tu dicis breve?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum mihi Piso: Quid ergo? His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Duo Reges: constructio interrete. Tibi hoc incredibile, quod beatissimum. At eum nihili facit; Ita ne hoc quidem modo paria peccata sunt. Sequitur disserendi ratio cognitioque naturae; Aliter autem vobis placet.

    Re mihi non aeque satisfacit, et quidem locis pluribus. Mihi quidem Antiochum, quem audis, satis belle videris attendere. Quid autem habent admirationis, cum prope accesseris? Qui enim existimabit posse se miserum esse beatus non erit. At negat Epicurus-hoc enim vestrum lumen estquemquam, qui honeste non vivat, iucunde posse vivere. Utrum igitur tibi litteram videor an totas paginas commovere? Cui Tubuli nomen odio non est? Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Similiter sensus, cum accessit ad naturam, tuetur illam quidem, sed etiam se tuetur; Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Et nemo nimium beatus est;

    <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. Nescio quo modo praetervolavit oratio. Res enim concurrent contrariae. Praeterea sublata cognitione et scientia tollitur omnis ratio et vitae degendae et rerum gerendarum. Hic ego: Pomponius quidem, inquam, noster iocari videtur, et fortasse suo iure. Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Duo Reges: constructio interrete. Estne, quaeso, inquam, sitienti in bibendo voluptas? Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit?

    Beatus autem esse in maximarum rerum timore nemo potest. Bona autem corporis huic sunt, quod posterius posui, similiora. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Quia, si mala sunt, is, qui erit in iis, beatus non erit. Ergo id est convenienter naturae vivere, a natura discedere. Quid de Pythagora? Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur?

    Hoc dictum in una re latissime patet, ut in omnibus factis re, non teste moveamur. Itaque his sapiens semper vacabit. Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis. Nam Pyrrho, Aristo, Erillus iam diu abiecti. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Iam in altera philosophiae parte. Satisne vobis videor pro meo iure in vestris auribus commentatus? Itaque rursus eadem ratione, qua sum paulo ante usus, haerebitis.

    Nam memini etiam quae nolo, oblivisci non possum quae volo. Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Quis enim potest ea, quae probabilia videantur ei, non probare? De vacuitate doloris eadem sententia erit. Qui autem esse poteris, nisi te amor ipse ceperit? Recte dicis; Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Sed in rebus apertissimis nimium longi sumus.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Is es profecto tu. Mihi, inquam, qui te id ipsum rogavi? Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Traditur, inquit, ab Epicuro ratio neglegendi doloris. Nihil opus est exemplis hoc facere longius. Duo Reges: constructio interrete. Multoque hoc melius nos veriusque quam Stoici. Tibi hoc incredibile, quod beatissimum.

    Nam si quae sunt aliae, falsum est omnis animi voluptates esse e corporis societate. Haec quo modo conveniant, non sane intellego. Naturales divitias dixit parabiles esse, quod parvo esset natura contenta. Non enim iam stirpis bonum quaeret, sed animalis. Apparet statim, quae sint officia, quae actiones.

    Tertium autem omnibus aut maximis rebus iis, quae secundum naturam sint, fruentem vivere. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Rationis enim perfectio est virtus; Sed fortuna fortis; Nec vero alia sunt quaerenda contra Carneadeam illam sententiam.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnes enim iucundum motum, quo sensus hilaretur. Nec vero pietas adversus deos nec quanta iis gratia debeatur sine explicatione naturae intellegi potest. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest; Duo Reges: constructio interrete. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Nobis aliter videtur, recte secusne, postea; Aliter homines, aliter philosophos loqui putas oportere? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur. Quis non odit sordidos, vanos, leves, futtiles? Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta.

    Atqui reperies, inquit, in hoc quidem pertinacem; Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Aliter homines, aliter philosophos loqui putas oportere? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Quod quidem nobis non saepe contingit. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Hunc vos beatum; Atque adhuc ea dixi, causa cur Zenoni non fuisset, quam ob rem a superiorum auctoritate discederet. Ergo in gubernando nihil, in officio plurimum interest, quo in genere peccetur.

    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. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Iubet igitur nos Pythius Apollo noscere nosmet ipsos. Duo Reges: constructio interrete. Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Summus dolor plures dies manere non potest? Si enim ad populum me vocas, eum. Ut optime, secundum naturam affectum esse possit. Restatis igitur vos;

    Ita enim vivunt quidam, ut eorum vita refellatur oratio. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Nihil illinc huc pervenit. Non dolere, inquam, istud quam vim habeat postea videro; Bonum incolumis acies: misera caecitas. Quis est autem dignus nomine hominis, qui unum diem totum velit esse in genere isto voluptatis? Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Ne in odium veniam, si amicum destitero tueri. Hoc est non dividere, sed frangere. Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Quis istud possit, inquit, negare? Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Sed ego in hoc resisto; Duo Reges: constructio interrete. Dici enim nihil potest verius. Quid autem habent admirationis, cum prope accesseris? Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam.

    Neutrum vero, inquit ille. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Quae est igitur causa istarum angustiarum? Intrandum est igitur in rerum naturam et penitus quid ea postulet pervidendum; Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Solum praeterea formosum, solum liberum, solum civem, stultost; Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Num quid tale Democritus? Numquam facies. Istic sum, inquit. Quamvis enim depravatae non sint, pravae tamen esse possunt. Nam ista vestra: Si gravis, brevis;

    Apparet statim, quae sint officia, quae actiones. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Duo Reges: constructio interrete. Praeteritis, inquit, gaudeo.

    {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 | ?}

    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