Plusieurs catégories dans un onglet - Mise en forme

[Daewyn]

Bonjour, bonsoir, et merci à ceux qui voudront bien m'aider °^°

Fervente adepte des catégories en onglets, j'ai découvert il y a quelque temps un forum qui -oh surprise!- avait réussi à mettre, dans chacun de ses onglets de catégories, plusieurs catégories. J'ai donc farfouillé sur FA jusqu'à trouver un tuto me permettant de reproduire cet effet (celui-ci : https://forum.forumactif.com/t301747-plusieurs-categories-par-onglet ) mais, problème. J'ai déjà un template index_box modifié (pour l'apparence des catégories) et je n'arrive pas à concilier les deux codes, malgré plusieurs tentatives. C'est à dire que si j'essaie de garder ma mise en forme, les onglets ne fonctionnent plus. Ce qui reste assez problématique...

Est ce que quelqu'un saurait comment régler ce soucis ?

Voici mon template index_box :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
            <td class="row1 over" colspan="2" valign="top" width="100%">
<table width="100%">
  <tr><td class="row1 over" colspan="1" align="center" valign="middle" width="100%" height="50">
  <h3 class="hierarchy">
    <img style="margin-right: 300px;" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    <div style="margin-top: -50px;" class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    <div style="text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: -1px;" class="gensmall">« {catrow.forumrow.POSTS} parchemins dans {catrow.forumrow.TOPICS} grimoires. »</div>
  </h3></td></tr>
<tr><td class="row1 over" colspan="1" align="center" valign="top" width="100%" height="50">
<div class="cadre_cat"><table><tr><td>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<div class="liens"><span id="subforums" class="gensmall">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
  <script type="text/javascript">
  jQuery(function(){
      var separator = " Ҩ ";
      jQuery('span#subforums').each(function(){
        var links = jQuery(this).find("a");
        if(links.length > 1){
            var html = "";
            links.each(function(i){
              html += "<a href='"+jQuery(this).attr('href')+"'  title=\""+jQuery(this).attr('title')+"\" class='gensmall'>"+jQuery(this).text()+"</a>";
              if(i+1 != links.length){
                  html += separator;
              }
            });
            jQuery(this).html(html);
        }
        jQuery(this).removeAttr('id');
      });
  });
</script>
</td><td width="150px" align="center" valign="top">
<div class="stats">
  <span class="gensmall" style="text-align:center">{catrow.forumrow.LAST_POST}</span>
</div>
  </td></tr></table></div>
</td></tr></table>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

> les modifications : l'apparence des catégories (tout ce qui se trouve entre <!-- BEGIN forumrow --> et <!-- END forumrow --> ) ; la toute première table entièrement supprimée ; les colonnes de sujet/message/dernier message supprimées (ne reste que celle du nom de la caté).

Et l'adresse du forum concerné : http://fata-fantasia.forumactif.com/

Merci d'avance ! °°

[Daewyn]

Up ^^

[Daewyn]

Up o/

[Daewyn]

Uuup ~

[Daewyn]

Up !

[Daewyn]

Petit up ^^

[Daewyn]

Up again ~

[Daewyn]

Encore un Up. Personne ne saurait ? °°

[Daewyn]

Up again ^^

[FxPro']

Up again ^^

[Daewyn]

Up o/

[Daewyn]

Up è.é

[Ea]

Bonjour,


Sfun l'ombre au survol : https://i.imgur.com/XvGEA.png

Enfin voilà un exemple de script ( à mettre juste sur l'index ) :

Code:

$(function(){

   /* variable temporaire */
   var t;

   /* liste des onglets avec les catégories en faisant partient */
   var onglets=   [
                           ["Tout",[0,1,2,3,4]],
                           ["Onglets 1",[0,1]],
                           ["Onglets 2,0",[1]],
                           ["Onglets trois",[2,4]],
                           ["Onglets vier",[3]]
                        ];

   /* fonction pour sélectionner un onglet d'après une string s */
   var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
         if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
   }

   /* fonction pour voir si un index de catégorie i est dans un onglet d */
   var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
         if(d[1][j]==i) return !0;
      return !1;
   }

   /* onglet sélectionné par défaut */
   var songlet= onglets[0];
   /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
   var save= true;
   /* temps pour slider en ms */
   var timeslide= 500;

   /* récupération de l'onglet sauvé d'une autre fois */
   if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
         if(t=getOnglet(t))
            songlet= t;
   
   /* entoure les catégories d'un <div class="cat-table" /> */
   $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');

   /* affichage de l'onglet en cours */
   $(".cat-table").filter(function(index) {
     return !inOnglets(songlet,index);
   }).hide();

   /* ajout du div des onglets */
   $(".cat-table:first").before('<div id="cat-onglets"></div>');

   /* ajout des onglets dans le div */
   for(t=0;t<onglets.length;t++)
   {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
   }

   /* clic sur un onglet */
   $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);      
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
   });

});

