FANDOM


m (+TR)
 
(5 révisions intermédiaires par 5 utilisateurs sont masquées)
Ligne 1 : Ligne 1 :
  +
:''Cette fonctionnalité ne fonctionne pas sur appareils mobiles de la même façon que sur orduinateur. Généralement, tout élément en enroulement automatiquement (auto-collapsed) est simplement déroulé sur [[Aide:Mobile|mobile]] et il n'y a aucun bouton pour afficher/masquer. Lors de l'utilisation de cette fonctionnalité, assurez-vous de regarder si ça fonctionne comme vous le souhaitez sur mobile.''
 
Le '''déroulement''' (''collapsing'' en anglais) en HTML est une fonctionnalité pour dérouler (ou enrouler) un élément.
 
Le '''déroulement''' (''collapsing'' en anglais) en HTML est une fonctionnalité pour dérouler (ou enrouler) un élément.
   
Ligne 33 : Ligne 34 :
 
Il est possible d'enrouler le texte d'un article, réduisant concrètement la page et permettant aux lecteurs de décider s'ils souhaitent lire le reste des informations.
 
Il est possible d'enrouler le texte d'un article, réduisant concrètement la page et permettant aux lecteurs de décider s'ils souhaitent lire le reste des informations.
   
Exemple :
+
Exemple :
 
<source lang="html4strict" enclose="div">
 
<source lang="html4strict" enclose="div">
 
<div class="mw-collapsible">
 
<div class="mw-collapsible">
Ligne 40 : Ligne 41 :
 
</source>
 
</source>
   
donne :
+
donne&nbsp;:
 
<div class="mw-collapsible" style="overflow: hidden;"><!-- overflow: hidden; due to the float here -->
 
<div class="mw-collapsible" style="overflow: hidden;"><!-- overflow: hidden; due to the float here -->
 
Ce texte peut être enroulé.
 
Ce texte peut être enroulé.
Ligne 47 : Ligne 48 :
 
==Paramètres avancés==
 
==Paramètres avancés==
 
=== État initial ===
 
=== État initial ===
Pour définir l'état initial enroulé, ajoutez <code>mw-collapsed</code> en plus de <code>mw-collapsible</code>, comme montré dans le tableau suivant :
+
Pour définir l'état initial enroulé, ajoutez <code>mw-collapsed</code> en plus de <code>mw-collapsible</code>, comme montré dans le tableau suivant&nbsp;:
   
 
<pre>
 
<pre>
Ligne 59 : Ligne 60 :
 
</pre>
 
</pre>
   
donne :
+
donne&nbsp;:
 
