Poképédia fête son dixième anniversaire ! Venez passer un bon moment avec nous sur le forum !

Aide:Afficher et masquer du contenu

De Poképédia
Aller à : navigation, rechercher

Cette page d'aide, destinée aux contributeurs débutants, a été rédigée de manière à contenir le plus petit nombre de liens bleus possible, afin de faciliter sa lecture.


Avancé
Kecleon-RS.png
Projet
Homonymie
Ébauche
Liens interwikis
Afficher et masquer du contenu

Ceci est une extension des possibilités du bouton "Enrouler/Dérouler", jusqu'ici uniquement présent en première ligne des tableau défini avec class="collapsible".
Ce bouton peut désormais être mis en place par vous-même en code HTML, ou par le biais d'un modèle simplifiant sa création.

Écriture du code

Créer votre bouton

Vous pouvez donner diverses information au script par le biais du marqueur class=. Les arguments sont à séparer par un espace et l'ordre dans lequel les placer n'est pas obligatoire.
Prenons l'exemple de ce bouton :

<button type="button" name="cible" value="afficher" title="Cacher">Montrer</button>
type="button"
L'argument principal qui indique à la page que vous souhaitez créer votre bouton.
name="cible"
Un argument essentiel qui va indiquer ce que vous souhaitez voir apparaitre ou disparaitre en cliquant sur le bouton. Nous reviendrons très vite à cet argument un peu plus loin.
value="afficher"
La fonction du bouton lorsque la page est chargée pour la première fois. Vous pouvez également définir cet argument avec masquer.
Faites attention à bien taper afficher ou masquer en minuscule ici !
title="Cacher"
L'apparence que le bouton prend lorsqu'un clic est fait dessus.
Montrer
L'apparence d'origine du bouton.

Définir les cibles de votre bouton

La cible du bouton à afficher ou masquer doit être marquée par une class dont vous définissez le nom comme bon vous semble.

Par exemple, si vous souhaitez que votre contenu (tableau/texte/image) soit associé à classcible, vous devez taper :

<div class="classcible">Le contenu à afficher/masquer</div>

Si vous souhaitez qu'un autre bouton dispose d'une autre cible, donnez-lui un nom différent. Par exemple :

<div class="classcible2">Un autre contenu à afficher/masquer</div>

Relations boutons-cibles possibles

Un bouton ► une cible

Il s'agit de la configuration standard, la plus simple à mettre en place et donc celle qui sera à privilégier dans les articles.

Code:

<button type="button" name="test1" value="afficher" title="Cacher">Montrer</button>

<span class="test1">Coucou !</span>

Résultat:

    Coucou !

Un bouton ► plusieurs cibles

Un seul bouton permet l'affichage et le masquage de plusieurs contenus. Ces différents contenus doivent bien entendu être ciblés par la même class. Il est préférable de n'utiliser ce type de relation que dans les modèles ayant un contenu dense (un grand nombre de sections et de liens, par exemple).

Code:

<button type="button" name="test2" value="afficher" title="[-] Masquer">[+] Afficher</button>

<span class="test2" style="color:blue">Coucou !</span>

<span class="test2" style="color:red">Tu veux voir mon code ?</span>

Résultat:

    Coucou !    Tu veux voir mon code ?

Plusieurs boutons ► une cible

Il est possible d'afficher plusieurs boutons affichant/masquant la même cible. Ce type de procédé devrait dans l'idéal être évité, ou utilisé uniquement pour les contenus denses, avec les bouton en début et en fin d'affichage.

Code:

<button type="button" name="test3" value="afficher" title="[Enrouler]">[Dérouler]</button>

<span class="test3">Coucou !<br />Voici le contenu caché.<br />
Il prend plusieurs lignes et peut donc parfois se révéler assez dense.</span>

<button type="button" name="test3" value="afficher" title="[Enrouler]">[Dérouler]</button>

Résultat:

Coucou !
Voici le contenu caché.
Il prend plusieurs lignes et peut donc parfois se révéler assez dense.

Plusieurs boutons ► plusieurs cibles

Le principe est le même que pour la relation précédente, cette fois-ci appliqué à plusieurs contenus. Encore une fois, il est préférable de n'utiliser ce type de relations que dans les modèles dotés d'un grand nombre de sections et de liens.

Code:

<button type="button" name="test4" value="afficher" title="↓ Cache-moi ça !">↑ Montre-moi tout !</button>

<span class="test4" style="color:blue">Coucou !<br />Voici le premier contenu caché, de couleur bleu.<br />
Il prend plusieurs lignes et peut donc parfois se révéler assez dense.</span>

