PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation du champ Bandeau défilant
  • Créer un champ Bandeau défilant
  • Caractéristiques du champ Bandeau défilant
  • Fenêtre de description
  • Contenu des plans utilisés pour le champ Bandeau défilant
  • Personnalisation du champ Bandeau défilant
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation du champ Bandeau défilant
Le champ Bandeau défilant permet d'afficher successivement plusieurs contenus, soit automatiquement, soit suite à une action de l'internaute.
Il ne s'agit pas d’un simple champ Image à défilement automatique, ni d'une zone répétée linéaire ! Le bandeau peut contenir des champs et des traitements.
Le bandeau défilant permet d'afficher des contenus totalement différents et indépendants d'un plan à l'autre.
Les bandeaux défilants sont souvent utilisés en entête de site.
Exemple :
Le bandeau change de plan tout seul ou à la demande.Les plans peuvent contenir des champs
Le bandeau change de plan tout seul ou à la demande. Les plans peuvent contenir des champs.
Créer un champ Bandeau défilant
Pour créer un champ de type Bandeau défilant :
  1. Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Bandeau défilant".
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ apparaît en création.
  3. Le champ Bandeau défilant est constitué de :
    • plusieurs plans contenant les différents éléments du bandeau. Chaque plan contient tous les champs nécessaires à une "étape" du bandeau défilant.
    • sélecteurs de plans (ou puces), affichés en bas du bandeau, permettant à l'utilisateur d'accéder directement à une étape.
    • boutons de défilement permettant à l'utilisateur de faire défiler lui-même les "étapes" du bandeau défilant.
Par défaut, le champ créé contient 3 plans. Le premier plan est affiché sous l'éditeur. Vous pouvez créer directement les champs à afficher dans les différents plans.
Remarque : Pour accéder aux différents plans sous l'éditeur, il suffit de :
  • sélectionner le champ Bandeau défilant.
  • utiliser les touches [Page Up] / [Page down] pour changer de plan.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.
Remarque : Le champ Bandeau défilant est WYSIWYG sous l'éditeur :
  • Si vous cliquez sur le bouton gauche et sur le bouton droit sous l'éditeur, les plans correspondants seront affichés.
  • Si vous cliquez sur le sélecteur de plans (ou puces) sous l'éditeur, les plans correspondants seront affichés.
Caractéristiques du champ Bandeau défilant

Fenêtre de description

La fenêtre de description du champ "Bandeau défilant" permet de :
  • Créer ou supprimer les plans correspondant aux différentes "étapes" du bandeau (onglet "Général"). Par défaut, 3 plans sont disponibles.
    Remarque : Pour accéder aux différents plans sous l'éditeur, il suffit de :
    • sélectionner le champ Bandeau défilant.
    • utiliser les touches [Page Up] / [Page down] pour changer de plan.
  • Définir les propriétés spécifiques à un plan (onglet "Général") : Il suffit de sélectionner le plan voulu pour définir :
    • si le plan est visible par défaut.
    • les options de style du plan.
    • la bulle d'aide du plan.
  • Définir les options de fonctionnement du champ Bandeau défilant (onglet "Détail") : Il est possible de :
    • Définir le mode d'activation du défilement par l'utilisateur. Les modes disponibles sont :
      • avec le clavier : l'utilisateur pourra utiliser les boutons fléchés pour changer l'étape du bandeau.
      • par balayage horizontal : l'utilisateur devra effectuer un balayage souris pour changer l'étape du bandeau.
      • au scroll au doigt : l'utilisateur devra effectuer un balayage au doigt pour changer l'étape du bandeau.
      • avec un sélecteur de plan (puces) : l'utilisateur devra utiliser des puces pour changer l'étape du bandeau. Si cette option n'est pas cochée, les puces ne sont pas affichées dans le bandeau.
      • avec un bouton précédent : l'utilisateur devra utiliser le bouton précédent du bandeau pour changer l'étape du bandeau. Si cette option n'est pas cochée, le bouton précédent n'est pas affiché dans le bandeau.
      • avec un bouton suivant : l'utilisateur devra utiliser le bouton suivant du bandeau pour changer l'étape du bandeau. Si cette option n'est pas cochée, le bouton suivant n'est pas affiché dans le bandeau.
    • Activer le clic en fond de bandeau. Permet de gérer le clic sur le fond de bandeau. Si cette option est cochée, le traitement de clic est automatiquement ajouté aux traitements du champ Bandeau défilant.
    • Démarrer automatiquement le défilement : Active le défilement automatique. Dans ce cas, tous les plans visibles sont automatiquement affichés selon l'ordre des plans et avec la durée d'affichage spécifiée.
    • Interrompre le défilement au survol : Interrompt le défilement des plans lorsque le plan en cours est survolé.
    • Durée d'affichage de chaque plan : Durée d'affichage de chaque "étape" du bandeau défilant.
  • Définir le style du champ Bandeau défilant (onglet "Style") : Il est possible de définir :
    • les options CSS du champ.
    • les sélecteur de plan (puces) :
      • Style CSS si nécessaire.
      • Planche d'images. La planche d'images utilisée doit être compatible avec les planches d'images utilisées pour les champs Sélecteur et Interrupteur. Cette planche d'images peut également contenir une animation pour les puces.
      • Marge en bas : distance des puces par rapport au bord bas du champ Bandeau défilant.
      • Espace entre chaque élément : espacement entre les puces.
      • Largeur et hauteur des éléments.
    • le bouton à gauche :
      • Style CSS si nécessaire.
      • Planche d'images. La planche d'images utilisée doit être compatible avec les planches d'images utilisées pour les champs Bouton. Cette planche d'images peut également contenir une animation.
      • Décalage à gauche : distance entre le bouton et le bord gauche du champ.
      • Largeur et hauteur du bouton.
    • le bouton à droite :
      • Style CSS si nécessaire.
      • Planche d'images. La planche d'images utilisée doit être compatible avec les planches d'images utilisées pour les champs Bouton. Cette planche d'images peut également contenir une animation.
      • Décalage à droite : distance entre le bouton et le bord droit du champ.
      • Largeur et hauteur du bouton.

Contenu des plans utilisés pour le champ Bandeau défilant

  • Les plans associés au champ Bandeau défilant peuvent contenir tous les types de champs existant en WEBDEV sauf un champ Bandeau défilant.
  • Un champ présent dans un plan du bandeau défilant peut être associé à plusieurs plans du bandeau défilant. Dans ce cas, le champ est automatiquement rendu superposable.

Personnalisation du champ Bandeau défilant

Par défaut, le champ Bandeau défilant propose des boutons et des sélecteurs de plans (puces) pour changer de plans. Ces éléments sont personnalisables dans le style du champ.
Si vous ne souhaitez pas utiliser les champs proposés par défaut, il est possible d'utiliser des champs spécifiques placés en dehors du champ Bandeau défilant. Il suffit alors de :
  • configurer le champ Bandeau défilant pour ne plus utiliser les champs par défaut (onglet "Détail" de la description du champ).
  • programmer l'action des nouveaux champs grâce aux fonctions de gestion du défilement. Pour plus de détails, consultez Personnalisation du passage d'un plan à un autre.
Liste des exemples associés :
WW_Rewali Exemples complets (WEBDEV) : WW_Rewali
[ + ] Cet exemple est un site de réservation de voyages.

Il propose des offres de voyages à des prix très attractifs.
Il est ensuite possible de choisir la durée du voyage, les dates de départ .. puis de valider l'achat jusqu'au paiment via Paypal.

Il utilise notamment le champ "bandeau défilant" et les plans.
Version minimum requise
  • Version 22
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire