INKED BY STARS


 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le deal à ne pas rater :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
Voir le deal

 

 PROFIL EN ONGLETS + ISOLER LES CHAMPS.

Aller en bas 
AuteurMessage
Velunes
bokaozize
Velunes

/* 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
/* ou celle-çi*/Onglet 3

PROFIL EN ONGLETS + ISOLER LES CHAMPS. Empty
MessageSujet: PROFIL EN ONGLETS + ISOLER LES CHAMPS.   PROFIL EN ONGLETS + ISOLER LES CHAMPS. EmptyLun 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)

JAVASCRIPT
Panneau 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 PROFIL

JAVASCRIPT
Panneau 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
Revenir en haut Aller en bas
 
PROFIL EN ONGLETS + ISOLER LES CHAMPS.
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
INKED BY STARS :: Codes & Javascript-
Sauter vers: