Salut !

Sur le thème actuel (septembre 2016), il est possible de cocher/décocher les différents types de forums sur le menu afin de cacher/révéler les forums qui parlent uniquement de RPG, codage ou graphisme, même s'ils font partie de plusieurs catégories. Ce tutoriel vous permettra de faire la même chose avec l'option de garder vos choix en mémoire pour que vous n'ayez pas besoin cacher/révéler les forums que vous voulez à chaque fois que vous rechargez la page.

Exemple d'application :
Disons que vous avez un forum pirate et que vous avez séparé les catégories selon les parties du monde (Asie, Europe, Amérique, etc.). Seulement, certains forums sont principalement utilisés par pirates, d'autres par la marine, d'autres par les civils et d'autres par tout le monde. Histoire de faciliter la vie à tout le monde, vous décidez d'installer le système pour que les membres aient le choix de cocher/décocher les forums qu'ils veulent voir ou non.

Ce LS est en quatre parties.

• Tout d'abord, nous allons modifier un peu les catégories pour ajouter le système d'onglets.
  
• Puis, nous allons ajouter le javascript qui permet de faire fonctionner cette astuce.
  
• ensuite, nous allons voir comment personnaliser le javascript avec vos onglets.
  
• Enfin, nous allons styliser un peu les onglets avec du CSS.

1. Ajout du système d'onglet (Template Index_Box)

Nous allons commencer par aller dans les templates, plus précisément dans le template "index_box".

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BOX

Puis, tout en haut du template, on va ajouter ceci :

Code:

<table id="selector">
  <tr>
    <td class="selectoroption">Nom onglet 1</td>
    <td class="selectoroption">Nom onglet 2</td>
    <td class="selectoroption">Nom onglet 3</td>
  </tr>
</table>

Je pense que je n'ai pas besoin de vous expliquer comment ajouter/modifier/enlever des onglets, c'est pas mal explicite u_u

---

Maintenant, on va entourer chaque forum d'une div pour bien les sélectionner et on va mettre un lien pour les identifier.

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Ensuite, trouvez ceci :

Code:

<!-- BEGIN forumrow -->

Et ajoutez ceci juste après :

Code:

<a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}" style="display: none;"></a><div>

Enfin, trouvez ceci :

Code:

<!-- END forumrow -->

Et ajoutez ceci juste avant :

Code:

</div>

Spoiler pour PunBB et phpBB2:

2. Ajouter le javascript

Maintenant que les onglets ont été créés, on va aller ajouter le javascript.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES CODES JAVASCRIPT



Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système d'onglets de forum".
On choisit le placement "Sur toutes les pages".

ATTENTION : Si vous utilisez PunBB ou phpBB2 et que vous n'avez jamais modifié vos templates ou que vos catégories sont encore codées avec des tableaux (balises table), allez dans le spoiler plus bas.

Enfin, on met le javascript suivant et on enregistre :

Code:

$(function(){

  var nbselectoroption = $('#selector').find('.selectoroption').length;
  var tableauop = [];
  var localname;
  var optionindex;
  var queloptionquel;

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }

  function rendreinvisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'none');
      }
    }
  }

  function rendrevisible() {
    for (z = 0; z < tableauop.length; z++) {
      if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
        $('a.forum_distribution[href^="'+tableauop[z]+'"]').next().css('display', 'block');
      }
    }
  }

 if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

  $('.selectoroption').click(function(){
    if (nbselectoroption > 0) {
      queloptionquel = $(this);
      optionindex = queloptionquel.index();
      localname = 'option' + optionindex;
      if (queloptionquel.hasClass('selectoroption_hidden')) {
        localStorage.setItem(localname, "Visible");
        queloptionquel.removeClass('selectoroption_hidden');
        nomsforum();
        rendrevisible();
      }
      else {
        localStorage.setItem(localname, "Invisible");
        queloptionquel.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  });

});

Spoiler pour PunBB et phpBB2:

La première étape est d'aller regarder ce bout de code :

Code:

  function nomsforum() {
    if (optionindex == 0) { /*Onglet 1*/
      tableauop = [
        "/f2-", /*1er forum à enlever ou rajouter dans onglet 1*/
        "/f6-", /*2e forum à enlever ou rajouter dans onglet 1*/
      ];
    }
    else if (optionindex == 1) { /*Onglet 2*/
      tableauop = [
        "/f1-", /*1er forum à enlever ou rajouter dans onglet 2*/
        "/f10-", /*2e forum à enlever ou rajouter dans onglet 2*/
      ];
    }
  }

En gros, cette fonction associe les onglets à certains forums pour que le reste du javascript sache quel forum cacher/révéler et quand.

Pour rajouter un onglet, vous rajoutez cette partie avant le dernier } de la function :

Code:

    else if (optionindex == W) { /*Onglet Y*/
      tableauop = [
        "/fZ-", /*1er forum à enlever ou rajouter dans onglet Y*/
        "/fZ-", /*2e forum à enlever ou rajouter dans onglet Y*/
      ];
    }

Pour personnaliser le truc :
Le "W" est le numéro de l'onglet moins 1, donc si vous êtes au 3e onglet, vous remplacez le "W" par "2".
Le "Y" est le numéro de l'onglet.
Le "Z" est le numéro du forum à cacher/révéler. Pour savoir quel nombre mettre, allez sur le forum en question et regardez l'adresse url. Elle sera sous cette forme "http://nomduforum.com/f14-trucquelconque". Juste après le /f vous avez un nombre. C'est ce nombre là que vous devez mettre à la place du "Z".

Je pense que vous comprenez le principe ^^

---

Pour ceux qui ne veulent pas que la décision de cacher/révéler des forums reste en mémoire dans leur navigateur, vous pouvez enlever cette option en supprimant ce bout de code :

Code:

  if (nbselectoroption > 0) {
    for (i = 0; i < nbselectoroption; i++) {
      optionindex = i;
      var forlocalname = 'option' + i;
      var visibleounon = localStorage.getItem(forlocalname);
      if (visibleounon == "Invisible") {
        var queloption = $('.selectoroption').eq(i);
        queloption.addClass('selectoroption_hidden');
        nomsforum();
        rendreinvisible();
      }
    }
  }

3. Mettre en forme les onglets (CSS)

Vous remarquez, sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme les onglets à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :

Code:

/*Bloc qui entoure les onglets*/
#selector {
  margin: 10px auto 10px auto;
  width: 100%;
  border-spacing: 5px;
  background: #353535; /*Couleur de fond*/
  border: none;
}
/*Onglets actifs*/
.selectoroption {
  padding: 5px;
  background: #656565; /*Couleur de fond*/
  color: #dfdfdf; /*Couleur de la police*/
  font-family: 'Cambria';
  font-size: 14px;
  opacity: 1;
  text-align: center;
  cursor: pointer;
}
/*Onglets non-actifs*/
.selectoroption_hidden {
  opacity: 0.5;
}

---

C'est tout! Si jamais vous avez des problèmes avec cette astuce, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez modifier le fonctionnement de l'astuce et que vous avez besoin d'aide.

À plus !