DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Tiroir
  • Présentation
  • Créer un champ de type "Tiroir" dans une fenêtre
  • Créer un champ de type "Tiroir" dans une page
  • Caractéristiques d'un champ Tiroir
  • Champ Tiroir présent dans une fenêtre
  • Champ Tiroir présent dans une page
  • Programmation d'un champ Tiroir
  • Enrouler/Dérouler un champ Tiroir
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Le champ Tiroir est un champ pouvant contenir d'autres champs et destiné à faciliter la mise en forme des UI. Il peut être déplié afin d'afficher ou non les champs qu'il contient. Le pliage/dépliage du champ peut être fait :
  • soit en cliquant sur le titre du champ,
  • soit par programmation.
Champ Tiroir
WINDEV

Créer un champ de type "Tiroir" dans une fenêtre

Pour créer un champ de type "Tiroir" dans une fenêtre :
  1. Sous le volet "Création", dans le groupe "Conteneurs", déroulez "Onglet et associés" et sélectionnez "Champ Tiroir".
  2. Cliquez dans la fenêtre à la position où le champ doit être créé. Le champ apparaît en création.
    Le champ Tiroir créé contient automatiquement un champ par défaut : ce champ est le bouton permettant de "Enrouler/Dérouler" le tiroir. Ce champ contient le code WLangage nécessaire à son fonctionnement. Il est possible de personnaliser ce champ en lui associant une image spécifique.
  3. Disposez sur le champ Tiroir les différents champs devant apparaître/disparaître lors de sa manipulation.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
WEBDEV - Code ServeurPHPAjax

Créer un champ de type "Tiroir" dans une page

Pour créer un champ de type "Tiroir" dans une page :
  1. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Tiroir".
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.
    Le champ Tiroir créé est vide : la zone supérieure (dont la taille peut être adaptée à l'aide de la poignée de redimensionnement) reçoit les clics et provoque l'enroulement ou le déroulement de la zone inférieure.
  3. Disposez sur le champ Tiroir les différents champs devant apparaître/disparaître lors de sa manipulation.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Caractéristiques d'un champ Tiroir
WINDEV

Champ Tiroir présent dans une fenêtre

  • Lorsque le champ Tiroir est en édition sous l'éditeur de fenêtres, il est possible de le manipuler comme en exécution. Le menu contextuel du champ permet de le dérouler/enrouler à volonté (option "Enrouler/Dérouler le tiroir").
  • Dans la description du champ Tiroir, l'onglet "Général" permet d'indiquer :
    • Si une animation doit être effectuée lors de la manipulation du champ Tiroir.
    • Si la taille de la fenêtre doit être adaptée lors de la manipulation du champ. En effet, lorsque le champ Tiroir est déroulé, les champs situés en-dessous du champ Tiroir sont automatiquement déplacés vers le bas. Cette option permet d'agrandir automatiquement la fenêtre vers le bas afin de voir les champs situés sous le champ Tiroir.
WEBDEV - Code ServeurWEBDEV - Code Navigateur

Champ Tiroir présent dans une page

  • Lorsque le champ Tiroir est en édition sous l'éditeur de pages, il apparaît toujours déroulé dans sa plus grande taille.
  • Les opérations de pliage/dépliage du champ sont toujours accompagnées d'une animation si elles sont réalisées :
    • en code navigateur.
    • en code serveur dans un événement (ou un traitement) AJAX.
  • Lorsque le champ Tiroir se replie, les champs situés en-dessous de lui ne remontent pas automatiquement sauf s'ils sont placés (ainsi que le champ tiroir) dans une cellule utilisant le positionnement relatif des champs. Pour plus de détails sur le positionnement relatif dans les cellules, consulter Champ Cellule.
Programmation d'un champ Tiroir

Enrouler/Dérouler un champ Tiroir

Pour enrouler un champ Tiroir, il suffit d'utiliser la syntaxe suivante :
<Nom Champ Tiroir> = Faux
Pour dérouler un champ Tiroir, il suffit d'utiliser la syntaxe suivante :
<Nom Champ Tiroir> = Vrai
Liste des exemples associés :
Le champ Tiroir Exemples unitaires (WEBDEV) : Le champ Tiroir
[ + ] Utilisation du champ Tiroir de WEBDEV.
Le champ Tiroir (boite à outil statique) Exemples unitaires (WEBDEV) : Le champ Tiroir (boite à outil statique)
[ + ] Utilisation du champ "Tiroir" de WEBDEV associé à une cellule de positionnement relatif pour proposer un comportement plus interactif.
Boîte à outils DHTML Exemples unitaires (WEBDEV) : Boîte à outils DHTML
[ + ] Réalisation d'un menu DHTML avec WEBDEV.
Cet exemple permet de :
- Créer un menu DHTML
- Ajouter une entrée de menu
- Ajouter une option de menu
Le champ Tiroir Exemples unitaires (WINDEV) : Le champ Tiroir
[ + ] Utilisation du champ Tiroir.
Version minimum requise
  • Version 11
Documentation également disponible pour…
Commentaires
Webdev : champ tiroir en tant que "volet automatique" latéral
Attention, en Webdev, si on souhaite utiliser un champ tiroir en tant que volet automatique sur la gauche de l'écran (par exemple en utilisation comme menu "repliable" sur le côté), les éléments qui se trouvent à droite de ce champ tiroir et qui doivent se déplacer vers la gauche quand le champ tiroir se replie ne peuvent pas être des champs "superposables".

Dans la description de chaque champ à droite -> UI :
soit - La case à cocher "le champ peut être superposé" doit être décochée.
soit - doit être "sans superposition"

Une solution est de mettre l'ensemble des champs de droite dans une cellule non superposable. Mais quoi qu'il arrive les champs à l'intérieur de cette cellule ne pourront pas être superposés par un autre champs
Quentin
11 fév. 2022

Dernière modification : 25/05/2022

Signaler une erreur ou faire une suggestion | Aide en ligne locale