Partagez | 
 

 [Formactif] Catégories à onglets automatiques

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

Theoz

Doyen

Bons Points (BP) : 60
MessageSujet: [Formactif] Catégories à onglets automatiques   Sam 13 Sep - 19:18
Forumactif
Catégories à onglets automatiques
Bonjour ! Smile
Dans ce tutoriel, on va apprendre à faire des catégories en onglets, mais automatiques. C'est-à-dire qu'à chaque catégorie créée, un nouvel onglet sera créé automatiquement : plus besoin de rajouter les onglets "à la main", ou de mettre des messages d'alertes : "Vous ne pouvez pas accéder à cette zone", qui, avouons-le, sont souvent disgracieux.
Voici donc ce que nous allons créer :
Spoiler:
 
Bien sûr, on va surtout se concentrer sur le système d'onglets dans ce tutoriel.

Prérequis :
  • Être le fondateur du forum
  • Avoir un forum en phpBB2 ou phpBB3
  • Se débrouiller un peu avec les templates


Les templates


Commençons par les templates. On va bosser sur le template index_box. Pour le modifier, direction le panneau d'administration, Affichage, Templates, Général. Smile
On va commencer par mettre au tout début du template une liste HTML vide, qui contiendra nos onglets :
Code:
<ul id="onglets"></ul>
On placera nos onglets un peu plus tard, à l'aide de Javascript.
A la suite de cette liste, on va placer les phrases d'informations & liens de Forumactif :
Spoiler:
 
Ce code est déjà dans votre template, il s'agit de :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
Ensuite, on ouvre un tableau qui contiendra nos catégories :
Code:
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table class="categorie_perso">
<!-- END tablehead -->
Les commentaires (texte entre «!-- et --») indiquent, dans l'ordre, l'ouverture des catégories, l'ouverture de la table des catégories, et la fin de l'ouverture des catégories. Il ne faut pas les enlever pour que le code fonctionne. Wink
On va ensuite mettre un code Javascript, mais on y reviendra après. On va donc simplement mettre en attendant :
Code:
<script type="text/javascript">
</script>
On va mettre maintenant nos catégories (il était temps !). Le but principal du tutoriel n'est pas d'apprendre à faire des catégories, on va donc passer rapidement dessus. Voici mes catégories :
Code:
<h1 class="titre_cat">{catrow.cathead.CAT_TITLE}</h1>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <h2 class="titre_fofo">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}" style="color: #431414; font-size: 15px;">{catrow.forumrow.FORUM_NAME}</a>
      </h2>
      <div class="image_illustration">{catrow.forumrow.FORUM_DESC}</div>
      <div class="description_fofo">{catrow.forumrow.FORUM_DESC}</div>
      <div class="infos_fofo">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br /><br />
        <p class="last_message">{catrow.forumrow.LAST_POST}</p>
      </div>
      <br style="clear: both;" />
      <p class="sous_fofo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</p>
      <br /><br />
Pour vous aider à réaliser vos catégories, voici les variables disponibles : [clic].

Pour finir, on referme notre catégorie et notre table :
Code:
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
  </td></tr>
  <!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table>
<!-- END tablefoot -->
<!-- END catrow -->
Encore une fois, les commentaires sont importants. Smile

Notre template sera donc au final :
Code:
<ul id="onglets">
</ul>
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<table class="categorie_perso">
<!-- END tablehead -->
<!-- BEGIN cathead -->
  <script type="text/javascript">
  </script>
      <h1 class="titre_cat">{catrow.cathead.CAT_TITLE}</h1>
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <h2 class="titre_fofo">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}" style="color: #431414; font-size: 15px;">{catrow.forumrow.FORUM_NAME}</a>
      </h2>
      <div class="image_illustration">{catrow.forumrow.FORUM_DESC}</div>
      <div class="description_fofo">{catrow.forumrow.FORUM_DESC}</div>
      <div class="infos_fofo">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br /><br />
        <p class="last_message">{catrow.forumrow.LAST_POST}</p>
      </div>
      <br style="clear: both;" />
      <p class="sous_fofo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</p>
      <br /><br />
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
  </td></tr>
  <!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table>
<!-- END tablefoot -->
<!-- END catrow -->

Le CSS


Pour le CSS, on va simplement cacher nos catégories. Eh oui, n'oublions pas que nos catégories sont à onglets, et donc par défaut, elles ne sont pas visibles. Pour cela, rendez-vous sur le panneau d'administration, Affichage, Couleurs, Feuille de style CSS. Pour cacher les catégories, on va utiliser ce code :
Code:
.categorie {
display: none;
}

On va maintenant faire en sorte que nos futurs onglets soient alignés et centrés (comme les catégories présentées au début du tutoriel). Pour cela, on va utiliser ce code :
Code:
ul#onglets {
    text-align: center;
}
ul#onglets li {
    list-style-type: none;
    display: inline-block;
}