{| class="mw-collapsible mw-collapsed wikitable"
 
{| class="mw-collapsible mw-collapsed wikitable"
 
! L'en-tête || reste visible
 
! L'en-tête || reste visible
Ligne 71 : Ligne 72 :
 
Vous pouvez aussi spécifier quelle partie du contenu doit être déroulant en utilisant <code>mw-collapsible-content</code>.
 
Vous pouvez aussi spécifier quelle partie du contenu doit être déroulant en utilisant <code>mw-collapsible-content</code>.
   
Exemple :
+
Exemple&nbsp;:
 
<source lang="html4strict" enclose="div">
 
<source lang="html4strict" enclose="div">
 
<div class="mw-collapsible mw-collapsed" style="width:100%">
 
<div class="mw-collapsible mw-collapsed" style="width:100%">
Ligne 80 : Ligne 81 :
 
</source>
 
</source>
   
donne :
+
donne&nbsp;:
 
<div class="mw-collapsible mw-collapsed" style="width:100%">
 
<div class="mw-collapsible mw-collapsed" style="width:100%">
 
Ce texte n'est pas déroulant, mais le texte est enroulé (et donc masqué) par défaut :
 
Ce texte n'est pas déroulant, mais le texte est enroulé (et donc masqué) par défaut :
Ligne 88 : Ligne 89 :
   
 
=== Libellés personnalisés ===
 
=== Libellés personnalisés ===
Vous n'aimez pas « Enrouler » / « Dérouler » pour les liens ? Pas de problèmes ! Modifiez-les en utilisant <code>data-expandtext</code> et<code>data-collapsetext</code>.
+
Vous n'aimez pas «&nbsp;Enrouler&nbsp;» / «&nbsp;Dérouler&nbsp;» pour les liens&nbsp;? Pas de problèmes&nbsp;! Modifiez-les en utilisant <code>data-expandtext</code> et <code>data-collapsetext</code>.
   
Exemple :
+
Exemple&nbsp;:
 
<pre>{| class="wikitable mw-collapsible" data-expandtext="Amplificatum" data-collapsetext="Reducto"
 
<pre>{| class="wikitable mw-collapsible" data-expandtext="Amplificatum" data-collapsetext="Reducto"
 
!Mon || en-tête
 
!Mon || en-tête
Ligne 99 : Ligne 100 :
 
|}</pre>
 
|}</pre>
   
donne :
+
donne&nbsp;:
 
{| class="wikitable mw-collapsible" data-expandtext="Amplificatum" data-collapsetext="Reducto"
 
{| class="wikitable mw-collapsible" data-expandtext="Amplificatum" data-collapsetext="Reducto"
 
!Mon || en-tête
 
!Mon || en-tête
Ligne 108 : Ligne 109 :
 
|}
 
|}
   
=== Bouton affiche/masquer ===
+
=== Bouton afficher/masquer ===
 
Vous l'aurez peut-être remarqué dans le tableau donné en exemple ci-dessus, le lien dans la deuxième colonne augmente grandement la largeur du tableau par rapport au texte qu'il contient. Il est possible de palier à cela en plaçant l'action n'importe où ailleurs sur la page.
 
Vous l'aurez peut-être remarqué dans le tableau donné en exemple ci-dessus, le lien dans la deuxième colonne augmente grandement la largeur du tableau par rapport au texte qu'il contient. Il est possible de palier à cela en plaçant l'action n'importe où ailleurs sur la page.
   
Ligne 115 : Ligne 116 :
 
Ceci s'occupe du tableau même. Ensuite, nous devons ajouter un élément bouton/lien/texte avec la classe <code>mw-customtoggle-myTable</code> (veuillez noter que c'est une '''classe''' et non un '''ID''' comme ci-dessus).
 
Ceci s'occupe du tableau même. Ensuite, nous devons ajouter un élément bouton/lien/texte avec la classe <code>mw-customtoggle-myTable</code> (veuillez noter que c'est une '''classe''' et non un '''ID''' comme ci-dessus).
   
Exemple :
+
Exemple&nbsp;:
 
<pre>{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
 
<pre>{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
 
!Mon || en-tête
 
!Mon || en-tête
Ligne 124 : Ligne 125 :
 
|}
 
|}
   
<div class="mw-customtoggle-myTabla communauté-menu-button">Afficher/Masquer tableau</div></pre>
+
<div class="mw-customtoggle-myTable communauté-menu-button">Afficher/Masquer tableau</div></pre>
   
 
{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
 
{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
Ligne 134 : Ligne 135 :
 
|}
 
|}
   
<span class="mw-customtoggle-myTabla communauté-menu-button">Afficher/Masquer tableau</span>
+
<span class="mw-customtoggle-myTable communauté-menu-button">Afficher/Masquer tableau</span>
   
 
== Voir aussi ==
 
