tab ~ des onglets responsives

Des onglets et accordions responsives

Sur un script de bhaveshcmedhekar (licence MIT)

➠ tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite. Mode responsive

Cliquer pour lire la documentation

Sur mobile ou sur demande, l'affichage est en mode accordion
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)
  • plugin_type: accordion
  • side: left ou right
  • active_tab: 1 a N

    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.

    <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>
    
    • 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. Et ais, si una littera commota sit, fore tota ut labet disciplina. Universa enim illorum ratione cum tota vestra confligendum puto. Quid, cum fictas fabulas, e quibus utilitas nulla elici potest, cum voluptate legimus? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Urgent tamen et nihil remittunt.

    Quas enim kakaw Graeci appellant, vitia malo quam malitias nominare. Ac ne plura complectar-sunt enim innumerabilia-, bene laudata virtus voluptatis aditus intercludat necesse est. Et harum quidem rerum facilis est et expedita distinctio. Egone non intellego, quid sit don Graece, Latine voluptas? Multoque hoc melius nos veriusque quam Stoici. Quamquam haec quidem praeposita recte et reiecta dicere licebit.

    Longum est enim ad omnia respondere, quae a te dicta sunt. Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Ita similis erit ei finis boni, atque antea fuerat, neque idem tamen; Qualem igitur hominem natura inchoavit? Scaevolam M. Tenent mordicus. Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Facete M. Quid, si etiam iucunda memoria est praeteritorum malorum? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt;

    Quod autem principium officii quaerunt, melius quam Pyrrho; Et hunc idem dico, inquieta sed ad virtutes et ad vitia nihil interesse. Videamus igitur sententias eorum, tum ad verba redeamus. Propter nos enim illam, non propter eam nosmet ipsos diligimus. Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Nam Pyrrho, Aristo, Erillus iam diu abiecti.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad bona praeterita redeamus. Praeteritis, inquit, gaudeo. Mihi enim erit isdem istis fortasse iam utendum. Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Duo Reges: constructio interrete. Quod totum contra est. Incommoda autem et commoda-ita enim estmata et dustmata appello-communia esse voluerunt, paria noluerunt.

    Sed ad bona praeterita redeamus. Itaque his sapiens semper vacabit. Non est igitur voluptas bonum. Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;

    Sed mehercule pergrata mihi oratio tua. Cuius similitudine perspecta in formarum specie ac dignitate transitum est ad honestatem dictorum atque factorum. Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt. Si enim ita est, vide ne facinus facias, cum mori suadeas. Negare non possum. Estne, quaeso, inquam, sitienti in bibendo voluptas? Sed tamen intellego quid velit. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Omnia contraria, quos etiam insanos esse vultis. Dat enim intervalla et relaxat.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Hanc ergo intuens debet institutum illud quasi signum absolvere. Videamus animi partes, quarum est conspectus illustrior; Aliter enim explicari, quod quaeritur, non potest. Quaerimus enim finem bonorum. Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Duo Reges: constructio interrete. Nihil acciderat ei, quod nollet, nisi quod anulum, quo delectabatur, in mari abiecerat. Sumenda potius quam expetenda. Ergo hoc quidem apparet, nos ad agendum esse natos. Laboro autem non sine causa; Ut in voluptate sit, qui epuletur, in dolore, qui torqueatur.

    Illum mallem levares, quo optimum atque humanissimum virum, Cn. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Sunt enim prima elementa naturae, quibus auctis vírtutis quasi germen efficitur. Traditur, inquit, ab Epicuro ratio neglegendi doloris.

    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 ...

    • 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. Tria genera bonorum; Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Sit enim idem caecus, debilis. Duo Reges: constructio interrete.

    Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros. Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Haec non erant eius, qui innumerabilis mundos infinitasque regiones, quarum nulla esset ora, nulla extremitas, mente peragravisset. Praetereo multos, in bis doctum hominem et suavem, Hieronymum, quem iam cur Peripateticum appellem nescio. Hoc loco tenere se Triarius non potuit. Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis.

    Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? Beatus autem esse in maximarum rerum timore nemo potest. Si quae forte-possumus. An potest, inquit ille, quicquam esse suavius quam nihil dolere?

    Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Ait enim se, si uratur, Quam hoc suave! dicturum. Si est nihil nisi corpus, summa erunt illa: valitudo, vacuitas doloris, pulchritudo, cetera. Primum quid tu dicis breve? Quasi ego id curem, quid ille aiat aut neget. Itaque nostrum est-quod nostrum dico, artis est-ad ea principia, quae accepimus. Summum ením bonum exposuit vacuitatem doloris; Videmus in quodam volucrium genere non nulla indicia pietatis, cognitionem, memoriam, in multis etiam desideria videmus.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. Duo Reges: constructio interrete. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Sit hoc ultimum bonorum, quod nunc a me defenditur; Sed fortuna fortis; Qua tu etiam inprudens utebare non numquam. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.

    Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Hanc ergo intuens debet institutum illud quasi signum absolvere. Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Fortemne possumus dicere eundem illum Torquatum?

    Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Quo plebiscito decreta a senatu est consuli quaestio Cn. Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Itaque mihi non satis videmini considerare quod iter sit naturae quaeque progressio. Hanc ergo intuens debet institutum illud quasi signum absolvere. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Hoc Hieronymus summum bonum esse dixit. Nam Pyrrho, Aristo, Erillus iam diu abiecti.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec quo modo conveniant, non sane intellego. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Quarum cum una sit, qua mores conformari putantur, differo eam partem, quae quasi stirps ets huius quaestionis. Duo Reges: constructio interrete. At, si voluptas esset bonum, desideraret.

    Quasi ego id curem, quid ille aiat aut neget. Esse enim quam vellet iniquus iustus poterat inpune. Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. Iam id ipsum absurdum, maximum malum neglegi. Tu vero, inquam, ducas licet, si sequetur;


    Il est possible d'avoir les onglets sur le côté droit en ajoutant l'option side=right

    • titre 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 me istud rogas? Et harum quidem rerum facilis est et expedita distinctio. Et ille ridens: Video, inquit, quid agas; Graece donan, Latine voluptatem vocant. Si verbum sequimur, primum longius verbum praepositum quam bonum. Summum ením bonum exposuit vacuitatem doloris;

    Quorum altera prosunt, nocent altera. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Illud urgueam, non intellegere eum quid sibi dicendum sit, cum dolorem summum malum esse dixerit. Quibus rebus vita consentiens virtutibusque respondens recta et honesta et constans et naturae congruens existimari potest. Hoc ille tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Huius ego nunc auctoritatem sequens idem faciam. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Quo modo autem philosophus loquitur?

    Duo Reges: constructio interrete. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; A mene tu? Et quidem, inquit, vehementer errat; Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Nam Pyrrho, Aristo, Erillus iam diu abiecti. Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? Omnes enim iucundum motum, quo sensus hilaretur. Mihi enim satis est, ipsis non satis.

    Equidem soleo etiam quod uno Graeci, si aliter non possum, idem pluribus verbis exponere. Quare attende, quaeso. Quis Aristidem non mortuum diligit? Tollenda est atque extrahenda radicitus. Omnes enim iucundum motum, quo sensus hilaretur. Naturales divitias dixit parabiles esse, quod parvo esset natura contenta. Facile est hoc cernere in primis puerorum aetatulis.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Terram, mihi crede, ea lanx et maria deprimet. Quid sequatur, quid repugnet, vident. Quodsi ipsam honestatem undique pertectam atque absolutam. Duo Reges: constructio interrete.

    Quam ob rem tandem, inquit, non satisfacit? Et ais, si una littera commota sit, fore tota ut labet disciplina. Qualem igitur hominem natura inchoavit? Tum ille timide vel potius verecunde: Facio, inquit.

    Non quam nostram quidem, inquit Pomponius iocans; Itaque haec cum illis est dissensio, cum Peripateticis nulla sane. Eadem nunc mea adversum te oratio est. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Ut alios omittam, hunc appello, quem ille unum secutus est. Ergo ita: non posse honeste vivi, nisi honeste vivatur? Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; At iam decimum annum in spelunca iacet. Mihi quidem Homerus huius modi quiddam vidisse videatur in iis, quae de Sirenum cantibus finxerit.

    Gerendus est mos, modo recte sentiat. Illud dico, ea, quae dicat, praeclare inter se cohaerere. Dic in quovis conventu te omnia facere, ne doleas. Solum praeterea formosum, solum liberum, solum civem, stultost; Eaedem enim utilitates poterunt eas labefactare atque pervertere. Duo Reges: constructio interrete.


    Pour cet exemple, nous allons personnaliser le rendu.

    • principal : ajout d'une classe pour pouvoir styler en CSS
    • onglets : réduction de la largeur par title-style
    • contenu : couleur de fond par content-class, hauteur minimale et largeur pour compenser la réduction des onglets par content-title
    {up tab=accordion | class=tabPerso | side=left 
    | title-style=width:15% 
    | content-class=bg-jauneClair | content-style=min-width:85%;min-height:300px }
    ... le contenu ...
    {/up tab}

    L'action addcsshead est utilisée pour ajouter des règles CSS pour la classe indiquée pour le bloc principal. L'avantage sur une feuille de style custom, outre son poids, est d'avoir une spécificité CSS à l'emplacement de son utilisation.

    {up addcsshead=
      .tabPerso.tab_wrapper > ul li[border-left:1px solid #bbb]
      .tabPerso.tab_wrapper > ul li::after[width:0]
      .tabPerso.tab_wrapper > ul li.active[background:yellow]
      .tabPerso.tab_wrapper > ul li.active::after[background:red;width:10px]
      .tabPerso div.accordian_header[background:#fff] /*pour mobile*/
    }
    

    Voici le résultat :

    • 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. Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Quae duo sunt, unum facit. Nos paucis ad haec additis finem faciamus aliquando; Non est igitur summum malum dolor.

    Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Progredientibus autem aetatibus sensim tardeve potius quasi nosmet ipsos cognoscimus. Vitae autem degendae ratio maxime quidem illis placuit quieta. Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. Est enim effectrix multarum et magnarum voluptatum. Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Legimus tamen Diogenem, Antipatrum, Mnesarchum, Panaetium, multos alios in primisque familiarem nostrum Posidonium. Non enim iam stirpis bonum quaeret, sed animalis.

    Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Ita relinquet duas, de quibus etiam atque etiam consideret. Sit hoc ultimum bonorum, quod nunc a me defenditur; Apud ceteros autem philosophos, qui quaesivit aliquid, tacet; Quo modo autem philosophus loquitur?

    Age nunc isti doceant, vel tu potius quis enim ista melius? Duo Reges: constructio interrete. Maximus dolor, inquit, brevis est. Murenam te accusante defenderem. Quamquam id quidem licebit iis existimare, qui legerint. Ne discipulum abducam, times. Non quam nostram quidem, inquit Pomponius iocans; In eo enim positum est id, quod dicimus esse expetendum. Cur iustitia laudatur? Quia, si mala sunt, is, qui erit in iis, beatus non erit.

    texte pour la question n°3

    texte pour la question n°4

    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. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Ita multo sanguine profuso in laetitia et in victoria est mortuus. Quid censes in Latino fore? Bonum integritas corporis: misera debilitas. Omnis enim est natura diligens sui. Ratio enim nostra consentit, pugnat oratio. Et harum quidem rerum facilis est et expedita distinctio. Tubulo putas dicere?

    Quae quidem vel cum periculo est quaerenda vobis; Theophrasti igitur, inquit, tibi liber ille placet de beata vita? Vitiosum est enim in dividendo partem in genere numerare. Sed ad haec, nisi molestum est, habeo quae velim. Facile est hoc cernere in primis puerorum aetatulis. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Laboro autem non sine causa;

    Duo Reges: constructio interrete. Ut optime, secundum naturam affectum esse possit. Etsi qui potest intellegi aut cogitari esse aliquod animal, quod se oderit? Quid est, quod ab ea absolvi et perfici debeat? Nosti, credo, illud: Nemo pius est, qui pietatem-; Intellegi quidem, ut propter aliam quampiam rem, verbi gratia propter voluptatem, nos amemus; Ita multo sanguine profuso in laetitia et in victoria est mortuus. Polemoni et iam ante Aristoteli ea prima visa sunt, quae paulo ante dixi.

    Neque enim disputari sine reprehensione nec cum iracundia aut pertinacia recte disputari potest. Atqui iste locus est, Piso, tibi etiam atque etiam confirmandus, inquam; An haec ab eo non dicuntur? Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Negare non possum. Itaque ab his ordiamur. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Neque solum ea communia, verum etiam paria esse dixerunt. Quod autem satis est, eo quicquid accessit, nimium est; Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Quodsi ipsam honestatem undique pertectam atque absolutam.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. At ille pellit, qui permulcet sensum voluptate. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus; Duo Reges: constructio interrete. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Quid est igitur, inquit, quod requiras? Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Quae ista amicitia est? An tu me de L. Velut ego nunc moveor. Hoc loco tenere se Triarius non potuit.

    Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Conferam avum tuum Drusum cum C. Sed in rebus apertissimis nimium longi sumus.

    Quod ea non occurrentia fingunt, vincunt Aristonem; Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. Quantum Aristoxeni ingenium consumptum videmus in musicis? Venit ad extremum; Quae cum magnifice primo dici viderentur, considerata minus probabantur. Quo invento omnis ab eo quasi capite de summo bono et malo disputatio ducitur. Negabat igitur ullam esse artem, quae ipsa a se proficisceretur;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Facillimum id quidem est, inquam. Maximas vero virtutes iacere omnis necesse est voluptate dominante. Si mala non sunt, iacet omnis ratio Peripateticorum. Habent enim et bene longam et satis litigiosam disputationem. At iste non dolendi status non vocatur voluptas. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur.

    Duo Reges: constructio interrete. Hunc vos beatum; Et quod est munus, quod opus sapientiae? Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Vestri haec verecundius, illi fortasse constantius. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Sed tu istuc dixti bene Latine, parum plane. Sit enim idem caecus, debilis. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. De quibus cupio scire quid sentias. Quod si ita se habeat, non possit beatam praestare vitam sapientia.

    Personnalisation de l'action pour l'ensemble du site

    • Pour modifier les valeurs par défaut des options de UP, il suffit de créer un fichier custom/prefs.json. A partir de la version 1.4 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