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. Quid enim tanto opus est instrumento in optimis artibus comparandis? Igitur neque stultorum quisquam beatus neque sapientium non beatus. Ut proverbia non nulla veriora sint quam vestra dogmata. Duo Reges: constructio interrete. Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Quaesita enim virtus est, non quae relinqueret naturam, sed quae tueretur. Tamen a proposito, inquam, aberramus. Conferam tecum, quam cuique verso rem subicias;

    Eadem nunc mea adversum te oratio est. Istic sum, inquit.

    Honesta oratio, Socratica, Platonis etiam. Nosti, credo, illud: Nemo pius est, qui pietatem-; Et certamen honestum et disputatio splendida! omnis est enim de virtutis dignitate contentio. Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis.

    De quibus cupio scire quid sentias. Familiares nostros, credo, Sironem dicis et Philodemum, cum optimos viros, tum homines doctissimos. Item de contrariis, a quibus ad genera formasque generum venerunt. Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile. Beatus autem esse in maximarum rerum timore nemo potest. Aliud igitur esse censet gaudere, aliud non dolere. Oratio me istius philosophi non offendit; Equidem soleo etiam quod uno Graeci, si aliter non possum, idem pluribus verbis exponere.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Quod autem ratione actum est, id officium appellamus. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Num igitur dubium est, quin, si in re ipsa nihil peccatur a superioribus, verbis illi commodius utantur? Nam si beatus umquam fuisset, beatam vitam usque ad illum a Cyro extructum rogum pertulisset. Sed quanta sit alias, nunc tantum possitne esse tanta. Duo Reges: constructio interrete. Quorum altera prosunt, nocent altera. Quamquam tu hanc copiosiorem etiam soles dicere. -, sed ut hoc iudicaremus, non esse in iis partem maximam positam beate aut secus vivendi. Innumerabilia dici possunt in hanc sententiam, sed non necesse est. Sequitur disserendi ratio cognitioque naturae;

    Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Re mihi non aeque satisfacit, et quidem locis pluribus. Scrupulum, inquam, abeunti; Quid enim me prohiberet Epicureum esse, si probarem, quae ille diceret? -, sed ut hoc iudicaremus, non esse in iis partem maximam positam beate aut secus vivendi. An hoc usque quaque, aliter in vita? Minime vero istorum quidem, inquit. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Consequens enim est et post oritur, ut dixi.

    Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Esse enim, nisi eris, non potes. An me, inquam, nisi te audire vellem, censes haec dicturum fuisse? Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Nam quid possumus facere melius? Sin eam, quam Hieronymus, ne fecisset idem, ut voluptatem illam Aristippi in prima commendatione poneret. Itaque a sapientia praecipitur se ipsam, si usus sit, sapiens ut relinquat.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Tu vero, inquam, ducas licet, si sequetur; An quod ita callida est, ut optime possit architectari voluptates? Nam de summo mox, ut dixi, videbimus et ad id explicandum disputationem omnem conferemus. Sextilio Rufo, cum is rem ad amicos ita deferret, se esse heredem Q. Duo Reges: constructio interrete.

    Mihi quidem Antiochum, quem audis, satis belle videris attendere. Quid est, quod ab ea absolvi et perfici debeat? An tu me de L. Quod ea non occurrentia fingunt, vincunt Aristonem; Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Haeret in salebra. Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae recordamur. Hic ambiguo ludimur.

    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. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Quasi vero aut concedatur in omnibus stultis aeque magna esse vitia, et eadem inbecillitate et inconstantia L. Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Duo Reges: constructio interrete. Quare attende, quaeso. Ut id aliis narrare gestiant? Quis non odit sordidos, vanos, leves, futtiles?

    Ita fit cum gravior, tum etiam splendidior oratio. Graccho, eius fere, aequalí? Quis Aristidem non mortuum diligit? Curium putes loqui, interdum ita laudat, ut quid praeterea sit bonum neget se posse ne suspicari quidem. Etsi ea quidem, quae adhuc dixisti, quamvis ad aetatem recte isto modo dicerentur.

    Cave putes quicquam esse verius. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Aliter enim explicari, quod quaeritur, non potest. Quid est, quod ab ea absolvi et perfici debeat? Egone non intellego, quid sit don Graece, Latine voluptas? Sin laboramus, quis est, qui alienae modum statuat industriae?

    Nunc haec primum fortasse audientis servire debemus. Hoc non est positum in nostra actione. Quod autem satis est, eo quicquid accessit, nimium est; Ait enim se, si uratur, Quam hoc suave! dicturum. Quodsi ipsam honestatem undique pertectam atque absolutam. Age, inquies, ista parva sunt. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Quae sequuntur igitur?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Sic consequentibus vestris sublatis prima tolluntur. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Duo Reges: constructio interrete. Quippe: habes enim a rhetoribus;

    Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem? Illud non continuo, ut aeque incontentae. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Laboro autem non sine causa; Multoque hoc melius nos veriusque quam Stoici. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Apparet statim, quae sint officia, quae actiones. Quis enim redargueret?

    Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Ita credo. Sequitur disserendi ratio cognitioque naturae; Qualem igitur hominem natura inchoavit? Restant Stoici, qui cum a Peripateticis et Academicis omnia transtulissent, nominibus aliis easdem res secuti sunt. Aeque enim contingit omnibus fidibus, ut incontentae sint. Iam in altera philosophiae parte. Expressa vero in iis aetatibus, quae iam confirmatae sunt.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter enim explicari, quod quaeritur, non potest. Ergo illi intellegunt quid Epicurus dicat, ego non intellego? An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Mihi enim erit isdem istis fortasse iam utendum. Et hunc idem dico, inquieta sed ad virtutes et ad vitia nihil interesse. Duo Reges: constructio interrete. Proclivi currit oratio. Sed quot homines, tot sententiae; Ne tum quidem te respicies et cogitabis sibi quemque natum esse et suis voluptatibus?

    Expectoque quid ad id, quod quaerebam, respondeas. Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit; Neque solum ea communia, verum etiam paria esse dixerunt. Sed plane dicit quod intellegit. Quid in isto egregio tuo officio et tanta fide-sic enim existimo-ad corpus refers? Ita multo sanguine profuso in laetitia et in victoria est mortuus. Negat enim summo bono afferre incrementum diem. Illud non continuo, ut aeque incontentae. Ita relinquet duas, de quibus etiam atque etiam consideret. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Re mihi non aeque satisfacit, et quidem locis pluribus.


    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. Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. In quibus doctissimi illi veteres inesse quiddam caeleste et divinum putaverunt. Duo Reges: constructio interrete. Summus dolor plures dies manere non potest? Omnia contraria, quos etiam insanos esse vultis. Sed vos squalidius, illorum vides quam niteat oratio. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Quasi ego id curem, quid ille aiat aut neget.

    Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Erat enim res aperta. Praeclare hoc quidem. Immo alio genere; Vides igitur te aut ea sumere, quae non concedantur, aut ea, quae etiam concessa te nihil iuvent. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Qui non moveatur et offensione turpitudinis et comprobatione honestatis?

    Iam id ipsum absurdum, maximum malum neglegi. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Solum praeterea formosum, solum liberum, solum civem, stultost; Si enim ita est, vide ne facinus facias, cum mori suadeas. Primum in nostrane potestate est, quid meminerimus?

    Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur. Quid est, quod ab ea absolvi et perfici debeat? Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur; Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Consequens enim est et post oritur, ut dixi. Omnes enim iucundum motum, quo sensus hilaretur. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Falli igitur possumus. Habent enim et bene longam et satis litigiosam disputationem.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suam denique cuique naturam esse ad vivendum ducem. Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Ergo opifex plus sibi proponet ad formarum quam civis excellens ad factorum pulchritudinem?

    Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Serpere anguiculos, nare anaticulas, evolare merulas, cornibus uti videmus boves, nepas aculeis. An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Conferam tecum, quam cuique verso rem subicias; Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. At ego quem huic anteponam non audeo dicere; Sed quot homines, tot sententiae; Itaque vides, quo modo loquantur, nova verba fingunt, deserunt usitata. Quare ad ea primum, si videtur; Et harum quidem rerum facilis est et expedita distinctio. Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis.

    Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? Duo Reges: constructio interrete. Positum est a nostris in iis esse rebus, quae secundum naturam essent, non dolere;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praeclare hoc quidem. Quem si tenueris, non modo meum Ciceronem, sed etiam me ipsum abducas licebit. Et non ex maxima parte de tota iudicabis? Ut enim consuetudo loquitur, id solum dicitur honestum, quod est populari fama gloriosum. An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Torquatus, is qui consul cum Cn. Ita ne hoc quidem modo paria peccata sunt. Duo Reges: constructio interrete. Non enim quaero quid verum, sed quid cuique dicendum sit.

    Mihi, inquam, qui te id ipsum rogavi? Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae.


    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. Qui est in parvis malis. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Quid enim de amicitia statueris utilitatis causa expetenda vides. At ille pellit, qui permulcet sensum voluptate. Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum.

    Nunc omni virtuti vitium contrario nomine opponitur. Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant. Consequens enim est et post oritur, ut dixi. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Est, ut dicis, inquam.

    Atqui reperies, inquit, in hoc quidem pertinacem; Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Quam multa vitiosa! summum enim bonum et malum vagiens puer utra voluptate diiudicabit, stante an movente? Omnes enim iucundum motum, quo sensus hilaretur. Facile est hoc cernere in primis puerorum aetatulis. Quoniam, si dis placet, ab Epicuro loqui discimus. Qui ita affectus, beatum esse numquam probabis;

    Duo Reges: constructio interrete. Quam tu ponis in verbis, ego positam in re putabam. Num igitur dubium est, quin, si in re ipsa nihil peccatur a superioribus, verbis illi commodius utantur? Post enim Chrysippum eum non sane est disputatum. Nulla profecto est, quin suam vim retineat a primo ad extremum. Sed quid minus probandum quam esse aliquem beatum nec satis beatum?

    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. Ut pulsi recurrant? Murenam te accusante defenderem.

    Quid igitur, inquit, eos responsuros putas? Quod non faceret, si in voluptate summum bonum poneret. Quod equidem non reprehendo; Hoc est non modo cor non habere, sed ne palatum quidem. Ne discipulum abducam, times. Quam nemo umquam voluptatem appellavit, appellat;

    Ab his oratores, ab his imperatores ac rerum publicarum principes extiterunt. Non est enim vitium in oratione solum, sed etiam in moribus. Duo Reges: constructio interrete. A villa enim, credo, et: Si ibi te esse scissem, ad te ipse venissem. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Quae cum magnifice primo dici viderentur, considerata minus probabantur.

    Quantum Aristoxeni ingenium consumptum videmus in musicis? An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Longum est enim ad omnia respondere, quae a te dicta sunt. Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Sed ut iis bonis erigimur, quae expectamus, sic laetamur iis, quae recordamur. Tu enim ista lenius, hic Stoicorum more nos vexat. Teneo, inquit, finem illi videri nihil dolere. Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Aliis esse maiora, illud dubium, ad id, quod summum bonum dicitis, ecquaenam possit fieri accessio. An dubium est, quin virtus ita maximam partem optineat in rebus humanis, ut reliquas obruat? Duo Reges: constructio interrete. Mihi, inquam, qui te id ipsum rogavi?

    Sed ad haec, nisi molestum est, habeo quae velim. Quo plebiscito decreta a senatu est consuli quaestio Cn. Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Quaerimus enim finem bonorum. Haeret in salebra. At quanta conantur! Mundum hunc omnem oppidum esse nostrum! Incendi igitur eos, qui audiunt, vides. Sint ista Graecorum; Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Non dolere, inquam, istud quam vim habeat postea videro;

    Parvi enim primo ortu sic iacent, tamquam omnino sine animo sint. Est autem a te semper dictum nec gaudere quemquam nisi propter corpus nec dolere. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Sed ne, dum huic obsequor, vobis molestus sim. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat. Ex eorum enim scriptis et institutis cum omnis doctrina liberalis, omnis historia. Quis enim redargueret? Et harum quidem rerum facilis est et expedita distinctio.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Nec enim, dum metuit, iustus est, et certe, si metuere destiterit, non erit; Habent enim et bene longam et satis litigiosam disputationem. Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia.

    Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Duo Reges: constructio interrete. Ut non sine causa ex iis memoriae ducta sit disciplina. Bonum liberi: misera orbitas. Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? At quanta conantur! Mundum hunc omnem oppidum esse nostrum! Incendi igitur eos, qui audiunt, vides.

    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