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

{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
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
  • auto: delai en millisecondes pour changement automatique d'onglet

    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.

    • 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. Nec vero intermittunt aut admirationem earum rerum, quae sunt ab antiquis repertae, aut investigationem novarum. Nam si propter voluptatem, quae est ista laus, quae possit e macello peti? Nam illud vehementer repugnat, eundem beatum esse et multis malis oppressum. Numquam facies. Hoc sic expositum dissimile est superiori. Illa argumenta propria videamus, cur omnia sint paria peccata. Non enim iam stirpis bonum quaeret, sed animalis. Duo Reges: constructio interrete. Apparet statim, quae sint officia, quae actiones. Omnis enim est natura diligens sui.

    Ut pulsi recurrant? Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere? Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Duo enim genera quae erant, fecit tria. Nam his libris eum malo quam reliquo ornatu villae delectari. Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Quae contraria sunt his, malane? Itaque his sapiens semper vacabit. Sapiens autem semper beatus est et est aliquando in dolore;

    Negat enim summo bono afferre incrementum diem. Quare ad ea primum, si videtur; Etenim semper illud extra est, quod arte comprehenditur. Scisse enim te quis coarguere possit? Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Profectus in exilium Tubulus statim nec respondere ausus;

    Quis non odit sordidos, vanos, leves, futtiles? Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. Ut aliquid scire se gaudeant? Non quam nostram quidem, inquit Pomponius iocans; Cum sciret confestim esse moriendum eamque mortem ardentiore studio peteret, quam Epicurus voluptatem petendam putat. Collatio igitur ista te nihil iuvat. Cum praesertim illa perdiscere ludus esset. Tollitur beneficium, tollitur gratia, quae sunt vincla concordiae. Haeret in salebra. Reguli reiciendam;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae contraria sunt his, malane? Quibus ego vehementer assentior. Duo Reges: constructio interrete. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Prioris generis est docilitas, memoria; Quicquid porro animo cernimus, id omne oritur a sensibus; Idem iste, inquam, de voluptate quid sentit?

    Ut in geometria, prima si dederis, danda sunt omnia. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Cur iustitia laudatur? Negat esse eam, inquit, propter se expetendam. Itaque hic ipse iam pridem est reiectus; Scrupulum, inquam, abeunti; Nescio quo modo praetervolavit oratio. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Certe, nisi voluptatem tanti aestimaretis.

    Quis est, qui non oderit libidinosam, protervam adolescentiam? Erat enim res aperta. Ne in odium veniam, si amicum destitero tueri. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae similitudo in genere etiam humano apparet. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia? Quae similitudo in genere etiam humano apparet. Si qua in iis corrigere voluit, deteriora fecit. Neque solum ea communia, verum etiam paria esse dixerunt.

    Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Erit enim mecum, si tecum erit. Quamvis enim depravatae non sint, pravae tamen esse possunt. Duo Reges: constructio interrete.

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


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

    J'utilise également cette démo pour vous montrer l'option ajoutée par Pascal Leconte qui permet une rotation automatique des onglets. Il suffit d'ajouter l'option auto avec le nombre de millisecondes. Exemple auto=8000 pour un changement d'onglet toutes les 8 secondes.

    • 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. Videamus animi partes, quarum est conspectus illustrior; Duo Reges: constructio interrete. Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. At hoc in eo M. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum.

    Teneo, inquit, finem illi videri nihil dolere. Verba tu fingas et ea dicas, quae non sentias? Quorum sine causa fieri nihil putandum est. Nam si amitti vita beata potest, beata esse non potest. Quae cum dixisset paulumque institisset, Quid est? Quid iudicant sensus? Quantum Aristoxeni ingenium consumptum videmus in musicis? Ut proverbia non nulla veriora sint quam vestra dogmata. Ita graviter et severe voluptatem secrevit a bono. Hoc enim identidem dicitis, non intellegere nos quam dicatis voluptatem.

    Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Hac videlicet ratione, quod ea, quae externa sunt, iis tuemur officiis, quae oriuntur a suo cuiusque genere virtutis. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Qui est in parvis malis. Sed tamen intellego quid velit. Quantam rem agas, ut Circeis qui habitet totum hunc mundum suum municipium esse existimet? Aliud igitur esse censet gaudere, aliud non dolere. Huius ego nunc auctoritatem sequens idem faciam. Quis est, qui non oderit libidinosam, protervam adolescentiam?

    Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Illum mallem levares, quo optimum atque humanissimum virum, Cn. Ita enim vivunt quidam, ut eorum vita refellatur oratio. Sed hoc sane concedamus. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Ita ne hoc quidem modo paria peccata sunt.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ad eos igitur converte te, quaeso. Quippe: habes enim a rhetoribus; Quia nec honesto quic quam honestius nec turpi turpius.

    Quam ob rem tandem, inquit, non satisfacit? Duae sunt enim res quoque, ne tu verba solum putes. Et quidem, inquit, vehementer errat; Tum Quintus: Est plane, Piso, ut dicis, inquit.

    Duo Reges: constructio interrete. Utilitatis causa amicitia est quaesita. Sit sane ista voluptas. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Sed haec omittamus; Quod ea non occurrentia fingunt, vincunt Aristonem; Hoc est non modo cor non habere, sed ne palatum quidem. Suam denique cuique naturam esse ad vivendum ducem. Sed fortuna fortis;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. O magnam vim ingenii causamque iustam, cur nova existeret disciplina! Perge porro. Si autem id non concedatur, non continuo vita beata tollitur. Ampulla enim sit necne sit, quis non iure optimo irrideatur, si laboret? Sed haec omittamus; Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Age nunc isti doceant, vel tu potius quis enim ista melius? Duo Reges: constructio interrete. Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.

    Ut id aliis narrare gestiant? Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Is ita vivebat, ut nulla tam exquisita posset inveniri voluptas, qua non abundaret. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Audeo dicere, inquit.


    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 | 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. Tanti autem aderant vesicae et torminum morbi, ut nihil ad eorum magnitudinem posset accedere. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis; Qui bonum omne in virtute ponit, is potest dicere perfici beatam vitam perfectione virtutis; Duo Reges: constructio interrete. Si verbum sequimur, primum longius verbum praepositum quam bonum.

    Cur haec eadem Democritus? Mihi quidem Antiochum, quem audis, satis belle videris attendere. Omnes enim iucundum motum, quo sensus hilaretur. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Quid igitur, inquit, eos responsuros putas? Atqui eorum nihil est eius generis, ut sit in fine atque extrerno bonorum. Quam nemo umquam voluptatem appellavit, appellat; Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? Aliter enim explicari, quod quaeritur, non potest. Num igitur utiliorem tibi hunc Triarium putas esse posse, quam si tua sint Puteolis granaria?

    Ille incendat? Vitiosum est enim in dividendo partem in genere numerare. Occultum facinus esse potuerit, gaudebit; Quae est igitur causa istarum angustiarum? Mihi enim satis est, ipsis non satis.

    Hoc est dicere: Non reprehenderem asotos, si non essent asoti. Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Quicquid porro animo cernimus, id omne oritur a sensibus; Quod autem meum munus dicis non equidem recuso, sed te adiungo socium.

    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. Verba tu fingas et ea dicas, quae non sentias? Sed potestne rerum maior esse dissensio? Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum. Respondent extrema primis, media utrisque, omnia omnibus. Quid ergo? Quae cum praeponunt, ut sit aliqua rerum selectio, naturam videntur sequi; Duo Reges: constructio interrete. Commentarios quosdam, inquam, Aristotelios, quos hic sciebam esse, veni ut auferrem, quos legerem, dum essem otiosus; Satisne ergo pudori consulat, si quis sine teste libidini pareat? Illa sunt similia: hebes acies est cuipiam oculorum, corpore alius senescit;

    Videmus igitur ut conquiescere ne infantes quidem possint. Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est. Nihil opus est exemplis hoc facere longius. Quae similitudo in genere etiam humano apparet. At ille non pertimuit saneque fidenter: Istis quidem ipsis verbis, inquit; Nullus est igitur cuiusquam dies natalis. Atqui reperies, inquit, in hoc quidem pertinacem;

    Utram tandem linguam nescio? Quae tamen a te agetur non melior, quam illae sunt, quas interdum optines. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Quod iam a me expectare noli. Ergo hoc quidem apparet, nos ad agendum esse natos.

    Nam ante Aristippus, et ille melius. Si longus, levis dictata sunt. Itaque his sapiens semper vacabit. Ad corpus diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Id enim volumus, id contendimus, ut officii fructus sit ipsum officium. Idque testamento cavebit is, qui nobis quasi oraculum ediderit nihil post mortem ad nos pertinere? Eam tum adesse, cum dolor omnis absit;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quasi ego id curem, quid ille aiat aut neget. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? Quare attendo te studiose et, quaecumque rebus iis, de quibus hic sermo est, nomina inponis, memoriae mando; Duo Reges: constructio interrete. Homines optimi non intellegunt totam rationem everti, si ita res se habeat. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? A mene tu? Qua ex cognitione facilior facta est investigatio rerum occultissimarum. Recte, inquit, intellegis. At, si voluptas esset bonum, desideraret. Fortasse id optimum, sed ubi illud: Plus semper voluptatis? Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem.

    At cum de plurimis eadem dicit, tum certe de maximis. Quae cum dixisset paulumque institisset, Quid est? Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Iam id ipsum absurdum, maximum malum neglegi. Minime id quidem, inquam, alienum, multumque ad ea, quae quaerimus, explicatio tua ista profecerit. Quicquid porro animo cernimus, id omne oritur a sensibus; Itaque his sapiens semper vacabit. Aut unde est hoc contritum vetustate proverbium: quicum in tenebris? Vide, quantum, inquam, fallare, Torquate.

    Quae contraria sunt his, malane? An est aliquid per se ipsum flagitiosum, etiamsi nulla comitetur infamia? Sed ego in hoc resisto; Urgent tamen et nihil remittunt. Si quicquam extra virtutem habeatur in bonis. Ita finis bonorum existit secundum naturam vivere sic affectum, ut optime is affici possit ad naturamque accommodatissime.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quodcumque in mentem incideret, et quodcumque tamquam occurreret. Quae ista amicitia est? Luxuriam non reprehendit, modo sit vacua infinita cupiditate et timore. Si id dicis, vicimus. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Duo Reges: constructio interrete. Eadem nunc mea adversum te oratio est. Apud imperitos tum illa dicta sunt, aliquid etiam coronae datum; Nos commodius agimus. Ubi ut eam caperet aut quando? Odium autem et invidiam facile vitabis.

    Atqui, inquit, si Stoicis concedis ut virtus sola, si adsit vitam efficiat beatam, concedis etiam Peripateticis. Restincta enim sitis stabilitatem voluptatis habet, inquit, illa autem voluptas ipsius restinctionis in motu est. Fatebuntur Stoici haec omnia dicta esse praeclare, neque eam causam Zenoni desciscendi fuisse. In eo enim positum est id, quod dicimus esse expetendum.

    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