Header
Partagez | 

Catégories rétractables

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: Catégories rétractables   Mar 29 Avr - 9:47

Catégories rétractables.


Salut les Chou'x
Dans ce tutoriel, nous allons apprendre à faire en sorte que nos catégories soient rétractable et à l'installer sur Xooit ainsi que sur ForumActif.

Voici un aperçu du rendu :
Ouvert:
 
Fermé:
 

Idea Pour ce tutoriel, je considére que mes templates sont ceux par défaut, donc non modifiés.

On va d'abord voir où on va installer notre js, et ensuite, on fera le script magique.

Mise en place sous Xooit



Pour commencer, ouvrez le template index_body.
Ici, on va devoir un peu changer le code. C'est cette partie qui va nous intéresser :
Code:
<table align="center" width="92%" cellpadding="2" cellspacing="1" border="0" class="forumline">
      <tr>
      <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
      <th width="50" class="thTop" nowrap="nowrap"> {L_TOPICS} </th>
      <th width="50" class="thTop" nowrap="nowrap"> {L_POSTS} </th>
      <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
      </tr>
      <!-- BEGIN catrow -->
      <tr>
      <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
      <td class="rowpic" colspan="3" align="right"> </td>
      </tr>
      <!-- BEGIN forumrow -->

1 :: on déplace le "begin catrow" (qui correspond au début de la catégorie) pour le placer avant le tableau
Code:

    <!-- BEGIN catrow -->
    <table align="center" width="92%" cellpadding="2" cellspacing="1" border="0" class="forumline">
      <tr>
      <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
      <th width="50" class="thTop" nowrap="nowrap"> {L_TOPICS} </th>
      <th width="50" class="thTop" nowrap="nowrap"> {L_POSTS} </th>
      <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
      </tr>
      <tr>
      <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
      <td class="rowpic" colspan="3" align="right"> </td>
      </tr>
      <!-- BEGIN forumrow -->

2 :: on va maintenant placer le titre de la catégorie en en-tête de tableau (th) et on va supprimer la case qui est sur la même ligne que le titre de la catégorie
Code:

    <!-- BEGIN catrow -->
    <table align="center" width="92%" cellpadding="2" cellspacing="1" border="0" class="forumline">
      <tr>
      <th class="catLeft" colspan="5" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
      </tr>
      <tr>
      <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
      <th width="50" class="thTop" nowrap="nowrap"> {L_TOPICS} </th>
      <th width="50" class="thTop" nowrap="nowrap"> {L_POSTS} </th>
      <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
      </tr>

      <!-- BEGIN forumrow -->

3 :: Maintenant, on prend notre javascript que l'on va placer à coté du titre des catégories.
Code:

    <!-- BEGIN catrow -->
    <table align="center" width="92%" cellpadding="2" cellspacing="1" border="0" class="forumline">
      <tr>
      <th class="catLeft" colspan="5" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span> <img onClick="i= 0;e=this.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right" /></td>
      </tr>
      <tr>
      <td colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
      <td width="50" class="thTop" nowrap="nowrap"> {L_TOPICS} </th>
      <td width="50" class="thTop" nowrap="nowrap"> {L_POSTS} </th>
      <td class="thCornerR" nowrap="nowrap"> {L_LASTPOST}&nbsp;</th>
      </tr>

      <!-- BEGIN forumrow -->

Validez, et voilà, vos catégories sont rétractables !

Mise en place sous ForumActif


On va commencer par ouvrir le template index_box. On va ensuite repérer cette partie :
Code:
    <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
On va tout simplement rajouter notre javascript après
Code:
{L_LASTPOST}

Ce qui va nous donner :

Code:
    <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right" /></div></th>
Un peu plus rapide que sous Xooit du coup Wink

On fait donc enfin le JS


On va maintenant voir le code qui va nous permettre de rétracter nos catégories. Le voilà :
Code:
<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right" />
Vous me connaissez, j'ai toujours envie de tout expliquer. Alors on va essayer de déchiffrer le javascript Smile
Code:
onClick=""
Arrow Facile : quand on clique Smile
Code:
i= 0;
Arrow On initialise une variable "i" qui contient 0
Code:
e=this.parentNode.parentNode.parentNode.childNodes;
Arrow et on crée une variable "e" qui va contenir un tableau. Pour bien comprendre son parcours : On part de l'image sur laquelle on a cliqué (this), on remonte d'une balise (donc on va au th), on remonte encore d'une balise (tr), et ensuite d'une balise (table). Ensuite, quand on est au table, on retient toutes les premières balises qu'on rencontre (en gros ici, ce sera tous les TR)
Idea parentNode = noeud parent = balise dans laquelle on est. Donc pour la balise img = le th ; pour le th = le tr ; pour le tr = le table
Idea childNodes = noeuds enfants = toutes les premières balises que contient notre balise. Pour le table = tous les tr ; pour les tr = tous les TD qu'ils contiennent
Code:
while(++i<e.length)
On parcourt notre tableau e (e.length = la longueur de e) et, on ajoute 1 à i à chaque fois qu'on fait une ligne du tableau (tant que (while) i incrémenté de 1 (i++) reste inférieur à la longueur de e (< e.length ))
Code:
if(e[i].tagName=='TR')
Si jamais (id), le nom de la balise (tagName) de ma ligne correspond à tr
Code:
e[i].style.display=
dans ce cas, je regarde le display de cette ligne.
Code:
(e[i].style.display=='none')?'':'none';
Si jamais le display est sur "none", j'efface le "none" (pour afficher la ligne et donc, la catégorie). En revanche, si c'est autre chose que "none", je remplace le display actuelle par "none" (pour cacher la ligne et donc, la catégorie).
Code:
this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';
Ensuite, je remplace le src de mon image (this = l'image sur laquelle j'ai cliqué). Si mon image est le - alors je la remplacer par le + et si jamais c'est le plus, je la remplace par le moins.

Et voilà ! Vous avez votre script !

Attention, sous FA, on a un noeud parent en plus par rapport au javascript de base : il y a la div en plus qui va nous embêter. Du coup au lieu d'avoir :
Code:
this.parentNode.parentNode.parentNode.childNodes
On va avoir
Code:
this.parentNode.parentNode.parentNode.parentNode.childNodes
Le javascript final est donc :
Code:
<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right" />

Et notre "th" devient donc :
Code:
    <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right" /></div></th>

On valide, on publie, et le tour est joué !

Et pour que tout soit fermé par défaut ?



Rien de plus simple ! On va allez juste après notre JS et prendre la balise d'ouverture de ligne (donc tr) et lui dire qu'on veut que ce soit caché : display:none.

Ce qui donne :
Code:
 </tr>
      <tr style="display:none">

Et le tour est joué !







Nous, soussignées, Tite-May et Miettes, acceptons qu'un directeur reposte le tutoriel "Catégories rétractables" tel que nous l'avons rédigé.

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].
Revenir en haut Aller en bas
Catégories rétractables
Page 1 sur 1
 Sujets similaires
-
» [Nocturne] Demande: les catégories
» [Annulée] Demande de description des catégories.
» ['Christa] Regrouper les catégories en Onglet
» Niveau des catégories...
» [Phantasmagoria] Modification des catégories
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+