== Voir aussi ==
*{{#NewWindowLink:http://dev.wikia.com/index.php?title=ShowHide|ShowHide}} sur le {{#NewWindowLink:http://dev.wikia.com|Developer's Wiki}}
+
*[[w:c:dev:ShowHide|ShowHide]] sur le [[w:c:dev|Developer's Wiki]]
*{{#NewWindowLink:mw:Manual:Collapsible elements|Éléments déroulants}} sur {{#NewWindowLink:mw:|MediaWiki.org}} (en anglais)
+
*[[mw:Manual:Collapsible elements|Éléments déroulants]] sur [[mw:|MediaWiki.org]] (en anglais)
   
 
{{Plus d'aide}}
 
{{Plus d'aide}}
   
  +
[[be:Даведка:Табліцы/згортваюцца]]
  +
[[de:Hilfe:Ausklappbare Elemente]]
 
[[en:Help:Collapsing]]
 
[[en:Help:Collapsing]]
 
[[es:Ayuda:Colapsando]]
 
[[es:Ayuda:Colapsando]]
Ligne 148 : Ligne 151 :
 
[[pt:Ajuda:Collapsing]]
 
[[pt:Ajuda:Collapsing]]
 
[[ru:Справка:Сворачивание]]
 
[[ru:Справка:Сворачивание]]
  +
[[tr:Yardım:Daraltma]]
  +
[[uk:Довідка:Таблиці/що згортаються]]
 
[[zh:Help:摺疊]]
 
[[zh:Help:摺疊]]
   

Version actuelle en date du décembre 29, 2019 à 15:23

Cette fonctionnalité ne fonctionne pas sur appareils mobiles de la même façon que sur orduinateur. Généralement, tout élément en enroulement automatiquement (auto-collapsed) est simplement déroulé sur mobile et il n'y a aucun bouton pour afficher/masquer. Lors de l'utilisation de cette fonctionnalité, assurez-vous de regarder si ça fonctionne comme vous le souhaitez sur mobile.

Le déroulement (collapsing en anglais) en HTML est une fonctionnalité pour dérouler (ou enrouler) un élément.

Il peut arriver qu'une page contienne beaucoup d'éléments qui la rendent très longue. Utiliser la fonctionnalité de déroulement permet aux éditeurs de raccourcir la page et permet aux lecteurs de dérouler les zones qui les intéressent. De la même façon que pour le sommaire, les autres parties d'une page d'une communauté peuvent être modifiées pour être déroulables.

Pour rendre un élément déroulable, ajoutez-y simplement la classe mw-collapsible.

ExemplesModifier

Rendre un tableau déroulant Modifier

En ajoutant la classe mw-collapsible, un tableau peut être enroulé pour économiser de l'espace sur la page.

Nombre Lettre
1 A
2 B
3 C
{| class="wikitable mw-collapsible" style="float:right"
! Nombre !! Lettre
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

Rendre un texte déroulant Modifier

Il est possible d'enrouler le texte d'un article, réduisant concrètement la page et permettant aux lecteurs de décider s'ils souhaitent lire le reste des informations.

Exemple :

<div class="mw-collapsible">
Ce texte peut être enroulé.
</div>

donne :

Ce texte peut être enroulé.

Paramètres avancésModifier

État initial Modifier

Pour définir l'état initial enroulé, ajoutez mw-collapsed en plus de mw-collapsible, comme montré dans le tableau suivant :

{| class="mw-collapsible mw-collapsed wikitable"
! L'en-tête || reste visible
|-
| Ce contenu || est masqué
|-
| au premier || chargement
|}

donne :

L'en-tête reste visible
Ce contenu est masqué
au premier chargement

Sélectionner le contenu à rendre déroulant Modifier

Vous pouvez aussi spécifier quelle partie du contenu doit être déroulant en utilisant mw-collapsible-content.

Exemple :

<div class="mw-collapsible mw-collapsed" style="width:100%">
Ce texte n'est pas déroulant, mais le texte est enroulé (et donc masqué) par défaut :
<div class="mw-collapsible-content">Ce texte doit être masqué par défaut.</div>
Ce texte doit aussi être visible.
</div>

donne :

Ce texte n'est pas déroulant, mais le texte est enroulé (et donc masqué) par défaut :

Ce texte doit être masqué par défaut.

Ce texte doit aussi être visible.

Libellés personnalisés Modifier

Vous n'aimez pas « Enrouler » / « Dérouler » pour les liens ? Pas de problèmes ! Modifiez-les en utilisant data-expandtext et data-collapsetext.

Exemple :

{| class="wikitable mw-collapsible" data-expandtext="Amplificatum" data-collapsetext="Reducto"
!Mon || en-tête
|-
| A || B
|-
| C || D
|}

donne :

Mon en-tête
A B
C D

Bouton afficher/masquer Modifier

Vous l'aurez peut-être remarqué dans le tableau donné en exemple ci-dessus, le lien dans la deuxième colonne augmente grandement la largeur du tableau par rapport au texte qu'il contient. Il est possible de palier à cela en plaçant l'action n'importe où ailleurs sur la page.

Pour faire cela, nous devons assigner un identifiant (ID) à l'élément. Cet ID doit commencer par mw-customcollapsible- et être suivi d'une phrase clé unique à cet élément. En utilisant notre tableau ci-dessus, nous pouvons ajouter l'ID mw-customcollapsible-myTable.

Ceci s'occupe du tableau même. Ensuite, nous devons ajouter un élément bouton/lien/texte avec la classe mw-customtoggle-myTable (veuillez noter que c'est une classe et non un ID comme ci-dessus).

Exemple :

{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!Mon || en-tête
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-myTable communauté-menu-button">Afficher/Masquer tableau</div>
Mon en-tête
A B
C D

Afficher/Masquer tableau

Voir aussi Modifier

Plus d'aideModifier

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .