Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: [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é.
 

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Afficher les champs de profil sous forme de phrase(s)
» [Résolu] une anime sous forme d'un arbre de recherche
» cacher/afficher le profil sous l'avatar
» Enigme musicale N°49.......sous forme de Quizzz
» Vos stats ADSL sous forme de Widget (Mac)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants