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 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)
  • auto: delai en millisecondes pour changement automatique d'onglet
  • espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
  • css-head: 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. Restincta enim sitis stabilitatem voluptatis habet, inquit, illa autem voluptas ipsius restinctionis in motu est. Res enim se praeclare habebat, et quidem in utraque parte. Theophrastus mediocriterne delectat, cum tractat locos ab Aristotele ante tractatos? Non enim, si malum est dolor, carere eo malo satis est ad bene vivendum. Satisne ergo pudori consulat, si quis sine teste libidini pareat? Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Duo Reges: constructio interrete. Quis, quaeso, illum negat et bonum virum et comem et humanum fuisse? Maximas vero virtutes iacere omnis necesse est voluptate dominante.

    Cum ageremus, inquit, vitae beatum et eundem supremum diem, scribebamus haec. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ex quo, id quod omnes expetunt, beate vivendi ratio inveniri et comparari potest. Haec et tu ita posuisti, et verba vestra sunt. Cum id fugiunt, re eadem defendunt, quae Peripatetici, verba. Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. At ille pellit, qui permulcet sensum voluptate. Sed ad haec, nisi molestum est, habeo quae velim. Huius ego nunc auctoritatem sequens idem faciam. Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Longum est enim ad omnia respondere, quae a te dicta sunt.

    A mene tu? Sed quae tandem ista ratio est? At miser, si in flagitiosa et vitiosa vita afflueret voluptatibus. Neque solum ea communia, verum etiam paria esse dixerunt. Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Quae cum magnifice primo dici viderentur, considerata minus probabantur.

    Quid ad utilitatem tantae pecuniae? Ex quo, id quod omnes expetunt, beate vivendi ratio inveniri et comparari potest. Quae in controversiam veniunt, de iis, si placet, disseramus. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Esse enim, nisi eris, non potes. Vidit Homerus probari fabulam non posse, si cantiunculis tantus irretitus vir teneretur;

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Naturales divitias dixit parabiles esse, quod parvo esset natura contenta. Summum ením bonum exposuit vacuitatem doloris; Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Duo Reges: constructio interrete. Ergo hoc quidem apparet, nos ad agendum esse natos. At multis malis affectus.

    An quod ita callida est, ut optime possit architectari voluptates? Nihil opus est exemplis hoc facere longius. Sin kakan malitiam dixisses, ad aliud nos unum certum vitium consuetudo Latina traduceret. Quid est igitur, cur ita semper deum appellet Epicurus beatum et aeternum? Qua tu etiam inprudens utebare non numquam.

    Quid de Platone aut de Democrito loquar? Si quicquam extra virtutem habeatur in bonis. Utram tandem linguam nescio? Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Esse enim, nisi eris, non potes. Omnes enim iucundum motum, quo sensus hilaretur. Itaque et manendi in vita et migrandi ratio omnis iis rebus, quas supra dixi, metienda. Utilitatis causa amicitia est quaesita. Nos paucis ad haec additis finem faciamus aliquando; An eiusdem modi?

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes. Tollenda est atque extrahenda radicitus. Duarum enim vitarum nobis erunt instituta capienda. Ita ne hoc quidem modo paria peccata sunt. Non enim, si omnia non sequebatur, idcirco non erat ortus illinc. Nonne igitur tibi videntur, inquit, mala? Duo Reges: constructio interrete. Cum sciret confestim esse moriendum eamque mortem ardentiore studio peteret, quam Epicurus voluptatem petendam putat. Expressa vero in iis aetatibus, quae iam confirmatae sunt.

    Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Quid iudicant sensus? Apparet statim, quae sint officia, quae actiones. Nam si beatus umquam fuisset, beatam vitam usque ad illum a Cyro extructum rogum pertulisset. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam. Hoc Hieronymus summum bonum esse dixit. Quid autem habent admirationis, cum prope accesseris? Ampulla enim sit necne sit, quis non iure optimo irrideatur, si laboret? Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Idem etiam dolorem saepe perpetiuntur, ne, si id non faciant, incidant in maiorem. Dolere malum est: in crucem qui agitur, beatus esse non potest. Nihil enim arbitror esse magna laude dignum, quod te praetermissurum credam aut mortis aut doloris metu.

    <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 tutle-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. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Sed ego in hoc resisto; Quae cum dixisset, finem ille. Duo Reges: constructio interrete. Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Quacumque enim ingredimur, in aliqua historia vestigium ponimus.

    Tum ille: Tu autem cum ipse tantum librorum habeas, quos hic tandem requiris? Comprehensum, quod cognitum non habet? Cur id non ita fit? Dolor ergo, id est summum malum, metuetur semper, etiamsi non aderit; Primum cur ista res digna odio est, nisi quod est turpis? Quamquam in hac divisione rem ipsam prorsus probo, elegantiam desidero.

    Traditur, inquit, ab Epicuro ratio neglegendi doloris. Qua igitur re ab deo vincitur, si aeternitate non vincitur? Quae fere omnia appellantur uno ingenii nomine, easque virtutes qui habent, ingeniosi vocantur. Ita ne hoc quidem modo paria peccata sunt. Illis videtur, qui illud non dubitant bonum dicere -; Estne, quaeso, inquam, sitienti in bibendo voluptas? Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus;

    Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Pungunt quasi aculeis interrogatiunculis angustis, quibus etiam qui assentiuntur nihil commutantur animo et idem abeunt, qui venerant. An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat? Nam adhuc, meo fortasse vitio, quid ego quaeram non perspicis. Idcirco enim non desideraret, quia, quod dolore caret, id in voluptate est. Aliud igitur esse censet gaudere, aliud non dolere. Mihi, inquam, qui te id ipsum rogavi? Aperiendum est igitur, quid sit voluptas;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non dolere, inquam, istud quam vim habeat postea videro; Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet.

    Sed haec quidem liberius ab eo dicuntur et saepius. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad philosophos nostros esset. Nunc omni virtuti vitium contrario nomine opponitur. Eadem nunc mea adversum te oratio est. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Graece donan, Latine voluptatem vocant. Ut aliquid scire se gaudeant? Sed mehercule pergrata mihi oratio tua. Quod non faceret, si in voluptate summum bonum poneret. Sic enim maiores nostri labores non fugiendos tristissimo tamen verbo aerumnas etiam in deo nominaverunt.

    Quo modo autem optimum, si bonum praeterea nullum est? Tollenda est atque extrahenda radicitus. Non laboro, inquit, de nomine. Duo Reges: constructio interrete. Et quod est munus, quod opus sapientiae? Igitur neque stultorum quisquam beatus neque sapientium non beatus. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Nihil est enim, de quo aliter tu sentias atque ego, modo commutatis verbis ipsas res conferamus. Quae quidem vel cum periculo est quaerenda vobis; Ergo ita: non posse honeste vivi, nisi honeste vivatur? Quo modo autem optimum, si bonum praeterea nullum est? Huius ego nunc auctoritatem sequens idem faciam.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Diodorus, eius auditor, adiungit ad honestatem vacuitatem doloris. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Quo plebiscito decreta a senatu est consuli quaestio Cn. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Itaque sensibus rationem adiunxit et ratione effecta sensus non reliquit. Duo Reges: constructio interrete. Nam, ut sint illa vendibiliora, haec uberiora certe sunt.

    Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Nescio quo modo praetervolavit oratio. Si est nihil nisi corpus, summa erunt illa: valitudo, vacuitas doloris, pulchritudo, cetera. Sed erat aequius Triarium aliquid de dissensione nostra iudicare. Ac tamen, ne cui loco non videatur esse responsum, pauca etiam nunc dicam ad reliquam orationem tuam. Et quidem, Cato, hanc totam copiam iam Lucullo nostro notam esse oportebit; Illis videtur, qui illud non dubitant bonum dicere -; Si quicquam extra virtutem habeatur in bonis.

    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