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. Quid est, quod ab ea absolvi et perfici debeat? Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Mihi quidem Antiochum, quem audis, satis belle videris attendere. Sed non alienum est, quo facilius vis verbi intellegatur, rationem huius verbi faciendi Zenonis exponere. Duo Reges: constructio interrete. Sint modo partes vitae beatae. Potius inflammat, ut coercendi magis quam dedocendi esse videantur.

    Te enim iudicem aequum puto, modo quae dicat ille bene noris. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Est enim effectrix multarum et magnarum voluptatum. Hanc ergo intuens debet institutum illud quasi signum absolvere. Quae enim adhuc protulisti, popularia sunt, ego autem a te elegantiora desidero. Atqui reperies, inquit, in hoc quidem pertinacem;

    Aliter enim explicari, quod quaeritur, non potest. Hoc est non modo cor non habere, sed ne palatum quidem. Quaeque de virtutibus dicta sunt, quem ad modum eae semper voluptatibus inhaererent, eadem de amicitia dicenda sunt. Nihilne est in his rebus, quod dignum libero aut indignum esse ducamus?

    Duo enim genera quae erant, fecit tria. Nunc de hominis summo bono quaeritur; Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Tibi hoc incredibile, quod beatissimum. Quid de Pythagora? Quis est, qui non oderit libidinosam, protervam adolescentiam? Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Idemne potest esse dies saepius, qui semel fuit? Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Quod ea non occurrentia fingunt, vincunt Aristonem;

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Negat esse eam, inquit, propter se expetendam. Curium putes loqui, interdum ita laudat, ut quid praeterea sit bonum neget se posse ne suspicari quidem. Sed quid minus probandum quam esse aliquem beatum nec satis beatum? Magna laus. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia?

    Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Quid de Platone aut de Democrito loquar? Quamquam tu hanc copiosiorem etiam soles dicere. Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile. Ita redarguitur ipse a sese, convincunturque scripta eius probitate ipsius ac moribus. Conferam avum tuum Drusum cum C. Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti.

    Praeclare hoc quidem. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Duo Reges: constructio interrete. Sed haec omittamus;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Frater et T. Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Verum hoc idem saepe faciamus. Duo Reges: constructio interrete. Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; Prodest, inquit, mihi eo esse animo. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? De illis, cum volemus.

    Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Si qua in iis corrigere voluit, deteriora fecit. Alterum significari idem, ut si diceretur, officia media omnia aut pleraque servantem vivere. Hoc tu nunc in illo probas.

    <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. Videamus animi partes, quarum est conspectus illustrior; Sed tu istuc dixti bene Latine, parum plane. Ita redarguitur ipse a sese, convincunturque scripta eius probitate ipsius ac moribus. Claudii libidini, qui tum erat summo ne imperio, dederetur. Quod autem satis est, eo quicquid accessit, nimium est; Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Duo Reges: constructio interrete. An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia?

    Quod totum contra est. Sed nunc, quod agimus; Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Bonum negas esse divitias, praeposìtum esse dicis? Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Potius inflammat, ut coercendi magis quam dedocendi esse videantur.

    Summae mihi videtur inscitiae. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Aliter enim nosmet ipsos nosse non possumus. Et homini, qui ceteris animantibus plurimum praestat, praecipue a natura nihil datum esse dicemus? Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Quis est, qui non oderit libidinosam, protervam adolescentiam? Quae quo sunt excelsiores, eo dant clariora indicia naturae.

    -delector enim, quamquam te non possum, ut ais, corrumpere, delector, inquam, et familia vestra et nomine. Ex eorum enim scriptis et institutis cum omnis doctrina liberalis, omnis historia.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid de Platone aut de Democrito loquar? Summus dolor plures dies manere non potest? Erit enim mecum, si tecum erit. Duo Reges: constructio interrete. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Satisne igitur videor vim verborum tenere, an sum etiam nunc vel Graece loqui vel Latine docendus?

    Vides igitur, si amicitiam sua caritate metiare, nihil esse praestantius, sin emolumento, summas familiaritates praediorum fructuosorum mercede superari. Quod si ita se habeat, non possit beatam praestare vitam sapientia. Philosophi autem in suis lectulis plerumque moriuntur. Et ais, si una littera commota sit, fore tota ut labet disciplina. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Apparet statim, quae sint officia, quae actiones. Quicquid porro animo cernimus, id omne oritur a sensibus; Vulgo enim dicitur: Iucundi acti labores, nec male Euripidesconcludam, si potero, Latine;

    Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Ita relinquet duas, de quibus etiam atque etiam consideret. Quis enim est, qui non videat haec esse in natura rerum tria? Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Quia dolori non voluptas contraria est, sed doloris privatio.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Duo Reges: constructio interrete. Quamquam ab iis philosophiam et omnes ingenuas disciplinas habemus; Nonne igitur tibi videntur, inquit, mala? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Satisne ergo pudori consulat, si quis sine teste libidini pareat? Sin laboramus, quis est, qui alienae modum statuat industriae?

    Sed tempus est, si videtur, et recta quidem ad me. Nec mihi illud dixeris: Haec enim ipsa mihi sunt voluptati, et erant illa Torquatis. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi. Quod mihi quidem visus est, cum sciret, velle tamen confitentem audire Torquatum. Quae cum dixisset, finem ille. Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? Scisse enim te quis coarguere possit? Qua tu etiam inprudens utebare non numquam.

    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