Velunes bokaozize
/* l'onglet qui sera d'office affiché en 1er dans le profil est sélectionné grâce au code : class="selected", si vous souhaité que ce soit un autre onglet qui soit sélectionné, déplacé ce bout de code à une autre div*/ Onglet 1 Messages : 445
Avatar : --
Multinick : --
Pseudo : --
Pronoun : --
/*soit cette div*/ Onglet 2
| Sujet: PROFIL EN ONGLETS + ISOLER LES CHAMPS. Lun 4 Jan - 20:19 | |
| Dans le template viewtopic_body, trouvez cet extrait (ligne 144): - Code:
-
<span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <!-- BEGIN profile_field --> {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR} <!-- END profile_field --> {postrow.displayed.POSTER_RPG} </span><br /> Et remplacez-le par celui-çi : - Code:
-
<span class="postdetails poster-profile"> {postrow.displayed.POSTER_RANK}<br /> {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br /> <div class="systab"> <div class="selected"> <span>Onglet 1</span> <span class="profil"> <!-- BEGIN profile_field --><div class="infos-posteur"> <span class="profil_label"> <!-- Champs du profil --> {postrow.displayed.profile_field.LABEL}</span> <!-- Contenu/réponses aux champs --> {postrow.displayed.profile_field.CONTENT} {postrow.displayed.profile_field.SEPARATOR} </div> <!-- END profile_field --> </span> </div> <div> <span>Onglet 2</span> <div class="rpg"><!-- Feuille de personnage -->{postrow.displayed.POSTER_RPG}</div> </div> <div> <span>Onglet 3</span> <div class="other"><!-- Les champs du profil seront déplacés ici --></div> </div> </div> </span><br /> PROFIL EN ONGLETS (SYSTAB)JAVASCRIPTPanneau d'administration > Modules > Javascript > Créer un nouveau javascript > Cocher " Sur les pages". - Code:
-
$(function() { // clic sur un onglet var d = function() { // si l'onglet est déjà actif, ne rien faire if ($(this).is(".selected")) return; // affiche le contenu correspondant et on met l'onglet en sélectionné var a = $(this).closest(".systab"); a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]); $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]) }; // pour chacun des systèmes d'onglets $("div.systab").each(function() { var a = $("> div", this).detach(), c = this, b; // on ajoute le conteneur d'onglet avant ou après ( si s_bottom ) $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>'); $(a).each(function() { b = $(this).children(":first"); b.is("span") ? ( $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove() }); $("> div.contents", this).append(a); b = $(".content:first,.content.selected", this).last(); $(b).addClass("selected").siblings().hide(); $(b).data("tab").addClass("selected") }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d) }); CSS - Code:
-
/*** ------------------------------- ***/ /*** PROFIL MISE EN PAGE --------------- ***/ .other, .profil { font-size: 10px !important; text-align:justify; line-height:normal;}
.other .label, .profil .label { color: #000; font-family: 'Source Sans Pro', sans-serif; line-height:normal; font-size:10px !important; font-weight: 700; text-transform: uppercase; }
.postdetailinfo { overflow-y: auto; height: 150px; } .rpg::-webkit-scrollbar, .profil::-webkit-scrollbar { width: 5px; } .rpg { margin-top:-15px; } .rpg textarea { width:190px; height: 100px; line-height:normal; font-family: 'Source Code Pro', monospace; font-size: 10px; }
/**/ input,textarea, select { border : 1px solid #F0EEED; }
/*** ------------------------------- ***/ /*** PROFIL SYSTEME ONGLET --------------- ***/ /* .systab .tab => les onglet */ .systab .tab { padding: 2px 10px; margin-left: 1px; color: #ccc; background: white; border: 1px solid #ccc; cursor: pointer; } /* .systab .tab:hover => les onglets survolés */ .systab .tab:hover { background: #fff; color: #939393; border-color: #fff; } /* .systab .tab.selected => les onglets sélectionnés */ .systab .tab.selected{ color: #ccc; border:1px solid #ccc; background: #fff; } /* .systab .contents => les conteneurs des contenus associés aux onglets */ .systab .contents { margin-bottom: 1px; color: #000; background: #fff; padding-top:5px; } /* style des onglets si ils sont à gauche ou à droite */ .systab.s_float .tab,.systab.s_float .tab { display: block; margin: 5px; } /* flottement des conteneurs si les onglets sont à gauche où à droite */ .systab.s_float .tabs,.systab.s_float .contents { float: left; }
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 masqué après le bloc "afficher/masquer" $(this).parents($eltParent).find('.other').append(this); } }); }); - Pour déplacer un champ, il faut écrire le nom de ce dernier à la place de "TEXTE 1". Si on voulait déplacer le champ "Location" par exemple, ça donnerait : - Citation :
- if( champs == "Location"){
Attention, le javascript est sensible aux majuscules, vérifiez que vos champs sont écrit de la même façon dans le profil et dans le js !- Pour rajouter des champs, il suffit de rajouter ce bout de code autant de fois que nécessaire : - Citation :
- || champs == "TEXTE"
Pour n'avoir que 2 onglets, supprimez l'onglet 3: - Code:
-
<div> <span>Onglet 3</span> <div class="other"></div> </div> et changez dans le javascript "isoler les champs du profil", cette partie: - Code:
-
$(this).parents($eltParent).find('.other').append(this); par - Code:
-
$(this).parents($eltParent).find('.rpg').append(this); ------------------ Codes trouvés sur : https://forum.forumactif.com/t310879-tableaux-a-onglets et https://tambouille-raleuses.forumactif.com/t2-diviser-separer-les-champs-du-profil | |
|