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. Indicant pueri, in quibus ut in speculis natura cernitur. Quod ea non occurrentia fingunt, vincunt Aristonem; Duo Reges: constructio interrete. De hominibus dici non necesse est. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Tamen a proposito, inquam, aberramus. Hoc ne statuam quidem dicturam pater aiebat, si loqui posset. Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur.

    Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Octavio fuit, cum illam severitatem in eo filio adhibuit, quem in adoptionem D. Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? Non quam nostram quidem, inquit Pomponius iocans; Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Fortasse id optimum, sed ubi illud: Plus semper voluptatis?

    Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Si enim ita est, vide ne facinus facias, cum mori suadeas. Idem iste, inquam, de voluptate quid sentit? Sed ad haec, nisi molestum est, habeo quae velim. Non quam nostram quidem, inquit Pomponius iocans; Nam ante Aristippus, et ille melius. Atqui haec patefactio quasi rerum opertarum, cum quid quidque sit aperitur, definitio est.

    Vestri haec verecundius, illi fortasse constantius. Ergo instituto veterum, quo etiam Stoici utuntur, hinc capiamus exordium. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur. Modo etiam paulum ad dexteram de via declinavi, ut ad Pericli sepulcrum accederem.

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duo Reges: constructio interrete. Si sapiens, ne tum quidem miser, cum ab Oroete, praetore Darei, in crucem actus est. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Quis est tam dissimile homini. Frater et T. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Unum est sine dolore esse, alterum cum voluptate. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?

    Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P. Quid censes in Latino fore? Atque his de rebus et splendida est eorum et illustris oratio. Occultum facinus esse potuerit, gaudebit; Quid enim de amicitia statueris utilitatis causa expetenda vides.

    Portenta haec esse dicit, neque ea ratione ullo modo posse vivi; Comprehensum, quod cognitum non habet? Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit. Egone non intellego, quid sit don Graece, Latine voluptas? Cur iustitia laudatur? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quibus ego vehementer assentior. Cupiditates non Epicuri divisione finiebat, sed sua satietate. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Idemne potest esse dies saepius, qui semel fuit? Philosophi autem in suis lectulis plerumque moriuntur. Vide, ne etiam menses! nisi forte eum dicis, qui, simul atque arripuit, interficit. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. Quando enim Socrates, qui parens philosophiae iure dici potest, quicquam tale fecit? Duo Reges: constructio interrete.

    Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Tu vero, inquam, ducas licet, si sequetur; His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Nam memini etiam quae nolo, oblivisci non possum quae volo. Claudii libidini, qui tum erat summo ne imperio, dederetur. Nunc omni virtuti vitium contrario nomine opponitur. Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Bonum integritas corporis: misera debilitas.

    <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. Ergo omni animali illud, quod appetiti positum est in eo, quod naturae est accommodatum. Tu quidem reddes; Certe non potest. Illi enim inter se dissentiunt. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc?

    Duo Reges: constructio interrete. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. A primo, ut opinor, animantium ortu petitur origo summi boni.

    Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Princeps huius civitatis Phalereus Demetrius cum patria pulsus esset iniuria, ad Ptolomaeum se regem Alexandream contulit. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere.

    Duarum enim vitarum nobis erunt instituta capienda. Quod cum ille dixisset et satis disputatum videretur, in oppidum ad Pomponium perreximus omnes. Si est nihil nisi corpus, summa erunt illa: valitudo, vacuitas doloris, pulchritudo, cetera. Quae animi affectio suum cuique tribuens atque hanc, quam dico. Quis istud possit, inquit, negare?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Solum praeterea formosum, solum liberum, solum civem, stultost; Aliud igitur esse censet gaudere, aliud non dolere. Deinde dolorem quem maximum? Odium autem et invidiam facile vitabis. Qua tu etiam inprudens utebare non numquam. Duo Reges: constructio interrete. At enim hic etiam dolore. Omnia contraria, quos etiam insanos esse vultis.

    Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Et nemo nimium beatus est; Minime vero istorum quidem, inquit. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Scaevola tribunus plebis ferret ad plebem vellentne de ea re quaeri. Eiuro, inquit adridens, iniquum, hac quidem de re; Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Sed quid sentiat, non videtis. Si quicquam extra virtutem habeatur in bonis.

    Quasi ego id curem, quid ille aiat aut neget. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Nunc de hominis summo bono quaeritur;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutibus igitur rectissime mihi videris et ad consuetudinem nostrae orationis vitia posuisse contraria. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Ita relinquet duas, de quibus etiam atque etiam consideret. Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem ipsam neglegebat; Quod autem in homine praestantissimum atque optimum est, id deseruit.

    Duo Reges: constructio interrete. Nunc haec primum fortasse audientis servire debemus. Cur, nisi quod turpis oratio est? Esse enim quam vellet iniquus iustus poterat inpune. A quibus propter discendi cupiditatem videmus ultimas terras esse peragratas. Sed quid attinet de rebus tam apertis plura requirere? Itaque his sapiens semper vacabit.

    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