Catégorie par onglet

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Catégorie par onglet

Message par Pierre43 le Sam 1 Nov 2014 - 16:30

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 :
http://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


Dernière édition par Pierre43 le Jeu 6 Nov 2014 - 18:04, édité 1 fois

Pierre43
Nouveau membre

Masculin
Messages : 29
Inscrit(e) le : 24/04/2012

http://www.horde-orugaron.com/
Pierre43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie par onglet

Message par Pierre43 le Lun 3 Nov 2014 - 16:29

Up

Pierre43
Nouveau membre

Masculin
Messages : 29
Inscrit(e) le : 24/04/2012

http://www.horde-orugaron.com/
Pierre43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie par onglet

Message par Pierre43 le Mer 5 Nov 2014 - 21:09

Up

Pierre43
Nouveau membre

Masculin
Messages : 29
Inscrit(e) le : 24/04/2012

http://www.horde-orugaron.com/
Pierre43 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie par onglet

Message par Neptunia le Mer 5 Nov 2014 - 22:52

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é.

Neptunia
+ Hyperactif +

Féminin
Messages : 10937
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Catégorie par onglet

Message par Pierre43 le Jeu 6 Nov 2014 - 18:04

Ça marche niquel merci beaucoup Smile

Pierre43
Nouveau membre

Masculin
Messages : 29
Inscrit(e) le : 24/04/2012

http://www.horde-orugaron.com/
Pierre43 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum