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. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Istic sum, inquit. Nec mihi illud dixeris: Haec enim ipsa mihi sunt voluptati, et erant illa Torquatis. A primo, ut opinor, animantium ortu petitur origo summi boni. Sed in rebus apertissimis nimium longi sumus. Cum audissem Antiochum, Brute, ut solebam, cum M.

    Si qua in iis corrigere voluit, deteriora fecit. Sed nimis multa. Hoc enim constituto in philosophia constituta sunt omnia. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Dic in quovis conventu te omnia facere, ne doleas. Sed quid attinet de rebus tam apertis plura requirere?

    Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Sed ne, dum huic obsequor, vobis molestus sim. Nondum autem explanatum satis, erat, quid maxime natura vellet. In qua quid est boni praeter summam voluptatem, et eam sempiternam? Non risu potius quam oratione eiciendum? Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Sed ad haec, nisi molestum est, habeo quae velim. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?

    Duo Reges: constructio interrete. Quis enim potest istis, quae te, ut ais, delectant, brevibus et acutis auditis de sententia decedere? Quo modo autem philosophus loquitur? Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Eam tum adesse, cum dolor omnis absit;

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atqui reperies, inquit, in hoc quidem pertinacem; Ex quo, id quod omnes expetunt, beate vivendi ratio inveniri et comparari potest. Invidiosum nomen est, infame, suspectum. Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Duo Reges: constructio interrete. Egone quaeris, inquit, quid sentiam? Atque ab his initiis profecti omnium virtutum et originem et progressionem persecuti sunt.

    Quae diligentissime contra Aristonem dicuntur a Chryippo. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Ita relinquet duas, de quibus etiam atque etiam consideret. Non igitur bene. Et non ex maxima parte de tota iudicabis?

    Dicimus aliquem hilare vivere; Sint ista Graecorum; De illis, cum volemus. Non est igitur summum malum dolor. Qui est in parvis malis. Respondent extrema primis, media utrisque, omnia omnibus. Nos vero, inquit ille;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Certe nihil nisi quod possit ipsum propter se iure laudari. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Si quicquam extra virtutem habeatur in bonis.

    Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Nihilo beatiorem esse Metellum quam Regulum. Duo Reges: constructio interrete. Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Duarum enim vitarum nobis erunt instituta capienda.

    <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. Hos contra singulos dici est melius. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Ad eas enim res ab Epicuro praecepta dantur. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Duo Reges: constructio interrete. Restincta enim sitis stabilitatem voluptatis habet, inquit, illa autem voluptas ipsius restinctionis in motu est. Vadem te ad mortem tyranno dabis pro amico, ut Pythagoreus ille Siculo fecit tyranno? Praeteritis, inquit, gaudeo. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Huius, Lyco, oratione locuples, rebus ipsis ielunior.

    Haec mihi videtur delicatior, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat. Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Num igitur dubium est, quin, si in re ipsa nihil peccatur a superioribus, verbis illi commodius utantur? A primo, ut opinor, animantium ortu petitur origo summi boni. Quid sequatur, quid repugnet, vident. Non enim iam stirpis bonum quaeret, sed animalis. Si enim ad populum me vocas, eum.

    Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Isto modo, ne si avia quidem eius nata non esset. Erit enim mecum, si tecum erit. Tuo vero id quidem, inquam, arbitratu. Nam his libris eum malo quam reliquo ornatu villae delectari. Certe non potest. Est autem officium, quod ita factum est, ut eius facti probabilis ratio reddi possit. Mihi enim satis est, ipsis non satis.

    Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Cave putes quicquam esse verius. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Cum autem negant ea quicquam ad beatam vitam pertinere, rursus naturam relinquunt. Quamquam id quidem, infinitum est in hac urbe;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ille, ut dixi, vitiose. Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Sin laboramus, quis est, qui alienae modum statuat industriae? Hanc quoque iucunditatem, si vis, transfer in animum; Certe, nisi voluptatem tanti aestimaretis. Id est enim, de quo quaerimus.

    Duo Reges: constructio interrete. Obsecro, inquit, Torquate, haec dicit Epicurus? Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Sit enim idem caecus, debilis. Graece donan, Latine voluptatem vocant. Sic consequentibus vestris sublatis prima tolluntur. Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. At hoc in eo M. Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Age nunc isti doceant, vel tu potius quis enim ista melius?

    Quid nunc honeste dicit? Res enim se praeclare habebat, et quidem in utraque parte. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Quamquam te quidem video minime esse deterritum. Comprehensum, quod cognitum non habet? Cetera illa adhibebat, quibus demptis negat se Epicurus intellegere quid sit bonum. At enim hic etiam dolore. Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Sed ad haec, nisi molestum est, habeo quae velim. Illud non continuo, ut aeque incontentae. Sed quid attinet de rebus tam apertis plura requirere? Mihi quidem Antiochum, quem audis, satis belle videris attendere.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid ergo attinet gloriose loqui, nisi constanter loquare? Duo enim genera quae erant, fecit tria. Re mihi non aeque satisfacit, et quidem locis pluribus. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Eam tum adesse, cum dolor omnis absit; Serpere anguiculos, nare anaticulas, evolare merulas, cornibus uti videmus boves, nepas aculeis. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Duo Reges: constructio interrete. Ubi ut eam caperet aut quando?

    Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Morbo gravissimo affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Quare hoc videndum est, possitne nobis hoc ratio philosophorum dare. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. At multis malis affectus.

    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. Praeclare enim Plato: Beatum, cui etiam in senectute contigerit, ut sapientiam verasque opiniones assequi possit. Habent enim et bene longam et satis litigiosam disputationem. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Sed ego in hoc resisto; Duo Reges: constructio interrete. Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Huius, Lyco, oratione locuples, rebus ipsis ielunior.

    Ita nemo beato beatior. Ut optime, secundum naturam affectum esse possit. Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Quod si ita se habeat, non possit beatam praestare vitam sapientia.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iam in altera philosophiae parte. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Ego vero isti, inquam, permitto. Quare obscurentur etiam haec, quae secundum naturam esse dicimus, in vita beata; Duo Reges: constructio interrete. Hoc uno captus Erillus scientiam summum bonum esse defendit nec rem ullam aliam per se expetendam.

    Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Aliter enim nosmet ipsos nosse non possumus. Non est enim vitium in oratione solum, sed etiam in moribus. Ut proverbia non nulla veriora sint quam vestra dogmata. Itaque contra est, ac dicitis; Maximas vero virtutes iacere omnis necesse est voluptate dominante. Sic enim censent, oportunitatis esse beate vivere. Mihi, inquam, qui te id ipsum rogavi? Ut in geometria, prima si dederis, danda sunt omnia.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque fecimus. Hoc tu nunc in illo probas. Quo studio Aristophanem putamus aetatem in litteris duxisse? Duo Reges: constructio interrete. Mihi enim erit isdem istis fortasse iam utendum. Est enim effectrix multarum et magnarum voluptatum. Quare hoc videndum est, possitne nobis hoc ratio philosophorum dare.

    Sed haec quidem liberius ab eo dicuntur et saepius. Quamquam id quidem licebit iis existimare, qui legerint. Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Quid est igitur, inquit, quod requiras? Non pugnem cum homine, cur tantum habeat in natura boni;

    {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