Header

Partagez | 

[FA] Sous forum les uns en dessous des autres sur l'index

Message Sujet: [FA] Sous forum les uns en dessous des autres sur l'index   Sam 7 Déc - 9:51

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à mettre nos sous-forum les uns en dessous des autres (et non pas les uns à la suite des autres).
Spoiler:
 

Exclamation Dans ce tutoriel, je ne parlerai pas de "beau". Pour vos mises en forme, à vous de jouer tout seul Wink

Like a Star @ heaven Pré-requis : Uniquement avoir accès aux templates de votre forum.

Modification du template


Tout va se jouer dans le template index_box. On va donc commencer par l'ouvrir.

Idea Pour ce tutoriel, je pars du template par défaut, sans modification.

On repère cette partie, qui correspond à l'affichage des sous-forums
Code:
<span class="gensmall">
   {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
On va commencer par ajouter à ce span un id "sousForums"
Code:
<span class="gensmall" id="sousForums">
   {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
Ensuite, on va ajouter du JS à la suite. Pour cela, on l'écrira entre ces balises :
Code:
<script type="text/javascript">
   <!--
   
   /* Le code sera ici */
   
   //-->
  </script>

Tout d'abord, on va remplacer la virgule et l'espace par un retour à la ligne. Pour cela, on va dire au navigateur : "Tu récupères le code html des éléments ayant pour id 'sousForum' et tu remplaces les virgules par des br"
Code:
jQuery('#sousForums').html().replace(/, /g,'<br /> ')
Ensuite, tu remets ce nouveau code dans cet élément
Code:
jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br /> '))
et une fois que tu as fini, tu supprimes l'id
Code:
jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br /> ')).removeAttr('id');
Arrow On a donc ce js
Code:
<script type="text/javascript">
   <!--
   
   jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br /> ')).removeAttr('id');
   
   //-->
  </script>
qui est à poster juste après notre code dans le template, ce qui donne
Code:
<span class="gensmall" id="sousForums">
   {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>

<script type="text/javascript">
   <!--
   
   jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br /> ')).removeAttr('id');
   
   //-->
  </script>

Première partie terminée. Vos sous-forums se mettent bien les uns en dessous des autres.

Du JS pour corriger un bug


Mais voilà, catastrophe ! Si on s'arrête là, un problème se pose : si vous survolez l'un de vos sous-forum, il se peut que des balises disgracieuses apparaisseent :
Spoiler:
 

Rassurez-vous, Tatie Miettes a la solution ^^ Pour cela, nous allons faire un peu de javascript. Voyons tout ça ensemble.

Une fois la page chargée
Code:
jQuery(document).ready(function(){
On va, pour chaque lien ayant pour class "gensmall", créer une fonction.
Code:
jQuery('a.gensmall').each(function () {
Celle-ci "dira" au navigateur : tu vas récupérer le contenu de l'attribut "title" de ce lien "gensmall"
Code:
var texte = jQuery(this).attr('title') ;
si ce "title" existe bel et bien, alors tu feras un petit quelques choses. Cette condition se traduit tout simplement par "si texte existe" :
Code:
if(texte){

}
Dans ce cas, tu remplaceras les balises qui nous gènent (c'est à dire la balise lien (a) et les retours à la ligne (br) ).
Code:
texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
et tu ré-injecteras le nouveau contenu title dans l'attribut du lien
Code:
jQuery(this).attr('title', texte);
Arrow Au final, on aura ce js :
Code:
jQuery(document).ready(function(){
 jQuery('a.gensmall').each(function (){
 var texte = jQuery(this).attr('title') ;
 if(texte){
 texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
 jQuery(this).attr('title', texte);
 }
 });
});
Et il vous suffit d'ajouter ce code à la suite du javascript que nous avons ajouté dans le template, ce qui nous donne :
Code:
<script type="text/javascript">
   <!--
   jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br /> ')).removeAttr('id');
   jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
   });
   //-->
  </script>



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ée, Miettes, accepte qu'un directeur reposte le tutoriel "[FA] Sous forum les uns en dessous des autres sur l'index" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Sous forum les uns en dessous des autres sur l'index
Page 1 sur 1
 Sujets similaires
-
» Sous-forum l'un en dessous de l'autre
» Mettre les sous forums les uns en dessous des autres
» [VALIDER]Faire un sous-forum pour le PHP/HTML
» Icone de sujet différent sur un sous-forum
» Faire passer les sujets au dessus des sous-forum.
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens