Header

Partagez | 

[FA] Diviser/Séparer les champs du profil

Message Sujet: [FA] Diviser/Séparer les champs du profil   Lun 21 Mar - 11:45

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

Dans ce tutoriel, nous allons voir comme séparer les informations du profil dans les messages, c'est-à-dire passer de ça :
Spoiler:
 
à ça
Spoiler:
 

Idea Pré-requis :
• Avoir accès aux templates ;
• Avoir des connaissances de base en html & CSS ;
• Ce tutoriel peut s'adapter à toutes les versions.

Pour ce tutoriel, je pars des templates de base de chaque version Smile




Concept

Dans chacun de mes exemples, je vais déplacer certains champs d'informations du profil dans un bloc qui s'ouvrira / se fermera au clic sur un lien.

Voici le js utilisé pour cet effet (à utiliser sur les "sujets") :
Code:

$( function(){
   $('body')
      .on('click', '.elt-declancheur', function(){
         if($(this).next(".afficher-masquer").is(":hidden")){
            $(this).text("Masquer le profil");
            $(".afficher_masquer").slideUp();    
              $(this).next(".afficher-masquer").slideDown();
            }else{
               $(this).text("Afficher le profil");
               $(this).next(".afficher-masquer").slideUp();
            }
      });
});

Modification du template

Quelque soit la version de ton forum, la modification sera la même et sera à faire dans le template "viewtopic_body".

On va commencer par entourer les champs du profil avec une balise ayant une classe. On va donc remplacer ça :
Code:
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
Par ça :
Code:
<!-- BEGIN profile_field -->
            <div class="infos-posteur">
               {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            </div>
            <!-- END profile_field -->

Ensuite, on va aller placer où on le veut le "receptacle" des infos à bouger. Ce code se présentera sous cette forme :
Code:

<div class="elt-declancheur">
   Masquer le profil
</div>
<div class="afficher-masquer infos-supp" style="display: none;"></div>
à placer où tu veux Smile

On enregistre et on publie.

C'est tout pour les templates ^^

Le Javascript

C'est ici que ça va différer en fonction de la version Smile Mais je le préciserai à chaque fois.

Au chargement de la page :
Code:
jQuery(function () {});

On va parcourir chaque champs des profils :
Code:
$( "CHEMIN" ).each(function( index ) {});
Idea Ici, j'indique CHEMIN car, tout va dépendre de :
• la version de ton forum,
• de la structure de ton template.

Pour savoir quoi indiquer, ouvre une page de sujet de ton forum et clique sur "F12" dans ton navigateur.
Une fenêtre s'ouvre avec la structure de ta page. Il ne te reste plus qu'à repérer le chemin à suivre. Par exemple, pour moi :
Spoiler:
 
CHEMIN = .post .postprofile .infos-posteur


Sélecteurs par défaut :

phpBB2 : .post .postdetails.poster-profile .infos-posteur
phpBB3 : .post .postprofile .infos-posteur
PunBB : .post .postbody .user-info .infos-posteur
Invision : .post .postbody .user-info .infos-posteur

Ensuite, on récupére le contenu des champs :
Code:
var champs = $(this).find('.label > span:first-child').html() ;

On teste ensuite si le texte du champs correspond ou non à l'élement qu'on veut isoler. Pour cela, on va devoir noter "à la main" chaque intitulé de champs à déplacer :
Code:
if( champs == "TEXTE 1" || champs == "TEXTE 2"){ };
Idea Ici, à toi de remplacer les intitulés de tes champs ; par exemple, pour moi :
Code:
if( champs == "Localisation" || champs == "Emploi/loisirs"){ };

Enfin, on va déplacer ça dans notre bloc "infos-supp" :
Code:
$(this).parents('.post').find('.infos-supp').append(this);
(ici, parents('.post') = je pars de mon élement, et je vais trouver son parent qui a la classe "post" Smile )

Et c'est tout ^^ Du coup, on a un js qui ressemble à ça à la fin :
Code:
jQuery(function () {
    // On parcourt chaque champs des profils
    $( ".post .postdetails.poster-profile .infos-posteur" ).each(function( index ) {
        // On récupére le contenu html de ces champs
        var champs = $(this).find('.label > span:first-child').html() ;
 
        // On teste sur le champs correspond aux blocs qu'on veut isoler
        // pour info || signifie "ou"
        if( champs == "Localisation" || champs == "Emploi/loisirs"){
            // Je déplace le contenu dans le bloc masqué après le bloc "afficher/masquer"
            $(this).parents('.post').find('.infos-supp').append(this);
 
        }
 
    });
});

Et qu'on va afficher sur les sujets.

Zioup là ! Le tour est joué ^^




Tu rencontres un souci avec ce tutoriel ? Viens poser ta ou tes questions [ici]

Idea N'oublie pas de lire et de suivre les règles de la section



Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[FA] Diviser/Séparer les champs du profil" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Diviser/Séparer les champs du profil
Page 1 sur 1
 Sujets similaires
-
» Les barres dans Champs du profil
» [Membres] Autoriser le BBcode dans les champs du profil
» Template pour les champs de profil créés
» Impossible de supprimer/ajouter des champs au profil des utilisateurs
» Mots des champs du profil et de la feuille rpg
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