Header
Partagez | 

Faire un effet Afficher/masquer

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

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

Message Sujet: Faire un effet Afficher/masquer   Jeu 7 Avr - 13:21

Bonjour à tous Smile

Dans ce tutoriel, nous allons voir comment installer des éléments rétractable que notre forum soit sous ForumActif ou Xooit ou si nous souhaitons l'utiliser sur notre site. Voici un exemple de rendu : [Les Olympiades] (cliquer sur "Liste des participants").

Les bases



Pré-requis



Pour pouvoir réaliser ce tutoriel vous devez :

-> avoir quelques connaissances en html et css
-> avoir accès aux templates de votre forum
-> avoir un espace de stockage où envoyer des fichiers (si ce n'est pas le cas, je vous conseille de lire [ce tutoriel])

-> Attention, ceci ne fonctionne pas dans les messages si vous êtes sur un forum ForumActif. En revanche, si vous êtes sous xooit, vous pourrez utiliser ce code dans vos messages Wink

La prépration de la partie html



On va commencer par créer un élément qui va déclancher l'animation. Pour que le javascript sache qu'il doit jouer l'animation quand on clique sur cet élément, on va lui donner un nom (ici on va utiliser l'attribut html "class" qui permet de nommer des éléments pour leur appliquer du CSS par exemple. On utilise class plutôt qu'id car ce bout de code reviendra plusieurs fois dans la page au niveau des profils).

Pour cette exemple, je vais prendre un paragraphe.

Code:
<p class="elt_declancheur">Clique moi !</p>

Puis, on va mettre dans un bloc "div" a qui on donne un nom aussi la partie de code ou le message qu'on veut afficher/masquer

Code:
<div class="afficher_masquer">Mon texte qui s'affiche et se cache</div>

Voilà ! Le html est prêt. Rapide hein ^^

La prépration de la partie javascript



Maintenant, on va créer un nouveau fichier nommé "afficher_masquer.js". C'est ce fichier qui va contenir le code de l'animation.

Pour le créer, utilisez tout simplement un logiciel de type "bloc note" puis faire : fichier >> enregistrer sous >> afficher_masquer.js (n'oubliez pas le .js qui est très très important Wink )

On va commencer ce fichier par :

Code:
jQuery().ready(function(){

ce qui veut dire : "Dès que la page est chargée, je lis cette fonction"

Ensuite, on va dire :
-> Tu me caches tous les blocs qui ont comme nom de class (symbolisé par un . ) "afficher masquer"
Code:
$(".afficher_masquer").hide();

-> mais, si jamais on clique sur un truc qui a comme nom de class "elt_declancheur", tu fais cette fonction
Code:
  $(".elt_declancheur").click(function(){

-> D'abord, tu testes si le bloc a affiché est caché ou pas et s'il est caché
Code:
 if($(this).next("div").is(":hidden")){

-> tu caches tous les autres blocs qui ont comme nom de class "afficher masquer" grâce à un effet de slide vers le haut
Code:
$(".afficher_masquer").slideUp(); 

-> tu affiches le bloc que je t'ai demande, c'est à dire le div qui est après l'élement sur lequel j'ai cliqué (this). Cet affichage se fera grâce à un slide vers le bas
Code:
$(this).next("div").slideDown();

-> mais si jamais le bloc après le texte sur lequel j'ai cliqué était déjà affiché (donc le contaire de la condition citée plus haut)
Code:
}else{

-> dans ce cas, tu caches le bloc (div) qui est après le mot sur lequel je viens de cliquer (this)
Code:
$(this).next("div").slideUp();

Puis, on oublie pas de bien fermer les accolades Smile

------------

Au final, notre fichier afficher_masquer.js contient :

Code:
jQuery().ready(function(){
  $(".afficher_masquer").hide();
  $(".elt_declancheur").click(function(){
      if($(this).next("div").is(":hidden")){ 
      $(".afficher_masquer").slideUp();   
        $(this).next("div").slideDown();
      }else{
      $(this).next("div").slideUp();
      }
  });
});

Il ne vous reste plus qu'à héberger ce fichier sur votre espace de stockage.

Autres infos avant d'aller plus loin



Donc pour le moment on a :

-> le code html prêt
-> l'animation prête.

il ne reste plus qu'à lier les 2 Smile

Pour cela, on va faire en sorte que ce code puisse fonctionner sur tout le forum. On va donc l'intégrer à toutes les en-têtes des pages du forum. Pour cela, on va aller ouvrir le template "overall_header" (à comprender overall = sur tout ; header = en tete) quelque soit la plateforme sur laquelle est hébergée notre forum Smile

On va appeler 2 fichiers :

-> la bibliothéque jquery, qui contient les 2 fonctions dont on va avoir besoin (slideUp et slideDown)

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

-> le fichier que l'on vient de créer :

Code:
<script type="text/javascript" src="http://nom/afficher_masquer.js"></script>

(n'oubliez pas de remplacer "nom" par l'endoit où se trouve le fichier)

Ce qui fait :

Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://miettes.sop.voila.net/afficher_masquer.js"></script>

Pour l'utiliser sur votre site



Il vous suffit d'appeler ces 2 scripts entre les balises "head" de votre page html.

Pour les utilisateurs de FA



On va repérer ceci :

Code:
</head>
Et on copie colle les 2 scripts juste avant

On valide, on publie.

Pour les utilisateurs de xooit



On va repérer ceci :

Code:
<a name="top"></a>
Et on copie colle les 2 scripts juste avant

On valide.

-----------------

Ah oui et pour finir, Parlons un peu mise en page Smile Peut être que, comme sur SoP, vous avez déjà des styles prédéfinies. Dans ce cas, il est possible de combiner 2 class ^^

Par exemple :

Code:
<h1 class="elt_declancheur ma_class">Clique moi !</h1>
<div class="afficher_masquer">mon texte</div>

De même qu'il est possible de cumuler une classe et un id. Par exemple :
Code:
[code]<h1 class="elt_declancheur">Clique moi !</h1>
<div class="afficher_masquer" id="min_id>mon texte</div>[/code]


Utiliser ce système pour la Chatbox



Ahhh ! Les CB, ça prend de la place hein ! ça serait top de pouvoir faire en sorte qu'elle se rétracte quand on le veut ? Alors voyons voir ça ensemble Smile

Pour la CB, on ne va pas utiliser un paragraphe, mais un titre comme élément déclancheur. Pour cela, on va utiliser une balise de hierarchisation "h". Cela nous donne donc ça :

Code:
<h1 class="elt_declancheur">Clique moi !</h1>

Puis, on va mettre dans le bloc "div" la partie de code concernant la CB.

Pour les utilisateurs de FA



Vous trouverez ce code dans le template "index_body".

-> Si votre CB est en haut, vous devrez prendre cette variable : {CHATBOX_TOP}

-> Si votre CB est en bas, ce sera celle-ci : {CHATBOX_BOTTOM}

Moi je vais considérer qu'elle est en haut Smile

Code:
<div class="afficher_masquer">{CHATBOX_TOP}</div>

Il ne reste plus qu'à aller dans le template "index_body" et remplacer la variable concernant la CB par ce code

donc pour moi, je remplace

Code:
{CHATBOX_TOP}

par

Code:
<h1 class="elt_declancheur">Clique moi !</h1>
<div class="afficher_masquer">{CHATBOX_TOP}</div>

On valide, on publie, et zoup ! Le tour est joué ^^

Pour les utilisateurs de xooit



Ici, c'est super simple Smile Ouvrez le template "chat.tpl".

Copiez ceci au tout début :

Code:
<h1 class="elt_declancheur">Clique moi !</h1>
<div class="afficher_masquer">

et ça tout à la fin :

Code:
</div>

On valide et le tour est joué Very Happy

Utiliser ce système pour des profils rétractables



Et oui ! vous pouvez aussi utiliser ça pour faire des profils rétractables. Par exemple :

=> sous FA :
Spoiler:
 

=> sous xooit :
Spoiler:
 

Pour cela, voici ce qu'il faut faire Smile

Pour cette modif, on va aller dans le template "viewtopic_body" quelque soit la plateforme sur laquelle votre forum est hébergé

Pour les utilisateurs de FA



La partie qui concerne l'auteur est celle-ci :

Code:
span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- 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>

Si on décortique un peu :

-> {postrow.displayed.U_POST_ID} = le lien vers le profil de l'auteur
-> {postrow.displayed.POSTER_NAME} = le pseudo de l'auteur
-> {postrow.displayed.POSTER_RANK} = le rang de l'auteur
-> {postrow.displayed.RANK_IMAGE} = l'image de rang de l'auteur
-> {postrow.displayed.POSTER_AVATAR} = l'avatar de l'auteur
-> {postrow.displayed.profile_field.LABEL} = les intitulés des champs du profil
-> {postrow.displayed.profile_field.CONTENT} = le contenu des champs du profil
-> {postrow.displayed.profile_field.SEPARATOR} = la façon dont est séparé chaque champs
-> {postrow.displayed.POSTER_RPG} = les champs en rapport avec le feuille de personnage

Donc, si vous voulez masquer toute la partie contenant les champs du profil, il faut remplacer ça :

Code:

            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}                  
            <!-- END profile_field -->
            

par ça

Code:
<p class="elt_declancheur">Plus d'infos</p>
            <div class="afficher_masquer">
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}                  
            <!-- END profile_field -->
            </div>

Si vous voulez masquer les infos de la feuille de personnage, il faut remplacer ça :

Code:
{postrow.displayed.POSTER_RPG}

par ça :

Code:
<p class="elt_declancheur">Infos RPG</p>
            <div class="afficher_masquer">
            {postrow.displayed.POSTER_RPG}
            </div>

Pour les utilisateurs de xooit



La partie qui concerne l'auteur est celle-ci :

Code:
<td width="150" align="left" valign="top" class="{postrow.ROW_CLASS}"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span>
<span class="postdetails">{postrow.POSTER_RANK}
{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}

{postrow.POSTER_JOINED}
{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}</span>
</td>

Si on décortique un peu :

-> {postrow..U_POST_ID} = le lien vers le profil de l'auteur
-> {postrow.POSTER_NAME} = le pseudo de l'auteur
-> {postrow.POSTER_RANK} = le rang de l'auteur
-> {postrow.RANK_IMAGE} = l'image de rang de l'auteur
-> {postrow.POSTER_AVATAR} = l'avatar de l'auteur
-> {postrow.POSTER_JOINED} = date d'inscription de l'auteur
-> {postrow.POSTER_POSTS} = nombre de messages de l'auteur
-> {postrow.POSTER_FROM} = ville de l'auteur de l'auteur

Si vous voulez masquer toutes les infos autres que l'avatar, le pseudo et le rang, il faut remplacer ça :

Code:

{postrow.POSTER_JOINED}
{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}</span>

par ça :

Code:
<p class="elt_declancheur">Plus d'infos</p>
            <div class="afficher_masquer">{postrow.POSTER_JOINED}
{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}</span></div>

Et voilà ! Le tour est joué !




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


Dernière édition par Miettes le Jeu 7 Avr - 13:42, édité 1 fois
Revenir en haut Aller en bas
Faire un effet Afficher/masquer
Page 1 sur 1
 Sujets similaires
-
» Impossibilité d'afficher une page http
» Effet Typographie avec Photoshop CS4
» Enregistrement et affichage 62s
» Afficher Masquer le QEEL façon Invision
» Afficher une image un plein écran
Réponse rapide

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