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
  • class: classe(s) bloc principal
  • style: style(s) bloc principal
  • title-class: classe(s) onglets
  • title-style: style inline onglets
  • content-style: style inline contenu
  • content-class: classe(s) contenu
  • 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. Ita ceterorum sententiis semotis relinquitur non mihi cum Torquato, sed virtuti cum voluptate certatio. Nulla erit controversia. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Duo Reges: constructio interrete. Fieri, inquam, Triari, nullo pacto potest, ut non dicas, quid non probes eius, a quo dissentias. Nos paucis ad haec additis finem faciamus aliquando; Quid dubitas igitur mutare principia naturae?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et harum quidem rerum facilis est et expedita distinctio. Ergo infelix una molestia, fellx rursus, cum is ipse anulus in praecordiis piscis inventus est? Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Primum divisit ineleganter; Duo Reges: constructio interrete.

    Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? Illa tamen simplicia, vestra versuta. Quid igitur, inquit, eos responsuros putas? Tu vero, inquam, ducas licet, si sequetur; Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Hosne igitur laudas et hanc eorum, inquam, sententiam sequi nos censes oportere?

    Sic exclusis sententiis reliquorum cum praeterea nulla esse possit, haec antiquorum valeat necesse est. Cur post Tarentum ad Archytam? Si enim ad populum me vocas, eum. Quorum sine causa fieri nihil putandum est. Haec et tu ita posuisti, et verba vestra sunt. Tanta vis admonitionis inest in locis; Qualem igitur hominem natura inchoavit? Deprehensus omnem poenam contemnet.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita relinquet duas, de quibus etiam atque etiam consideret. Esse enim quam vellet iniquus iustus poterat inpune. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Facete M. Duo Reges: constructio interrete.

    Hinc ceteri particulas arripere conati suam quisque videro voluit afferre sententiam. Quorum sine causa fieri nihil putandum est. An hoc usque quaque, aliter in vita? Sed quid attinet de rebus tam apertis plura requirere? Quicquid porro animo cernimus, id omne oritur a sensibus; Idem iste, inquam, de voluptate quid sentit? Quae animi affectio suum cuique tribuens atque hanc, quam dico. Ait enim se, si uratur, Quam hoc suave! dicturum.

    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. Ut placet, inquit, etsi enim illud erat aptius, aequum cuique concedere. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Sed non sunt in eo genere tantae commoditates corporis tamque productae temporibus tamque multae. Ad quorum et cognitionem et usum iam corroborati natura ipsa praeeunte deducimur. Negabat igitur ullam esse artem, quae ipsa a se proficisceretur; Quod autem ratione actum est, id officium appellamus. Quae cum magnifice primo dici viderentur, considerata minus probabantur. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Duo Reges: constructio interrete. An eiusdem modi?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Laboro autem non sine causa; Age nunc isti doceant, vel tu potius quis enim ista melius? Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. Nondum autem explanatum satis, erat, quid maxime natura vellet. Aliter enim explicari, quod quaeritur, non potest. Duo Reges: constructio interrete.

    Nobis aliter videtur, recte secusne, postea; Profectus in exilium Tubulus statim nec respondere ausus; Tollenda est atque extrahenda radicitus. Eam stabilem appellas. Nec tamen ullo modo summum pecudis bonum et hominis idem mihi videri potest. Si quicquam extra virtutem habeatur in bonis. Saepe ab Aristotele, a Theophrasto mirabiliter est laudata per se ipsa rerum scientia; Sed virtutem ipsam inchoavit, nihil amplius.

    Ad eas enim res ab Epicuro praecepta dantur. Amicitiam autem adhibendam esse censent, quia sit ex eo genere, quae prosunt. Quid sequatur, quid repugnet, vident. Nunc haec primum fortasse audientis servire debemus. Si longus, levis. Claudii libidini, qui tum erat summo ne imperio, dederetur. Ad eos igitur converte te, quaeso. Negat esse eam, inquit, propter se expetendam. Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Summus dolor plures dies manere non potest?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Antiquorum autem sententiam Antiochus noster mihi videtur persequi diligentissime, quam eandem Aristoteli fuisse et Polemonis docet. Negat enim summo bono afferre incrementum diem. Tamen a proposito, inquam, aberramus. Sic enim censent, oportunitatis esse beate vivere. Ita relinquet duas, de quibus etiam atque etiam consideret. Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Duo Reges: constructio interrete.

    Hos contra singulos dici est melius. Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Non est ista, inquam, Piso, magna dissensio. Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni.


    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. Et ais, si una littera commota sit, fore tota ut labet disciplina. Erat enim Polemonis. Quis non odit sordidos, vanos, leves, futtiles? Mihi enim satis est, ipsis non satis. Quod autem ratione actum est, id officium appellamus. Duo Reges: constructio interrete.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio?

    Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Age sane, inquam. Urgent tamen et nihil remittunt. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Consequens enim est et post oritur, ut dixi. Occultum facinus esse potuerit, gaudebit; Philosophi autem in suis lectulis plerumque moriuntur. Quodsi vultum tibi, si incessum fingeres, quo gravior viderere, non esses tui similis; Mihi enim satis est, ipsis non satis. Eam stabilem appellas. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret.

    Duo Reges: constructio interrete. Odium autem et invidiam facile vitabis. Non enim iam stirpis bonum quaeret, sed animalis. Huius ego nunc auctoritatem sequens idem faciam.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quorum altera prosunt, nocent altera. Verum hoc loco sumo verbis his eandem certe vim voluptatis Epicurum nosse quam ceteros. Nihilo beatiorem esse Metellum quam Regulum. Duo Reges: constructio interrete. Sit hoc ultimum bonorum, quod nunc a me defenditur; Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi. Expressa vero in iis aetatibus, quae iam confirmatae sunt.

    Nos paucis ad haec additis finem faciamus aliquando; Minime vero istorum quidem, inquit. Et nemo nimium beatus est; Si enim ad populum me vocas, eum. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Nihil sane. Hoc loco tenere se Triarius non potuit. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Eodem modo is enim tibi nemo dabit, quod, expetendum sit, id esse laudabile. Scio enim esse quosdam, qui quavis lingua philosophari possint;


    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. Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Quod si ita sit, cur opera philosophiae sit danda nescio. Vitae autem degendae ratio maxime quidem illis placuit quieta. Invidiosum nomen est, infame, suspectum.

    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. Multoque hoc melius nos veriusque quam Stoici. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Hi autem ponunt illi quidem prima naturae, sed ea seiungunt a finibus et a summa bonorum; Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Quamquam id quidem licebit iis existimare, qui legerint. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Duo Reges: constructio interrete. Res tota, Torquate, non doctorum hominum, velle post mortem epulis celebrari memoriam sui nominis. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis contra in illa aetate pudorem, constantiam, etiamsi sua nihil intersit, non tamen diligat? Quo invento omnis ab eo quasi capite de summo bono et malo disputatio ducitur. Illud quaero, quid ei, qui in voluptate summum bonum ponat, consentaneum sit dicere. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt?

    Multoque hoc melius nos veriusque quam Stoici. Quamquam tu hanc copiosiorem etiam soles dicere. Quod cum dixissent, ille contra.

    Duo Reges: constructio interrete. Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quis istum dolorem timet? Sed quid sentiat, non videtis. Tu vero, inquam, ducas licet, si sequetur; Conferam tecum, quam cuique verso rem subicias; Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Restinguet citius, si ardentem acceperit. Quae animi affectio suum cuique tribuens atque hanc, quam dico. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inde sermone vario sex illa a Dipylo stadia confecimus. Mihi enim erit isdem istis fortasse iam utendum. Nunc haec primum fortasse audientis servire debemus. Istam voluptatem, inquit, Epicurus ignorat? Quis hoc dicit?

    Quamvis enim depravatae non sint, pravae tamen esse possunt. Duo Reges: constructio interrete. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur. Sed non alienum est, quo facilius vis verbi intellegatur, rationem huius verbi faciendi Zenonis exponere. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Tanta vis admonitionis inest in locis;

    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