AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -85%
HETP [Noire et Rouge HX-Y8] Batterie Externe 25800mah
Voir le deal
23.05 €

    Cacher/révéler certains forums de différentes catégories (onglets)

    Onyx
    Onyx
    FémininAge : 26Messages : 3311

    le Mar 20 Sep 2016 - 6:38




    Cacher/révéler certains forums de différentes catégories (onglets)


    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.


    Vos catégories doivent avoir la hiérarchie "Séparer sur l'index : Moyen".
    Mettre un crédit vers Never-Utopia est obligatoire.


    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    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:


    Salut!

    Si vous avez ces versions de forum, le fonctionnement sera un peu différent.

    Tout d'abord, dans le template, retrouvez cette balise :
    Code:
    <!-- BEGIN forumrow -->

    Si la première balise directement après n'est pas une balise "tr", ignorez ce spoiler et suivez les instructions normales pour cette partie.

    Si c'est une balise "tr", ajoutez ceci directement avant la balise "tr" :
    Code:
    <tr style="display: none;"><td><a class="forum_distribution" href="{catrow.forumrow.U_VIEWFORUM}"></a></td></tr>



    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

    Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


    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:


    Salut!

    Si vous n'avez pas utilisé la technique du spoiler dans la section d'avant, parfait, ne lisez pas ce spoiler et utilisez la méthode normale.


    Sinon, utilisez ce javascript :
    Code:
    $(function(){

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

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

      function rendreinvisible() {
        for (z = 0; z < tableauop.length; z++) {
          if ($('a.forum_distribution[href^="'+tableauop[z]+'"]').length > 0) {
            $('a.forum_distribution[href^="'+tableauop[z]+'"]').closest('tr').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]+'"]').closest('tr').next().css('display', 'table-row');
          }
        }
      }

     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();
          }
        }
      });

    });



    3. Personnaliser le javascript selon votre situation


    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 !


    Dernière édition par Onyx le Mar 4 Avr 2017 - 18:28, édité 2 fois



    TiGraou
    TiGraou
    MasculinAge : 26Messages : 243

    le Lun 3 Avr 2017 - 23:31

    Bonsoir,
    J'ai testé, en fait, il ne fonctionne que sur index-box modifié (c'est à dire, toutes les modifications ou les catégories qu'on trouve dans le LS) et non par défaut (tableau). C'est normal? :o

    Héhéhé, c'est réglé Cool
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2200

    le Mar 4 Avr 2017 - 15:30

    Merci pour le partage !
    Onyx
    Onyx
    FémininAge : 26Messages : 3311

    le Mar 4 Avr 2017 - 17:44

    TiGraou > J'ai vu, je fixe le problème cet aprèm ^^

    Edit : C'est fait ^^



    Yoshimasa
    Yoshimasa
    FémininAge : 32Messages : 35

    le Mer 29 Avr 2020 - 18:23

    Merci !!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mai 2020 - 13:52