Catégorie par onglet

[Pierre43]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Internet Explorer
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://horde-orugaron.forumgratuit.org/

Description du problème

Bonjour

Je viens de tomber sur ce petit tuto qui m'intéresse fortement :
https://forum.forumactif.com/t372373-liste-liens-des-categories-en-haut-du-forum-pour-les-afficher-separement
Hors, ce tuto ne concernant que les forum phpbb2, je souhaiterai l'appliquer sur un forum phpbb3 mais il n'est pas compatible avec ce format
Bien évidement, je "personnaliserai" le code par la suite.

Voici, en rappel, les codes phpbb2 donnés sur le tuto :
JAVASCRIPT

Code:

$(function(){
 
  /* variable temporaire */
  var t;
 
  /* liste des onglets avec les catégories en faisant partie */
  var onglets=  [
                          ["Titre Onglet1",[0]],
                          ["Titre Onglet2",[1]],
                          ["Titre Onglet3",[2]],
                          ["Titre Onglet4",[3]],
                          ["Tout afficher",[0,1,2,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= 800;
 
  /* 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));
  });
 
});

CSS

Code:

/*onglets catégories*/
#cat-onglets {
  margin: 5px auto;
  text-align: center; }
 
.co-item {
  background: #535357;
  color: #ffffff;
  border: 1px solid  #D9DBE8;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 5px;
}
 
.co-item:hover{
  background: #424245;
  border: 1px solid #D9DBE8;
  color:#3787E8;
  display: inline;
  cursor: pointer;
  margin: 0 5px;
  padding: 3px;
  border-radius: 5px;
}
 
.co-actif {
  background: #535357;
  color: #3787E8;
  border:1px solid #D9DBE8; }

.
Merci d'avance pour votre réponse
Cordialement

[Pierre43]

Up

[Pierre43]

Up

[Neptunia]

Bonjour ^^

Il y a juste une ligne à modifier dans le javascript pour le porter sur phpBB3, vu que cette version n'utilise plus de tables.

Dans le javascript remplacez :

Code:

  /* entoure les catégories d'un <div class="cat-table" /> */
  $("th.secondarytitle").closest("table").wrap('<div class="cat-table" />');

par :

Code:

  /* entoure les catégories d'un <div class="cat-table" /> */
  $("dd.dterm").closest("div.forabg").wrap('<div class="cat-table" />');

Validez et le tour est joué.

[Pierre43]

Ça marche niquel merci beaucoup