Comment créer des panneaux réductibles avec jQuery dans Dreamweaver - des mannequins

Le widget d'accordéon de l'interface utilisateur jQuery dans Dreamweaver facilite l'ajout de panneaux réductibles que les visiteurs du site peuvent ouvrir et fermer sans actualiser la page Web. Cette fonctionnalité jQuery vous permet de mieux utiliser l'espace sur une page en affichant plus d'informations dans moins d'espace dans une fenêtre de navigateur.

Vous pouvez voir comment les panneaux pliables en accordéon contiennent le nom, la photo et les préférences d'habitat de chaque oiseau chanteur dans ce site Web nature. Le résultat est que vous pouvez facilement voir les noms de tous les oiseaux sur une page. Pour voir la description de n'importe quel oiseau, un utilisateur n'a qu'à cliquer sur l'onglet en haut du panneau (où le nom de l'oiseau apparaît), et le panneau s'ouvre instantanément.

La photo et la description de la paruline à couronne orange sont ouvertes tandis que les autres sur la page sont fermées. La beauté de jQuery est que la page n'a pas besoin d'être rechargée pour que les panneaux s'ouvrent ou se ferment. Cliquez une fois sur un onglet et un panneau s'ouvre instantanément. Cliquez sur un autre onglet et ce panneau s'ouvre lorsque le panneau précédemment ouvert se ferme.

Les panneaux réducteurs peuvent être utilisés pour afficher du texte et des images, ainsi que des fichiers multimédias tels que des fichiers audio, vidéo et Flash.

Pour afficher un panneau d'accordéon (ou de nombreuses autres fonctionnalités avancées dans Dreamweaver) tel qu'il apparaîtra dans un navigateur Web, vous devez cliquer sur le bouton Vue en direct en haut à gauche de l'espace de travail Dreamweaver.

Après avoir créé un ensemble de panneaux d'accordéon avec le menu de l'interface utilisateur jQuery dans Dreamweaver, vous pouvez modifier un certain nombre de paramètres du panneau à l'aide de l'inspecteur des propriétés, comme indiqué dans les instructions suivantes.

Procédez comme suit pour créer un ensemble de panneaux d'accordéon:

1. Placez votre curseur sur une page où vous souhaitez que les panneaux d'accordéon apparaissent.

2. Choisissez Insérer → Interface utilisateur JQuery → Accordéon ou cliquez sur l'élément Accordéon dans le panneau Insertion de l'interface utilisateur jQuery.

   Un groupe de panneaux d'accordéon pliable jQuery UI avec trois panneaux apparaît dans la page.

   

3. Sélectionnez le mot Section en haut de chaque panneau et remplacez-le par le texte que vous souhaitez voir apparaître dans la zone Tab du panneau.

   Par défaut, le texte de la zone Tab est du texte brut, mais vous pouvez le modifier en modifiant la règle CSS correspondante ou en formatant le texte à l'aide de balises HTML, telles que les balises d'en-tête.

4. Sélectionnez le mot Contenu dans la zone principale de chaque panneau et entrez le texte ou les images que vous souhaitez afficher.

   Vous pouvez coller du texte dans un panneau de la même façon que vous collez du texte ailleurs sur la page. De même, vous insérez des images dans des panneaux comme vous le feriez n'importe où sur une page: Placez votre curseur dans le panneau, choisissez Insérer → Image → Image et sélectionnez le fichier GIF, JPEG ou PNG que vous souhaitez afficher.Vous pouvez également sélectionner un fichier Photoshop si vous souhaitez utiliser Dreamweaver pour optimiser les images.

   Lorsque vous collez du texte dans un panneau, choisissez Edition → Collage spécial pour choisir la quantité de mise en forme que vous souhaitez conserver dans le texte que vous collez dans Dreamweaver. Limiter la quantité de mise en forme préservée peut réduire les conflits de style potentiels.

5. Pour modifier les paramètres du panneau, cliquez sur l'onglet blue jQuery Accordion en haut des panneaux dans la zone de conception.

   Lorsque vous cliquez sur l'onglet bleu, les paramètres du panneau apparaissent dans l'inspecteur des propriétés. (Cliquer correctement sur l'onglet bleu peut être difficile, alors assurez-vous de cliquer sur la zone bleue.) Cliquez n'importe où sur la page et l'inspecteur revient à ses paramètres par défaut.

   

6. Ajoutez ou supprimez des panneaux à l'aide du champ Panneaux de l'inspecteur des propriétés.

   Pour ajouter un panneau, cliquez sur le signe plus (+) à droite du champ Panneaux. Pour supprimer un panneau d'un jeu d'accordéons, sélectionnez d'abord le nom du panneau dans la liste déroulante Panneaux de l'inspecteur des propriétés, puis cliquez sur le signe moins (@@ min).

   Vous pouvez ajouter un autre panneau en cliquant à nouveau sur le signe plus.

7. Modifiez l'ouverture des panneaux à l'aide du menu déroulant Evénement.

   Les paramètres d'événement contrôlent si les panneaux s'ouvrent lorsqu'un utilisateur clique sur un onglet de panneau (clic) ou place un curseur sur l'onglet du panneau (survol de la souris).

8. Définissez les autres options du panneau, selon vos besoins.

   Les options d'accordéon de l'inspecteur des propriétés sont facultatives et incluent la possibilité de désactiver tout ou partie des panneaux (Désactiver) et d'animer l'ouverture et la fermeture des panneaux (liste déroulante Animate).

9. Choisissez Fichier → Enregistrer pour enregistrer la page. Lorsque la boîte de dialogue Copier les fichiers dépendants apparaît, cliquez sur OK pour générer tous les fichiers associés.

   Pour que les fonctions Spry fonctionnent, vous devez télécharger ces fichiers sur votre serveur Web lorsque vous téléchargez la page Web.

10. Pour modifier l'apparence du panneau, telle que la police ou la couleur du texte, modifiez la règle CSS correspondante.

    Remarque: Vous ne pouvez pas modifier les styles correspondants d'un panneau accordéon tant que la page n'a pas été enregistrée et que Dreamweaver a généré les fichiers CSS et JavaScript correspondants.

11. Pour voir comment les panneaux apparaîtront dans un navigateur Web, cliquez sur l'icône en forme de globe en haut de l'espace de travail et sélectionnez le navigateur que vous souhaitez utiliser pour prévisualiser la page.

    Lorsque vous utilisez votre ordinateur pour prévisualiser une page comportant une fonctionnalité interactive nécessitant JavaScript ou une autre programmation, certains navigateurs Web, y compris Internet Explorer, affichent un avertissement indiquant que vous devez autoriser les contrôles ActiveX à afficher la page.

    Il s'agit d'un avertissement de sécurité qui apparaît uniquement lorsque la page est ouverte sur le même ordinateur où la page est enregistrée. Si vous publiez la page sur un serveur Web et que vous l'affichez ensuite via une connexion Internet, cette erreur ne s'affichera pas pour vous ou les visiteurs de votre site.