On peut maintenant passer au javascript.

Le javascript


Cette partie est la plus complexe, mais elle permet d'afficher le nom des onglets, et d'afficher - ou non - les catégories. Elle est donc importante !
Tout d'abord, dans "Modules", "Gestion des codes Javascript", on va les activer s'ils ne le sont pas. Pour cela, il suffit simplement de cliquer sur "Oui", et de valider. Smile
Spoiler:
 
Ensuite, on va créer un nouveau code javascript qui s'appellera "Catégories en onglets" et dont le placement sera sur l'index.
On va commencer par créer une variable qui correspondra au numéro de la catégorie. A chaque catégorie, le nombre contenu dans la variable augmentera. La 1ère catégorie sera la numéro 1, donc on va mettre 1 en valeur pour cette variable :
Code:
var numCat = 1;
(j'ai choisi en nom numCat, mais ça aurait pu être n'importe quel nom.)

On va ensuite créer une fonction qui permettra de changer d'onglets :
Code:
function changeContenu(onglet) {

}
Dans un premier temps, on va compter le nombre de catégories qu'il y a en comptant le nombre de class "categorie" :
Code:
    var nbCat = $(".categorie").length;
Ensuite, on va demander de cacher toutes les catégories. Pour cela, on utilise une boucle qui dit : "i = 0. Le temps que i est inférieur au nombre de catégories, on ajoute 1 à i et on cache la catégorie numéro i :
Code:
    for(var i = 0; i < nbCat; i++) {
          document.getElementsByClassName('categorie')[i].style.display='none';
    }
Enfin, pour finir, il faut que l'on affiche la catégorie dont on a cliqué sur l'onglet. Pour cela, on recherche la catégorie en question, et on l'affiche simplement :
Code:
    document.getElementById('categorie' + onglet).style.display='block';
Notre code sera au final :
Code:
var numCat = 1;
function changeContenu(onglet) {
    var nbCat = $(".categorie").length;
    for(var i = 0; i < nbCat; i++) {
          document.getElementsByClassName('categorie')[i].style.display='none';
    }
    document.getElementById('categorie' + onglet).style.display='block';
}
Voilà, vous pouvez enregistrer votre script. Retournons maintenant dans le template. Rappelez-vous, un peu plus haut :
Citation :
On va ensuite mettre un code Javascript, mais on y reviendra après. On va donc simplement mettre en attendant :
Code:
<script type="text/javascript">
</script>
On va donc remplir cette partie.
Dans un premier temps, on ajoute l'onglet de la catégorie :
Code:
      $( "#onglets" ).append( "<li><a href=\"javascript:changeContenu(" + numCat + ")\">{catrow.cathead.CAT_TITLE}</a></li>" );
Ensuite, on va créer une condition : si le numéro de la catégorie que l'on va afficher est 1, alors on la rend visible, sinon, on la cache :
Code:
if(numCat == 1) {
        document.write('<tr class="categorie_perso"><td class="categorie" id="categorie' + numCat + '" style="display: block;">');
      } else {
        document.write('<tr class="categorie_perso"><td class="categorie" id="categorie' + numCat + '">');
      }
Cette partie : id="categorie' + numCat + '" permet de rendre unique chaque catégorie. La première catégorie aura un id categorie1, la seconde catégorie aura un id "categorie2", et ainsi de suite.

Pour finir, comme promis, on ajoute 1 à numCat, pour indiquer qu'après, on passe à la catégorie suivante :
Code:
numCat++;
Ce qui nous donne le code :
Code:
$( "#onglets" ).append( "<li><a href=\"javascript:changeContenu(" + numCat + ")\">{catrow.cathead.CAT_TITLE}</a></li>" );
      if(numCat == 1) {
        document.write('<tr class="categorie_perso"><td class="categorie" id="categorie' + numCat + '" style="display: block;">');
      } else {
        document.write('<tr class="categorie_perso"><td class="categorie" id="categorie' + numCat + '">');
      }
      numCat++;
Et voila, nos catégories sont terminées ! Smile
N'oubliez pas dans "Affichage", "Structure et hiérarchie" de conserver les catégories en mode "Moyen". Smile


Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Théoz, accepte qu'un directeur reposte le présent tutoriel "[Forumactif] Catégories à onglets automatiques" tel que je l'ai rédigé.
 

[Formactif] Catégories à onglets automatiques

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» ['Christa] Regrouper les catégories en Onglet
» [Nocturne] Demande: les catégories
» Disparition des onglets dans l'écran du Dispacher
» [Annulée] Demande de description des catégories.
» [ABANDON] Une page d'accueil à onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants