Header
Partagez | 

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

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

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

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
-
» [Résolu] une anime sous forme d'un arbre de recherche
» Enigme musicale N°49.......sous forme de Quizzz
» Vos stats ADSL sous forme de Widget (Mac)
» Calcul d'expressions saisies sous forme de chaîne.
» { Sujet résolu }  Faire apparaître les sous forum (sur les forums) sous forme de lien
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+