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 Panneaux à onglet

Un widget Panneaux à onglet est un ensemble de panneaux qui peuvent stocker du contenu en n’occupant que peu de place. Les visiteurs du site affichent ou masquent le contenu stocké dans les panneaux à onglet en cliquant sur l’onglet du panneau auquel ils veulent accéder. Les panneaux du widget s’ouvrent à mesure que le visiteur clique sur les différents onglets. Dans un widget Panneaux à onglet, un seul panneau de contenu est ouvert à tout moment. L’exemple suivant montre un widget Panneaux à onglet dont le troisième panneau est ouvert :

Widget Panneaux à onglet
Widget Panneaux à onglet

A. Onglet B. Contenu C. Widget Panneaux à onglet D. Panneau à onglet 

Le code HTML du widget Panneaux à onglet comprend une balise extérieure div qui contient tous les panneaux, la liste des onglets, une div comprenant les panneaux de contenu, ainsi qu’une div pour chaque panneau de contenu. Le code HTML du widget Panneaux à onglet comprend également des balises script dans l’en-tête du document et après le marquage HTML du widget Panneaux à onglet.

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

Insertion et modification du widget Panneaux à onglet

Insertion du widget Panneaux à onglet

  1. Choisissez Insertion > Spry > Panneaux à onglet Spry.

Remarque :

Vous pouvez également insérer un widget Panneaux à onglet par l’intermédiaire de la catégorie Spry du panneau Insertion.

Ajout d’un panneau à un widget Panneaux à onglet

  1. Sélectionnez un widget Panneaux à onglet dans la fenêtre de document.
  2. Cliquez sur le bouton Plus de l’inspecteur Propriétés (Fenêtre > Propriétés).
  3. (Facultatif) Modifiez le nom de l’onglet en sélectionnant son texte en mode Création puis en apportant les modifications désirées.

Suppression d’un panneau d’un widget Panneaux à onglet

  1. Sélectionnez un widget Panneaux à onglet dans la fenêtre de document.
  2. Dans le menu Panneaux de l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à supprimer puis cliquez sur le bouton Moins.

Ouverture d’un panneau à modifier

  1. Effectuez l’une des opérations suivantes :
    • Placez le pointeur de la souris au-dessus de l’onglet du panneau pour l’ouvrir 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 Panneaux à onglet dans la fenêtre de document, puis cliquez sur le nom du panneau pour le modifier dans le menu Panneaux de l’inspecteur Propriétés (Fenêtre > Propriétés).

Modification de l’ordre des panneaux

  1. Sélectionnez un widget Panneaux à onglet dans la fenêtre de document.
  2. Dans le menu Panneaux de l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le nom du panneau à déplacer.
  3. Cliquez sur les flèches vers le haut ou vers le bas pour monter ou descendre le panneau.

Définition du panneau ouvert par défaut

Vous pouvez déterminer quel panneau du widget Panneaux à onglet est ouvert par défaut lorsque la page est ouverte dans un navigateur.

  1. Sélectionnez un widget Panneaux à onglet dans la fenêtre de document.
  2. Dans l’inspecteur Propriétés (Fenêtre > Propriétés), sélectionnez le panneau à ouvrir par défaut dans le menu déroulant Par défaut.

Personnalisation du widget Panneaux à onglet

Bien que l’inspecteur Propriétés permette d’apporter des modifications simples à un widget Panneaux à onglet, 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 Panneaux à onglet de manière à créer un widget adapté à vos besoins.

Pour savoir comment modifier les couleurs du widget Panneaux à onglet, 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_sprytabbedpanels_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 SpryTabbedPanels.css. Dreamweaver enregistre le fichier SpryTabbedPanels.css dans le dossier SpryAssets de votre site dès que vous créez un widget Panneaux à onglets. 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 Panneaux à onglet dans le fichier CSS qui l’accompagne, vous pouvez également utiliser le panneau Styles CSS pour modifier le code CSS du widget. 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 Panneaux à onglet

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

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

    Texte à modifier

    Règle CSS pertinente

    Exemple de propriétés et de valeurs à ajouter

    Texte dans le widget entier

    .TabbedPanels

    font: Arial; font-size:medium;

    Texte dans les onglets du panneau uniquement

    .TabbedPanelsTabGroup ou .TabbedPanelsTab

    font: Arial; font-size:medium;

    Texte dans les panneaux de contenu uniquement

    .TabbedPanelsContentGroup ou .TabbedPanelsContent

    font: Arial; font-size:medium;

Modification des couleurs d’arrière-plan du widget Panneaux à onglet

  1. Pour modifier les couleurs d’arrière-plan des différentes parties d’un widget Panneaux à onglet, 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 des onglets du panneau

    .TabbedPanelsTabGroup ou .TabbedPanelsTab

    background-color: #DDD; (Valeur par défaut)

    Couleur d’arrière-plan des panneaux de contenu

    .Tabbed PanelsContentGroup ou .TabbedPanelsContent

    background-color: #EEE; (Valeur par défaut)

    Couleur d’arrière-plan de l’onglet sélectionné

    .TabbedPanelsTabSelected

    background-color: #EEE; (Valeur par défaut)

    Couleur d’arrière-plan des onglets du panneau ouvert lorsque le pointeur de la souris passe au-dessus de ceux-ci

    .TabbedPanelsTabHover

    background-color: #CCC; (Valeur par défaut)

Limitation de la largeur de panneaux à onglet

Par défaut, le widget Panneaux à onglet se développe pour occuper l’espace disponible. Vous pouvez toutefois limiter la largeur d’un widget Panneaux à onglet en définissant une propriété « width » pour le conteneur de l’accordéon.

  1. Recherchez la règle CSS .TabbedPanels en ouvrant le fichier SpryTabbedPanels.css. Cette règle définit les propriétés de l’élément conteneur principal du widget Panneaux à onglet.

    Remarque :

    Vous pouvez également trouver cette règle en sélectionnant le widget Panneaux à onglet puis en examinant le panneau Styles CSS (Fenêtre > Styles CSS). Assurez-vous que le panneau se trouve en mode Actuel.

  2. Ajoutez une propriété et une valeur de largeur (width) à la règle, par exemple width: 300px;.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne