tab ~ des onglets responsives

Des onglets et accordions responsives

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

➠ 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. Cur id non ita fit? Quaerimus enim finem bonorum. Incommoda autem et commoda-ita enim estmata et dustmata appello-communia esse voluerunt, paria noluerunt. Duo Reges: constructio interrete. Collatio igitur ista te nihil iuvat. Quare si potest esse beatus is, qui est in asperis reiciendisque rebus, potest is quoque esse.

    Itaque ad tempus ad Pisonem omnes. Nec vero pietas adversus deos nec quanta iis gratia debeatur sine explicatione naturae intellegi potest. Quae contraria sunt his, malane? At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Tum ille timide vel potius verecunde: Facio, inquit. Cum audissem Antiochum, Brute, ut solebam, cum M.

    Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Si enim, ut mihi quidem videtur, non explet bona naturae voluptas, iure praetermissa est; Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Quam illa ardentis amores excitaret sui! Cur tandem? Quid est igitur, inquit, quod requiras? Cur deinde Metrodori liberos commendas? Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia?

    Sed ne, dum huic obsequor, vobis molestus sim. Ut non sine causa ex iis memoriae ducta sit disciplina. At miser, si in flagitiosa et vitiosa vita afflueret voluptatibus. Incommoda autem et commoda-ita enim estmata et dustmata appello-communia esse voluerunt, paria noluerunt. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; An dubium est, quin virtus ita maximam partem optineat in rebus humanis, ut reliquas obruat? Egone non intellego, quid sit don Graece, Latine voluptas? Omnia peccata paria dicitis.

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita graviter et severe voluptatem secrevit a bono. Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Addidisti ad extremum etiam indoctum fuisse. Beatus autem esse in maximarum rerum timore nemo potest. Optime, inquam.

    Duo Reges: constructio interrete. Quid iudicant sensus? Quae in controversiam veniunt, de iis, si placet, disseramus. Mihi, inquam, qui te id ipsum rogavi? Nunc omni virtuti vitium contrario nomine opponitur. Egone non intellego, quid sit don Graece, Latine voluptas? Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Sed ad haec, nisi molestum est, habeo quae velim. Sed tempus est, si videtur, et recta quidem ad me.

    Tollenda est atque extrahenda radicitus. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Restatis igitur vos; Negat enim summo bono afferre incrementum diem. Nihilne est in his rebus, quod dignum libero aut indignum esse ducamus? Ampulla enim sit necne sit, quis non iure optimo irrideatur, si laboret? Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Idem adhuc;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non autem hoc: igitur ne illud quidem. Ita enim vivunt quidam, ut eorum vita refellatur oratio. De hominibus dici non necesse est. Item de contrariis, a quibus ad genera formasque generum venerunt. Duo Reges: constructio interrete.

    Nam Pyrrho, Aristo, Erillus iam diu abiecti. Transfer idem ad modestiam vel temperantiam, quae est moderatio cupiditatum rationi oboediens. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Ex quo, id quod omnes expetunt, beate vivendi ratio inveniri et comparari potest. Quae duo sunt, unum facit. Isto modo, ne si avia quidem eius nata non esset.

    <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 article-news. 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. Praeteritis, inquit, gaudeo. Si longus, levis. Quae si potest singula consolando levare, universa quo modo sustinebit? Quod si ita se habeat, non possit beatam praestare vitam sapientia. Compensabatur, inquit, cum summis doloribus laetitia. Memini vero, inquam; Duo Reges: constructio interrete. At modo dixeras nihil in istis rebus esse, quod interesset. Haec igitur Epicuri non probo, inquam.

    Semovenda est igitur voluptas, non solum ut recta sequamini, sed etiam ut loqui deceat frugaliter. Uterque enim summo bono fruitur, id est voluptate. Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Non quam nostram quidem, inquit Pomponius iocans;

    Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Et quidem Arcesilas tuus, etsi fuit in disserendo pertinacior, tamen noster fuit; Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Legimus tamen Diogenem, Antipatrum, Mnesarchum, Panaetium, multos alios in primisque familiarem nostrum Posidonium.

    Summum ením bonum exposuit vacuitatem doloris; Quia dolori non voluptas contraria est, sed doloris privatio. An hoc usque quaque, aliter in vita? Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Tum mihi Piso: Quid ergo? Semper enim ex eo, quod maximas partes continet latissimeque funditur, tota res appellatur. Quantum Aristoxeni ingenium consumptum videmus in musicis? Beatus autem esse in maximarum rerum timore nemo potest.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ne, dum huic obsequor, vobis molestus sim. Cupit enim dícere nihil posse ad beatam vitam deesse sapienti. Ea, quae dialectici nunc tradunt et docent, nonne ab illis instituta sunt aut inventa sunt? Suam denique cuique naturam esse ad vivendum ducem.

    Non est ista, inquam, Piso, magna dissensio. Summum a vobis bonum voluptas dicitur. Quis est, qui non oderit libidinosam, protervam adolescentiam? Duo Reges: constructio interrete. Traditur, inquit, ab Epicuro ratio neglegendi doloris.

    Qualem igitur hominem natura inchoavit? Cum praesertim illa perdiscere ludus esset. Negat esse eam, inquit, propter se expetendam. Nam memini etiam quae nolo, oblivisci non possum quae volo. Quos quidem tibi studiose et diligenter tractandos magnopere censeo.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Certe, nisi voluptatem tanti aestimaretis. Ego vero volo in virtute vim esse quam maximam; Si quidem, inquit, tollerem, sed relinquo. Quid autem habent admirationis, cum prope accesseris? Iam illud quale tandem est, bona praeterita non effluere sapienti, mala meminisse non oportere? Duo Reges: constructio interrete. Istam voluptatem perpetuam quis potest praestare sapienti? Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Qui enim existimabit posse se miserum esse beatus non erit.

    Ille enim occurrentia nescio quae comminiscebatur; Ne in odium veniam, si amicum destitero tueri. Itaque ad tempus ad Pisonem omnes. Quod quidem iam fit etiam in Academia. Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Prioris generis est docilitas, memoria; Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Non quam nostram quidem, inquit Pomponius iocans; Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus tamque multae.

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