Header

Partagez | 

[FA] Créer un profil sous forme d'onglets

Message Sujet: [FA] Créer un profil sous forme d'onglets   Sam 3 Jan - 9:38

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Tutoriel proposé et rédigé par sobade

Réaliser un profil sous forme d’onglets



Le but de ce tutoriel est de créer un profil qui sera séparé en onglets, comme ci-dessous :
Spoiler:
 

Il n’est pas trop difficile en soi mais il faut veiller à bien respecter toutes les étapes. N’hésitez pas en cas de questions, ma messagerie est là Very Happy À noter que chez certaines personnes il se peut que les onglets fonctionnent assez mal (problème d'actualisation notamment)

MODIFICATION DU TEMPLATE VIEWTOPIC_BODY


Nous allons donc séparer le profil en deux onglets : l'un contenant toutes les informations du profil (sexe, nombre de messages...) et l'autre la feuille de personnage. Mais on va d'abord créer nos onglets. Commencez par ouvrir un traitement de texte pour créer la structure. Pour cela, c'est un code tout simple :
Code:
<div class="systab">
<div>
    <span>TITRE ONGLET 1 </span>
  CONTENU ONGLET 1</div>
  <div class="selected">
    <span>TITRE ONGLET 2</span>
CONTENU ONGLET 2
  </div>
</div>
Ensuite, nous allons décortiquer un peu les informations relatives au profil pour mettre ce qu'il faut dans les onglets. Nous voulons toutes les informations du profil d'un côté, et la feuille RPG de l'autre. Pour la première partie, ce sont ces informations qui nous intéressent :
Code:
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
Elles contiennent en effet tout ce qu'il y a dans le profil (LABEL = les intitulés ; CONTENT = le contenu : SEPARATOR : la séparation entre les différentes lignes[/code]Maintenant que nous savons ça, il suffit de mettre les éléments cités plus haut à leur place. ATTENTION : Pour le profil, ne surtout pas oublier la partie suivante, sinon le code ne marchera pas :
Code:
<!-- BEGIN profile_field --> <!-- END profile_field -->
Ce qui nous donnera donc :
Code:
<div class="systab">
<div>
    <span>PROFIL</span>
    <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field --></div>
  <div class="selected">
    <span>RPG</span>{postrow.displayed.POSTER_RPG}
  </div>
</div>
Nous avons maintenant nos onglets et le contenu. À présent retournons sur le template pour tout mettre en place. Il va falloir placer nos onglets à l'endroit où était placé le profil basique auparavant, c'est à dire qu'il faut remplacer ce code :
Code:
<!-- 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}
par le code précédemment crée. Vous validez, publiez le template (évitez de prévisualiser) et... ça ne marche pas vraiment.

UN PEU DE JAVASCRIPT


Pour que des onglets fonctionnent, il faut du Javascript. Direction Modules >> HTML & Javascript >> Gestion des codes Javascript. pensez bien à activer le Javascript, puis créez un nouveau code à placer sur les sujets uniquement. Ensuite rentrez ce code, il n'est pas de moi et vient directement du Forum des Forums :
Code:
$(function(){
  var d=function(){if($(this).is(".selected")) return;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])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(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")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> 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)
});
On valide, et c'est fini.

ET MAINTENANT LE PLUS DROLE : LE CSS


Pas tout à fait fini en fait ^^ Il faut du CSS. Collez ce code dans votre CSS, et personnalisez à votre goût ^^
Code:
/* les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}
/* les onglets survolés */
.systab .tab:hover {
  background: #b8efa1;
  color: #487f31;
  border-color: #487f31;
}
/* les onglets sélectionnés */
.systab .tab.selected{
  color: #ccc;
  background: #333;
}
/* contenus associés aux onglets  */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  padding: 10px;
}
/* style des onglets */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs  */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}

Le tuto est maintenant terminé Smile

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].

Citation :
Je soussigné(e), sobade., accepte qu'un directeur reposte le tutoriel "Réaliser un profil sous forme d’onglets" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[FA] Créer un profil sous forme d'onglets
Page 1 sur 1
 Sujets similaires
-
» [Messages privés] Afficher les MP sous forme de "sujets privés"
» Catégories sous forme de menu ?
» backup sous forme d'archive?
» Profil sous avatars
» [Permissions] Mettre les permissions dans le PA sous forme de tableau intéractif
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