Onglets paginés

Des onglets qui permettent d’utiliser la pagination

Motivation

J’ai commencé par utiliser le plugin onglets dans le texte. Puis j’ai eu besoin dans un squelette d’afficher un nombre important et surtout inconnu à l’avance d’onglets (en fait c’était une liste d’articles et il fallait un onglet par article) . Seule solution, mixer pagination et onglet une fois fait ça donne :

Téléchargement

onglet_pag.zip

Installation

C’est un plugin, il suffit de le décompresser dans le dossier plugins et de l’activer dans l’espace privé.

Utilisation

Dans les articles: identique à En onglets dans le texte de SPIP, ou ailleurs..., par exemple

<onglet|debut|titre=titre 1>
contenu de l'onglet 1

<onglet|titre=titre 2>
contenu de l'onglet 2

<onglet|titre=titre 3>
contenu de l'onglet 3

etc...

<onglet|fin>

si on veut mettre un autre groupe d’onglets, il suffit de préciser l’attribut id

<onglet|debut|id=id|titre=titre>

Dans les squelettes: L’utilisation est identique à En onglets dans le texte de SPIP, ou ailleurs.... Si on ne veut pas utiliser la pagination on peut mettre

<B_concours>
    <BOUCLE_concours (...) ... >
      <div class="tab-page">
        <h2 class="tab">#TITRE</h2>
        #TEXTE
      </div>
    </BOUCLE_concours>
  </div>
</B_concours>

On peut en plus définir des onglets de pagination comme suit:

<B_concours>
  [(#ANCRE_PAGINATION)]
  <div class="tab-pane" id="xx">
    [<div class="tab-page">
      <h2 class="tab-link">(#PAGINATION{precedent})</h2>
    </div>]
    <BOUCLE_concours (...) ... {pagination}>
      <div class="tab-page">
        <h2 class="tab">#TITRE</h2>
        #TEXTE
      </div>
    </BOUCLE_concours>
    [<div class="tab-page">
      <h2 class="tab-link">(#PAGINATION{suivant})</h2>
    </div>]
  </div>
</B_concours>

updated on 2 October 2019

Discussion

3 discussions

  • Bonjour, j’ai bien installé le plugin qui fonctionne bien, mais un fois l’article ouvert, les onglets de l’article étant visible, le tableau de droite des “menus principaux” se retrouve deplacé dans la page (en dessous du tableau de l’article ouvert ou se trouve les onglets ? Plus de tableau à droite ? test réalisé sur IE.

    merci pour votre aide,

    Dominique

    Reply to this message

  • 1

    Bonjour,

    J’utilise ce plugin sur plusieurs articles, cependant sur le dernier en date, j’ai un souci, à savoir que les titres d’onglets sont trop longs par rapport à l’onglet...

    Quelqu’un aurait-il une solution ?

    • Dans le plugins onglets dans le texte, il y a une css “css onglets taille variable” qui traite ce probleme, je pense qu’avec quelques adaptation ça devrait marcher. En fait il na faut plus utiliser les png des onglets mais les attributs border. Des que j’ai le temps d’y travailler je fait l’adaptation.

    Reply to this message

  • 1

    Bonjour,

    Pourrions-nous avoir un exemple en ligne? car j’ai du mal à conceptualiser le truc... Bien que ça semble fichetrement intéressant!

    Merci pour cette contribution!

    • J’ai ecrit ce plugin pour le site d’un club hippique. Il faut afficher le programme et les résultats des concours passés et à venir (seulement le programme dans ce cas bien evidement), à chaque concours correspond un article.

      Le club organisant un dizaine de concours par an, si on met un onglet par concours ça va rapidement être illisible. Hors les gents sont surtout interessés par le concours de l’années donc seuls 10 concours sonts affichés en onglets les autre accessiblrd par la pagination.

      Le site pour lequel j’ai fait ce plugin est www.formation-cham-aix.com, mais il n’a pas encore (a ma connaissance) assez de concours enregistres (il a demarré en Novembre)

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom