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 v1.0 - 07/2017 license GNU/GPLv3 credit Script de bhaveshcmedhekar
  • tab = tab: tab ou accordion
  • title-tag = h4: balise utilisée pour les titres onglets
  • style: classe(s) et style(s) bloc principal
  • title-style: classe(s) et style inline onglets
  • content-style: classe(s) et style inline contenu
  • class: classe(s) bloc principal (obsolète)
  • title-class: classe(s) onglets (obsolète)
  • 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. Itaque hic ipse iam pridem est reiectus; Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. Haec para/doca illi, nos admirabilia dicamus. Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. Illa argumenta propria videamus, cur omnia sint paria peccata. Nunc de hominis summo bono quaeritur; Duo Reges: constructio interrete. Pauca mutat vel plura sane; Sed fac ista esse non inportuna; Nam Metrodorum non puto ipsum professum, sed, cum appellaretur ab Epicuro, repudiare tantum beneficium noluisse; Nam prius a se poterit quisque discedere quam appetitum earum rerum, quae sibi conducant, amittere.

    Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis. Et harum quidem rerum facilis est et expedita distinctio. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Quem si tenueris, non modo meum Ciceronem, sed etiam me ipsum abducas licebit. Haec dicuntur inconstantissime. Quae cum magnifice primo dici viderentur, considerata minus probabantur.

    Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Videmus igitur ut conquiescere ne infantes quidem possint. Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Utilitatis causa amicitia est quaesita. Qui est in parvis malis. Tuo vero id quidem, inquam, arbitratu. Superiores tres erant, quae esse possent, quarum est una sola defensa, eaque vehementer.

    Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Licet hic rursus ea commemores, quae optimis verbis ab Epicuro de laude amicitiae dicta sunt. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Non minor, inquit, voluptas percipitur ex vilissimis rebus quam ex pretiosissimis. Universa enim illorum ratione cum tota vestra confligendum puto. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Oratio me istius philosophi non offendit;

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Effluit igitur voluptas corporis et prima quaeque avolat saepiusque relinquit causam paenitendi quam recordandi. Scrupulum, inquam, abeunti; Negat esse eam, inquit, propter se expetendam. Et quod est munus, quod opus sapientiae? Huius, Lyco, oratione locuples, rebus ipsis ielunior. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Duo Reges: constructio interrete.

    Et quod est munus, quod opus sapientiae? Primum in nostrane potestate est, quid meminerimus? Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. Zenonis est, inquam, hoc Stoici. Sit enim idem caecus, debilis. Scio enim esse quosdam, qui quavis lingua philosophari possint; Sed haec omittamus; Tu enim ista lenius, hic Stoicorum more nos vexat. Qualem igitur hominem natura inchoavit?

    Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Torquatus, is qui consul cum Cn. Quae similitudo in genere etiam humano apparet. O magnam vim ingenii causamque iustam, cur nova existeret disciplina! Perge porro. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam. Pauca mutat vel plura sane;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Negat enim summo bono afferre incrementum diem. Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Animum autem reliquis rebus ita perfecit, ut corpus;

    Duo Reges: constructio interrete. Et hunc idem dico, inquieta sed ad virtutes et ad vitia nihil interesse. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. In qua quid est boni praeter summam voluptatem, et eam sempiternam? Et summatim quidem haec erant de corpore animoque dicenda, quibus quasi informatum est quid hominis natura postulet. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Quo studio cum satiari non possint, omnium ceterarum rerum obliti níhil abiectum, nihil humile cogitant; Sed in rebus apertissimis nimium longi sumus.

    <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. In qua quid est boni praeter summam voluptatem, et eam sempiternam? Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Idem fecisset Epicurus, si sententiam hanc, quae nunc Hieronymi est, coniunxisset cum Aristippi vetere sententia. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Duo Reges: constructio interrete. Ergo illi intellegunt quid Epicurus dicat, ego non intellego?

    Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Beatum, inquit. Quis non odit sordidos, vanos, leves, futtiles? Sed ad rem redeamus; Nam memini etiam quae nolo, oblivisci non possum quae volo. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Quod iam a me expectare noli. Iam id ipsum absurdum, maximum malum neglegi.

    Nam Pyrrho, Aristo, Erillus iam diu abiecti. Ita fit cum gravior, tum etiam splendidior oratio. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Quod autem principium officii quaerunt, melius quam Pyrrho;

    Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Bonum liberi: misera orbitas. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Sed quia studebat laudi et dignitati, multum in virtute processerat. Explanetur igitur. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Quod autem ratione actum est, id officium appellamus. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Quid, quod res alia tota est?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Facillimum id quidem est, inquam. Haec dicuntur inconstantissime. Tubulo putas dicere? Nec vero pietas adversus deos nec quanta iis gratia debeatur sine explicatione naturae intellegi potest. Sed quae tandem ista ratio est? At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Traditur, inquit, ab Epicuro ratio neglegendi doloris.

    Quis non odit sordidos, vanos, leves, futtiles? Minime vero istorum quidem, inquit. Duae sunt enim res quoque, ne tu verba solum putes. In qua quid est boni praeter summam voluptatem, et eam sempiternam? Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Scrupulum, inquam, abeunti;

    Duo Reges: constructio interrete. Sed quanta sit alias, nunc tantum possitne esse tanta. Quicquid porro animo cernimus, id omne oritur a sensibus; Quis est, qui non oderit libidinosam, protervam adolescentiam? Nam Pyrrho, Aristo, Erillus iam diu abiecti. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? Quid, de quo nulla dissensio est?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sapiens autem semper beatus est et est aliquando in dolore; Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Innumerabilia dici possunt in hanc sententiam, sed non necesse est. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; An vero, inquit, quisquam potest probare, quod perceptfum, quod. Cur deinde Metrodori liberos commendas? Duo Reges: constructio interrete.

    Cur id non ita fit? Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.

    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