P2 - ISOLER LES CHAMPS DU PROFILJAVASCRIPTPanneau d'administration > Modules > Javascript > Créer un nouveau javascript > Cocher " Sur les pages".
- Code:
-
jQuery(function () {
// on indique la version du forum
// attention de bien respecter les écritures ci-dessous
// invision, phpbb2, phpbb3, punbb, Invision, ModernBB, AwesomeBB
var versionForum = 'phpbb2',
$chemin,
$eltParent = '.postdetails.poster-profile';
// On indique le chemin vers la balise qui contient les champs du profil
switch(versionForum){
// Si on est sur invision
case 'invision':
$chemin = ".post .postbody .user-info .infos-posteur";
break;
// Si on est sur phpbb2
case 'phpbb2':
$chemin = ".post .postdetails.poster-profile .infos-posteur";
break;
// Si on est sur punbb
case 'punbb':
$chemin = ".post .postbody .user-info .infos-posteur";
break;
// Si on est sur AwesomeBB
case 'AwesomeBB':
$chemin = ".post-wrap .post-body .post-aside .infos-posteur";
$eltParent = ".post-aside";
break;
// Si on est sur phpbb3, ModernBB, Invision
default:
$chemin = ".post_profil .infos-posteur";
break;
};
// Si la structure est différente de celle de base
// indiquer le bon chemin et
// décommenter (en supprimer // ) la ligne ci-dessous
// chemin = "ton chemin";
// On parcourt chaque champs des profils
$( $chemin ).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 == "TEXTE 1" || champs == "TEXTE 2"){
// Je déplace le contenu dans le bloc
$(this).parents($eltParent).find('.other').append(this);
}
});
});
LE CHEMIN:- Le chemin est ce qui permet au javascript de trouver exactement où se trouve les champs du profil à déplacer. Pour cela, il a besoin qu'on lui donne des références, qu'on lui montre le chemin en commençant du point le plus éloigné (le plus gros cadre jaune) jusqu'au point le plus près de la cible (en bleu).
- TEMPLATE:
- CE QUI DONNE:
Nous le renseignons donc dans le javascript :
- js / chemin = jaune:
---------
LE PARENT:Nous avons donc trouvé notre
"chemin", maintenant, le
javascript doit savoir où mettre les champs qu'on va déplacer.
Il a besoin de connaître le plus proche
"parent" de notre
"cible" (qui ici sera l'endroit où va atterrir les champs, donc notre 3e onglet nommé "other").
Nous pouvons donc voir dans les templates que le parent le plus proche est "postdetails poster-profile".
- template / parent = bleu / cible = vert:
Nous renseignons donc cette info dans le javascript, la partie en bleu :
- js / parent ($eltParent) = bleu / chemin = jaune:
Ce qui donne plus bas :
- parent = bleu / cible = vert:
- Citation :
- $(this).parents($eltParent).find('.other').append(this);
Cela veut dire que le javascript va trouver les champs choisis dans l'entièreté des champs du profil = $(this), les déplacer vers ($eltParent) = parent le plus proche de la cible = ('.other') et y coller les champs choisis = (this).
LES CHAMPS:1. Vous pouvez choisir quel champ vous allez déplacer dans le 3e onglet et vous pouvez en mettre autant que souhaité.
Vous devez impérativement écrire le nom du champ à la majuscule et bbcode près, le javascript étant sensible à cela.Référez-vous à la capture d'écran ci-dessous pour voir comment trouver les champs et comment vous les avez écrit.
- CAPTURE CHAMPS:
2. Dans mon tuto, j'ai choisi de déplacer les champs "Trigger" et "Warning", je vois que je les ai écrit avec une majuscule et sans bbcode.
3. Je retourne dans mon javascript et je descends jusqu'à ce code :
- Citation :
- if( champs == "TEXTE 1" || champs == "TEXTE 2"){
4. Que je modifie en ceci:
- Citation :
- if( champs == "Trigger" || champs == "Warning"){
5. Si je souhaite rajouter le champ "Rythme de rp" (se trouve juste au-dessus de celui de Trigger dans la capture d'écran), alors, je procède comme ceci:
- Citation :
- if( champs == "Trigger" || champs == "Warning" || champs == "Rythme de rp"){
L'ordre dans lequel les champs sont écrits n'a pas d'importance, ce qui est important c'est de respecter la mise en page du code et les majuscules.
/!\ /!\ /!\ /!\
Si vous souhaitez supprimer le nom du champ dans votre profil pour que, par exemple, dans le cas d'un gif, seul le gif s'affiche et pas "Image :", sachez que ce n'est PAS possible avec le tutoriel actuel.
Il a BESOIN que vous laissiez le "type d'affichage" en "Texte" (voir l'image ci-dessous).- CAPTURE:
Solutions :
1. Ne déplacez pas les champs que vous souhaitez mettre le type d'affichage en icône.
2.Vous pouvez cependant contourner cela grâce à du code et javascript, mais vous devrez quand même laisser le type d'affichage en texte. Ce tutoriel est en court d'écriture mais si vous vous sentez l'âme de tester par vous-même, voici le code que j'utilise :
CLIQUE ICI.
------------------
Codes et tutos utilisés pour cette explication :
Système d'onglets = Forum des forumsIsoler les champs par La Tambouille des râleuses 
Accueil 
