Utilisation du widget Panneau réductible Spry

Rechercher

Dernière mise à jour le 2 mai 2021

Remarque :

Les widgets Spry ont été remplacés par des widgets jQuery sous Dreamweaver CC et versions ultérieures. Bien qu’il soit toujours possible de modifier des widgets Spry sur votre page, vous ne pouvez pas en ajouter de nouveaux.

À propos du widget Panneau réductible

Un widget Panneau réductible est un panneau qui peut stocker du contenu en n’occupant que peu de place. Les utilisateurs affichent ou masquent le contenu stocké dans le panneau réductible en cliquant sur l’onglet du widget. L’exemple suivant montre un widget Panneau réductible développé et réduit :

A. Développé B. Réduit

Le code HTML du widget Panneau réductible comprend une balise div extérieure qui comprend la balise de contenu div et la balise conteneur d’ongletdiv. Le code HTML du widget Panneau réductible comprend également des balises script dans l’en-tête du document et après le marquage HTML du panneau réductible.

Vous trouverez une explication plus détaillée du fonctionnement du widget Panneau réductible, ainsi qu’une description complète de son code, à l’adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_fr.

Insertion et modification du widget Panneau réductible

Insertion du widget Panneau réductible

Choisissez Insertion > Spry > Panneau réductible Spry.

Remarque :

Vous pouvez également insérer un widget Panneau réductible par l’intermédiaire de la catégorie Spry du panneau Insertion.

Ouverture ou fermeture du panneau réductible en mode Création

Effectuez l’une des opérations suivantes :
- Placez le pointeur de la souris au-dessus de l’onglet du panneau en mode Création, puis cliquez sur l’icône en forme d’œil qui s’affiche sur la droite de l’onglet.
- Sélectionnez un widget Panneau réductible dans la fenêtre de document, puis choisissez Ouvert ou Fermé dans le menu Affichage de l’inspecteur Propriétés (Fenêtre > Propriétés).

Définition de l’état par défaut d’un widget Panneau réductible

Vous pouvez définir l’état par défaut (ouvert ou fermé) d’un widget Panneau réductible lorsque la page web est chargée dans un navigateur.

Sélectionnez un widget Panneau réductible dans la fenêtre de document.
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), choisissez Ouvert ou Fermé dans le menu déroulant Par défaut.

Activation ou désactivation de l’animation du widget Panneau réductible

Par défaut, si vous activez l’animation d’un widget Panneau réductible, le panneau s’ouvre et se ferme progressivement, en douceur, lorsque le visiteur du site clique sur son onglet. Si vous désactivez l’animation, le panneau réductible s’ouvre et se ferme brusquement.

Sélectionnez un widget Panneau réductible dans la fenêtre de document.
Dans l’inspecteur Propriétés (Fenêtre > Propriétés), activez ou désactivez l’option Activer l’animation.

Personnalisation du widget Panneau réductible

Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Panneau réductible, il ne prend pas en charge les tâches de définition de style personnalisées. Vous pouvez modifier les règles CSS du widget Panneau réductible de manière à créer un panneau réductible adapté à vos besoins.

Pour savoir comment modifier les couleurs du widget Panneau réductible, consultez l’article Quick guide to styling Spry tabbed panels, accordions, and collapsible panels de David Powers (en anglais).

Vous trouverez la liste des tâches de définition de style avancées à l’adresse www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_fr.

Toutes les règles CSS des sections suivantes font référence aux règles par défaut, qui figurent dans le fichier SpryCollapsiblePanel.css. Dreamweaver enregistre le fichier SpryCollapsiblePanel.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneau réductible. Ce fichier contient également des informations commentées au sujet des différents styles qui s’appliquent au widget.

Remarque :

Même s’il est facile de modifier directement les règles du widget Panneau réductible dans le fichier CSS qui l’accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du panneau réductible. Le panneau Styles CSS peut vous aider à trouver les classes CSS attribuées à différentes parties du widget, en particulier si vous employez le mode Actuel du panneau.

Définition du style du texte d’un widget Panneau réductible

Vous pouvez définir le style du texte d’un widget Panneau réductible en définissant des propriétés pour le conteneur entier du widget Panneau réductible, ou en définissant des propriétés distinctes pour chaque composant du widget.

Pour modifier le format du texte d’un widget Panneau réductible, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez vos propriétés et valeurs de style du texte.

Style à modifier	Règle CSS pertinente	Exemple de propriétés et de valeurs à ajouter ou modifier
Texte du panneau réductible entier	.CollapsiblePanel	font: Arial; font-size:medium;
Texte dans l’onglet du panneau uniquement	.CollapsiblePanelTab	font: bold 0.7em sans-serif; (Valeur par défaut)
Texte dans le panneau de contenu uniquement	.CollapsiblePanelContent	font: Arial; font-size:medium;

Modification des couleurs d’arrière-plan du widget Panneau réductible

Pour modifier les couleurs d’arrière-plan des différentes parties d’un widget Panneau réductible, recherchez la règle CSS appropriée dans le tableau suivant, puis ajoutez ou modifiez les propriétés et les valeurs de couleur d’arrière-plan.

Couleur à modifier	Règle CSS pertinente	Exemple de propriété et de valeur à ajouter ou modifier
Couleur d’arrière-plan de l’onglet du panneau	.CollapsiblePanelTab	background-color: #DDD; (Valeur par défaut)
Couleur d’arrière-plan du panneau de contenu	.CollapsiblePanelContent	background-color: #DDD;
Couleur d’arrière-plan de l’onglet quand le panneau est ouvert	.CollapsiblePanelOpen .CollapsiblePanelTab	background-color: #EEE; (Valeur par défaut)
Couleur d’arrière-plan de l’onglet d’un panneau ouvert lorsque le pointeur de la souris passe au-dessus	.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover	background-color: #CCC; (Valeur par défaut)

Limitation de la largeur d’un panneau réductible

Par défaut, le widget Panneau réductible se développe pour occuper l’espace disponible. Vous pouvez toutefois limiter la largeur d’un widget Panneau réductible en définissant une propriété « width » pour le conteneur du panneau réductible.

Recherchez la règle CSS .CollapsiblePanel en ouvrant le fichier SpryCollapsible Panel.css. Cette règle définit les propriétés de l’élément conteneur principal du widget Panneau réductible.

Remarque :

Vous pouvez également trouver cette règle en sélectionnant le widget Panneau réductible puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.
Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.