des onglets pour afficher des noeuds (ou des sections d'un même noeud)

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by Marie-Hélène on

Bonjour,

J'ai le problème suivant :

Sur UNE page (et une seule), je voudrais afficher trois textes dans trois onglets différents (en fait une présentation de la structure dans plusieurs langues, une par onglet). Le site lui-même est unilingue, je n'utilise pas l'artillerie lourde i18n.

Le problème ne se pose (a priori) que pour une seule situation, je cherche donc la solution la plus légère possible (je ne veux pas installer un mastodonte ou une librairie extérieure pour ça).

Je vois en gros deux attitudes possibles : faire trois noeuds et les rassembler sur un même écran, ou bien faire un noeud divisé en sections et trouver le moyen de disperser, façon puzzle, mes sections en onglets.

1° trois noeuds sur un même écran, je vois comment faire ça avec Views, et ce peut-être la solution que je vais utiliser, mais une vue pour ça ça me paraît déjà limite trop lourd. Quicktabs (sauf erreur) produit des blocs ; même si je peux afficher un bloc dans la section content et même s'il est possible de n'afficher un bloc que sur une page, je trouve ça un peu tordu comme solution. D'autant que je ne suis pas sûre du tout d'avoir besoin de QT par ailleurs.

2° un noeud explosé en trois onglets, j'ai cherché un peu ; Tabs Auto serait parfait mais n'existe pas pour D6. Quelqu'un dans les issues signale yui_tabviews mais il faut une librairie extérieure pour le faire fonctionner. exclu donc.

Donc, en fait, je voudrais passer par le code ; faire un genre de node-[nid].tpl.php : ça peut se faire ? et comment m'y prendre ?

Merci !

Forum : 
Support général
Version de Drupal : 
6.x
Tags : 
onglets

Soumis par Marie-Hélène le 16 Juin, 2010 - 12:29

(une précision : un développeur passera derrière moi pour finaliser ce genre de choses ; moi je ne fais que préparer la structure et la maquette du site ; donc je n'ai pas besoin d'obtenir immédiatement ce résultat ; je veux juste savoir si mon idée de passer par le template sera réalisable/simple, dans le cas contraire s'il faut de toute façon un module je bricolerai sans doute une vue. Mon objectif c'est d'avoir le moins de bricolages tordus à documenter pour les ceusses qui prendront l'administration derrière moi).

Soumis par khtuluu le 16 Juin, 2010 - 16:02

Tu peux aussi te passer d'un module.

  • tu mets en place la librairy jquery pour gérer les tabs .Documentation et sources ici ----> http://docs.jquery.com/UI/Tabs
  • tu dupliques ton template de node pour avoir un tpl propre à ton type de noeud node-xxxx.tpl.php
  • dans ce template tu affiches les différents champs de ton noeud en les répartissant dans tes différents onglet. Il suffit d'appliquer les class qui vont bien pour tes onglet et de mettre la micro ligne de code qui va transformer tout ça en tab.

tu auras un template de noeud qui ressemble a ça

NB: il faut déclaré le code suivant dans un fichier js $("#tabs").tabs();

<div class="node <?php print $classes; ?>" id="node-<?php print $node->nid; ?>">
  <div class="node-inner">

    <?php if (!$page): ?>
      <h2 class="title"><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
    <?php endif; ?>

    <?php print $picture; ?>

    <?php if ($submitted): ?>
      <span class="submitted"><?php print $submitted; ?></span>
    <?php endif; ?>

    <div class="content">
      <div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
       <?php print $node->title; ?>
    </div>
    <div id="fragment-2">
          <?php print $node->type; ?>
    </div>
    <div id="fragment-3">
        <?php print $node->body; ?>
    </div>
    </div>

    <?php if ($terms): ?>
      <div class="taxonomy"><?php print $terms; ?></div>
    <?php endif;?>

    <?php if ($links): ?>
      <div class="links"> <?php print $links; ?></div>
    <?php endif; ?>

  </div> <!-- /node-inner -->
</div> <!-- /node-->

Soumis par Marie-Hélène le 16 Juin, 2010 - 16:42

ça parait une excellente piste, d'autant que jquery est inclus dans drupal sauf erreur. (d'ailleurs j'ai installé un petit effet "toggle" sur un bout de texte donc en fait j'en suis sûre).

en revanche cela m'oblige à utiliser trois champs différents (moi, naïvement, je voudrais juste diviser le corps avec des balises genre page break)... hmmmm...

je vais creuser ! merci !

Soumis par khtuluu le 16 Juin, 2010 - 17:00

jquery est implémenté mais pas jquery UI dont fait partie le plugin tab, il faut que tu l'ajoute celui-ci. Cependant il existe le module "tabs" http://drupal.org/project/tabs qui a juste pour vocation d'implémenté jquery UI tabs

si tu veux diviser ton body en 3 partie dans tes onglets c'est tout aussi simple. tu as juste a compté les caractère de ton body, par exemple, et à séparé le body en 3 partie égal avec la fonction substr().
tu peux aussi convertir ton body en un tableau de mot et le séparé en un nombre de mot égal. Cette solution t'évitera les mots coupés comme tu en aurais avec la solution précédente (enfin si tu n'ajoutes aps de contrôles pour l'éviter bien entendu)