Et un exemple de CSS pour aller avec :

Code:

#cat-onglets { margin: 5px auto; text-align: center; }

.co-item { background: #91B4FA; display: inline; cursor: pointer; color: #fff; margin: 0 5px; padding: 3px; border-radius: 10px; }

.co-actif { background: #fff; color: #91B4FA; }

L'endroit des onglets sera du style :

Code:

<div id="cat-onglets"><div class="co-item co-actif">Tout</div><div class="co-item">Onglets 1</div><div class="co-item">Onglets 2,0</div><div class="co-item">Onglets trois</div><div class="co-item">Onglets vier</div></div>

Avec donc chaque onglet qui a une classe .co-item, l'onglet sélectionné qui a une classe .co-actif également. Et tout autour des onglets il y a un #cat-onglets.


Le plus compliqué j'imagine que ça sera les modifications du script =P

Code:

   var onglets=   [
                           ["Tout",[0,1,2,3,4]],
                           ["Onglets 1",[0,1]],
                           ["Onglets 2,0",[1]],
                           ["Onglets trois",[2,4]],
                           ["Onglets vier",[3]]
                        ];

Ce sont les onglets, c'est un tableau avec un tableau pour chaque onglet.

Pour chaque tableau d'onglet il y a :

Code:

["nom de l'onglet",[liste des numéros de catégories pour l'onglet]]

Le numéro des catégories commence à 0 ( donc la première catégorie sur l'index, c'est la catégorie 0, et la 6ème la catégorie 5 ).

Code:

var songlet= onglets[0];

Là on peut choisir l'onglet sélectionné par défaut, il faut juste changer le 0 ( 0 dans l'exemple ce sera donc l'onglet "Tout" ).

Code:

var save= true;

On peut mettre true ou false, si c'est à true l'onglet sur lequel on est en dernier est sauvé ( dans le navigateur ) et quand on rouvre l'index, on devrait se retrouver sur l'onglet sauvé. Si c'est à false on se retrouvera toujours sur l'onglet par défaut.

Code:

var timeslide= 500;

C'est le temps en milliseconde pour que les catégories s'ouvre ou se ferme ( en mettant 0 c'est instantané donc ).

Là je pense avoir parlé de tout ce qui avait une utilité à être changé =)

Vu que cette façon est assez facilement adaptable à une autre version, je verrais pour le mettre en astuce ( avec les codes pour les autres versions ).

Cordialement.

[Daewyn]

Hawn *w* Je ne sais pas trop quoi dire, rien que pour m'avoir répondu je pourrais te vouer un culte x3

Alors j'ai bien tout lu comme une grande (j'ai même essayé de comprendre le script mais mon cerveau m'a dit non, pas maintenant, un autre jour peut être) et j'ai tout mis... ou presque. Euh. ALors ça veut peut être paraitre idiot, mais :

L'endroit des onglets sera du style :

Code:

<div id="cat-onglets"><div class="co-item co-actif">Tout</div><div class="co-item">Onglets 1</div><div class="co-item">Onglets 2,0</div><div class="co-item">Onglets trois</div><div class="co-item">Onglets vier</div></div>

Avec donc chaque onglet qui a une classe .co-item, l'onglet sélectionné qui a une classe .co-actif également. Et tout autour des onglets il y a un #cat-onglets.

... le code, je le met dans le template index_box je suppose, mais à quel endroit ? X_x J'ai essayé en première position, juste après le <!-- BEGIN catrow --> et juste après <!-- BEGIN tablehead --> Mais ça ne marche pas .w. ... j'implore humblement ton aide à nouveau xD

EDIT : hum, simple question vu que je viens de remarquer, il ne devrait pas y avoir un Onmouseover ou Onclick quelque part ? ô_O (vu mes connaissances en codage, possible que non, m'enfin, je préfère vérifier vu que j'en ai pas vu xD)

[Ea]

Le :

Code:

<div id="cat-onglets"><div class="co-item co-actif">Tout</div><div class="co-item">Onglets 1</div><div class="co-item">Onglets 2,0</div><div class="co-item">Onglets trois</div><div class="co-item">Onglets vier</div></div>

C'est juste un exemple de ce qu'il y a au final ( pour mieux comprendre et pouvoir modifier le CSS ), mais c'est réalisé juste avec le script en fonction de ce qui est mis dans :

Code:

var onglets=  [
                          ["Tout",[0,1,2,3,4]],
                          ["Onglets 1",[0,1]],
                          ["Onglets 2,0",[1]],
                          ["Onglets trois",[2,4]],
                          ["Onglets vier",[3]]
                        ];

Le onmouseover il n'y en a pas ( si vous voulez mettre un changement CSS au survol d'un titre d'onglet, vous pouvez juste utiliser :hover ).

Et le onclick, j'utilise un .click() de la librairie jQuery ( documentation ) :

Code:

 /* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);     
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));:
  });

Donc il n'y a qu'à mettre le script sur la page d'index, et le CSS dans le CSS et c'est tout. À part cela il n'y a qu'à modifier le CSS et ce qui est modifiable dans le javascript comme souhaité.

Je l'ai testé là http://teta.123.st/ et sur votre forum et ça fonctionne telle quelle en tout cas =P

Cordialement.

[Daewyn]

Hum... je dois faire une bêtise alors parce que rien ne s'affiche ><

Alors pour le CSS je ne pense pas m'être trompée d'endroit où le mettre (quand même xD) mais pour ce qui est du script... quand vous dites "sur l'index", vous parlez bien de Modules > Gestion des codes Javascript > Placement sur l'index ?

C'est là où j'ai mis le script (même si au cas j'ai aussi essayé sur la page d'accueil et dans l'index_box et l'index_body), mais ça ne m'affiche rien ._.

[Ea]

Pour le script, il faudrait rajouter deux ; on dirait :

Code:

$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partient */
  var onglets=  [
                          ["Tout",[0,1,2,3,4]],
                          ["Onglets 1",[0,1]],
                          ["Onglets 2,0",[1]],
                          ["Onglets trois",[2,4]],
                          ["Onglets vier",[3]]
                        ];
 
  /* fonction pour sélectionner un onglet d'après une string s */
  var getOnglet= function(s) {
      var j;
      for(j=0;j<onglets.length;j++)
        if(JSON.stringify(onglets[j])==s) return onglets[j];
      return !1;
  };
 
  /* fonction pour voir si un index de catégorie i est dans un onglet d */
  var inOnglets= function(d,i) {
      var j;
      for(j=0;j<d[1].length;j++)
        if(d[1][j]==i) return !0;
      return !1;
  };
 
  /* onglet sélectionné par défaut */
  var songlet= onglets[0];
  /* est-ce que l'onglet sélectionné est sauvegardé d'un affichage de l'index à l'autre */
  var save= true;
  /* temps pour slider en ms */
  var timeslide= 500;
 
  /* récupération de l'onglet sauvé d'une autre fois */
  if(save && window.localStorage)
      if(t=localStorage.getItem("onglets"))
        if(t=getOnglet(t))
            songlet= t;
 
  /* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');
 
  /* affichage de l'onglet en cours */
  $(".cat-table").filter(function(index) {
    return !inOnglets(songlet,index);
  }).hide();
 
  /* ajout du div des onglets */
  $(".cat-table:first").before('<div id="cat-onglets"></div>');
 
  /* ajout des onglets dans le div */
  for(t=0;t<onglets.length;t++)
  {
      $("#cat-onglets").append('<div class="co-item'+(onglets[t]==songlet?' co-actif':'')+'">'+onglets[t][0]+'</div>');
  }
 
  /* clic sur un onglet */
  $("#cat-onglets .co-item").click(function(){
      $("#cat-onglets .co-actif").removeClass("co-actif");
      $(this).addClass("co-actif");
      var o= onglets[$("#cat-onglets .co-item").index(this)];
      $(".cat-table").not($(".cat-table").filter(function(index) {
        return inOnglets(o,index);
      }).slideDown(timeslide)).slideUp(timeslide);     
      if(save && window.localStorage) localStorage.setItem("onglets",JSON.stringify(o));
  });
 
});

Je les avais ajouté en testant, mais j'ai du oublier de mettre le script à jour ici ^^

Cordialement.

[Daewyn]

Nya ** Effectivement, les ; manquants étaient la cause du problème x3 Merci infiniment pour ce code bien pratique et très simple d'utilisation, plus besoin de toucher aux templates pour une navigation par onglets o/

Je mets en résolu et encore merci **

EDIT : je me demandais (simple curiosité), est-il possible avec ce code de mettre des images en titre des onglets ?

[Ea]

On peut remplacer le :

Code:

"Tout"

par du html, par exemple pour une image :

Code:

'<img src="http://2img.net/i/fa/i/smiles/icon_question.gif" alt="Tout" title="Tout" />'

Voilà un outil pour convertir un contenu texte en une ligne javascript :
http://www.maonyn.com/h16-textarea-to-string

Ou alors on pourrait pour plus de sûreté mettre juste :

Code:

'<span id="onglet-tout"></span>'

Et mettre l'image par CSS :

Code:

#onglet-tout {
  background: url(http://2img.net/i/fa/i/smiles/icon_question.gif);
  width: 15px;
  height: 15px;
  display: inline-block;
}

Comme cela si vous voulez juste changer l'image par la suite il suffirait d'aller le faire dans le CSS ( plutôt que modifier le script ).

Cordialement.

[Daewyn]

Entendu, c'est parfait x) Merci beaucoup o/