<span class="test4" style="color:red">Et hop !<br />Voici un deuxième contenu caché, de couleur rouge.<br />
Il prend lui aussi de la place, surtout lorsqu'il est associé au premier.</span>

<button type="button" name="test4" value="afficher" title="↑ Cache-moi ça !">↓ Montre-moi tout !</button>

Résultat:

Coucou !
Voici le premier contenu caché, de couleur bleu.
Il prend plusieurs lignes et peut donc parfois se révéler assez dense.

Et hop !
Voici un deuxième contenu caché, de couleur rouge.
Il prend lui aussi de la place, surtout lorsqu'il est associé au premier.

Modifier l'apparence du bouton

Un bouton est entièrement personnalisable. Vous pouvez changer son apparence comme vous le souhaitez : [Enrouler] ; •Cacher• ; ↑ -Masquer- ; etc.<br< Vous pouvez également utiliser style= pour définir sa taille, sa couleur, sa police, et tout ce qui pourrait vous passer par la tête. La couleur souhaitée est à indiquer en nom html ou en valeur hexadécimale.

Par exemple, vous pouvez créer un bouton vert comme ceci :

<button type="button" name="test5" value="afficher" title="*Pouf*" style="color:green;">*Pif*</button>

<span class="test5">Mon bouton est vert.</span>

Ce qui donnera :
    Mon bouton est vert.

Rappelez-vous tout de même qu'il est préférable de conserver la couleur par défaut des boutons (bleu) dans les articles, par souci de lisibilité et de respect de la charte visuelle.

Nocheck.png Symboles non-compatibles avec la personnalisation des boutons

  • point-virgule ( ; )
  • deux points ( : )
  • dièse ( # )
  • chevrons ( < > )

Caractères déconseillés :

  • accolades ( { } ).
  • barre verticale ( | )

Simplifiez-vous la vie : utilisez le modèle {{masquer}} !

{{masquer}} : Affichez et masquez tout ce que vous voulez

Ce modèle adapte le codage "à la main" pour simplifier sa mise en place :

{{masquer
|{{{1}}}
|nom=
|cacher=
|afficher=
|voir=
|style=
|couleur=
}}

Liste des arguments à définir pour la mise en place du modèle :

{{{1}}} 
Le contenu à afficher/masquer (un texte, une image, etc) >> seul argument obligatoire pour toutes les situations.
nom (facultatif) 
Nom de class à appliquer au contenu. Cet argument est OBLIGATOIRE si vous souhaitez mettre plusieurs modèles à contenu masqué dans une même page.
Rappel: les noms de class ne peuvent pas contenir d'espace. Utilisez « - » ou « _ » si vous souhaitez séparer vos termes.
cacher (facultatif) 
Pour définir l'apparence du bouton masquant le contenu. ATTENTION : Certains caractères spéciaux ne sont pas compatibles (voir plus bas).
Par défaut, l'apparence du bouton est la suivante : [Masquer]
afficher (facultatif) 
Pour définir l'apparence du bouton affichant le contenu. ATTENTION : Certains caractères spéciaux ne sont pas compatibles (voir plus bas).
Par défaut, l'apparence du bouton est la suivante : [Afficher]
voir (facultatif) 
Indiquer ici si le contenu est visible ou non lors du chargement de la page. Par défaut, la valeur de cet argument est non.
style (facultatif) 
Le style à appliquer au contenu à afficher/masquer.
couleur (facultatif) 
la couleur de mon bouton si je souhaite la changer (déconseillé dans le cadre d'un article).

Par défaut

En tapant simplement le code {{masquer|mon contenu masqué}}, vous obtenez :

mon contenu masqué


Personnaliser l'apparence et le contenu

Apparence et contenu du modèle peuvent être définis en détails.

Ainsi, en tapant par exemple :

{{masquer
|Mon bouton est en vert. Mon texte est en gras et en rouge.
|nom=texte-rouge
|cacher=[-Cacher-]
|afficher=[-Montrer-]
|voir=oui
|style=color:red; font-weight:bold;
|couleur=#338833
}}

Vous obtiendrez :

Mon bouton est en vert. Mon texte est en gras et en rouge.


Autre exemple :

{{masquer
|[[Image:LogoPoképédia2.png|thumb|left|C'est magique !]]
|nom=une-image
|cacher=•Je ne veux plus voir•
|afficher=•Je veux voir•
}}

Donnera :

C'est magique !