Comment créer des panneaux pliables avec jQuery dans Dreamweaver

Le widget Accordéon jQuery UI dans Dreamweaver, il est facile d'ajouter des panneaux réductibles les visiteurs du site peuvent ouvrir et fermer sans rafraîchir la page web. Cette fonctionnalité jQuery vous permet de faire une meilleure utilisation de l'espace sur une page en affichant plus d'informations en moins de place dans une fenêtre de navigateur.

Vous pouvez voir comment les panneaux pliables en accordéon contiennent les préférences nom, photo, et de l'habitat de chaque oiseau chanteur dans ce site Web de la nature. Le résultat est que vous pouvez facilement voir les noms de tous les oiseaux sur une page. Pour afficher la description d'un oiseau, un utilisateur doit seulement cliquez sur l'onglet en haut de l'écran (où le nom de l'oiseau semble), et le panneau ouvre instantanément.

La photo et la description de la paruline verdâtre est ouvert tandis que les autres sur la page sont fermées. La beauté de jQuery est que la page n'a pas à être rechargé pour les panneaux pour ouvrir ou fermer. Cliquez une fois sur un onglet et un panneau ouvre instantanément. Cliquez sur un autre onglet, et que le panneau ouvre que le panneau précédemment ouvert ferme.

Panneaux pliables peuvent être utilisés pour afficher du texte et des images ainsi que des fichiers multimédias tels que l'audio, la vidéo et les fichiers Flash.

Pour afficher un panneau 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 Live View en haut à gauche de l'espace de travail de Dreamweaver.

Après avoir créé un ensemble de panneaux de l'accordéon avec le menu jQuery UI dans Dreamweaver, vous pouvez changer un certain nombre de paramètres du panneau en utilisant l'inspecteur des propriétés, comme indiqué dans les instructions qui suivent.

Suivez ces étapes pour créer un ensemble de panneau accordéon:

1. Placez votre curseur sur une page où vous voulez que les panneaux de l'accordéon à comparaître.

2. Choisissez Insertion-jQuery UI-Accordion, ou cliquez sur le point de l'accordéon dans le panneau jQuery UI Insertion.

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

   
3. 
   
   
   
   

   Sélectionnez le mot Section au sommet de chaque panneau, et le remplacer par le texte que vous souhaitez voir apparaître dans la zone onglet du panneau.

   Par défaut, le texte dans la zone Tab est le texte brut, mais vous pouvez changer cela en modifiant la règle CSS correspondant ou de formater le texte en utilisant les balises HTML, tels que les balises de titre.

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

   Vous pouvez coller du texte dans un panneau vous vous en seriez collez du texte n'importe où ailleurs sur la page. De même, vous insérer des images dans les panneaux comme vous le feriez nulle part ailleurs sur une page: placez votre curseur dans le panneau, choisissez Insertion-Image-Image, et sélectionnez le fichier GIF, JPEG, PNG ou le fichier que vous souhaitez afficher. Vous pouvez également sélectionner un fichier Photoshop si vous voulez utiliser Dreamweaver pour optimiser les images.

   Lorsque vous collez du texte dans un panneau, choisissez Modifier-Collage spécial de choisir le montant de la forme que vous souhaitez conserver dans le texte que vous collez dans Dreamweaver. Limiter la quantité de formatage préservé peut réduire les conflits de style potentiels.

5. Pour changer les paramètres du panneau, cliquez sur l'onglet bleu jQuery accordéon au sommet 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. (En cliquant sur l'onglet bleu correctement peut être difficile, alors assurez-vous cliquez sur la zone bleue.) Cliquez n'importe où ailleurs sur la page, et de l'inspecteur retourne à ses réglages par défaut.

   

6. Ajouter ou supprimer des panneaux en utilisant le champ de panneaux dans l'inspecteur des propriétés.

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

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

7. Changer la façon dont les panneaux sont ouverts en utilisant le menu déroulant de l'événement.

   Les paramètres de l'événement contrôlent si les panneaux ouverts quand un utilisateur clique sur un onglet du panneau (Cliquez) ou de rouleaux d'un curseur sur l'onglet du panneau (Mouseover).

8. Définissez les autres options du panneau, comme souhaité.

   Les options d'accordéon dans l'inspecteur des propriétés sont facultatives, et comprennent la capacité de désactiver tout ou panneaux (Disable) et animer la façon dont les panneaux (liste déroulante Animate) ouvrir et fermer.

9. Choisissez Fichier-Enregistrer pour enregistrer la page- lorsque la boîte de dialogue Fichiers dépendants de Copie apparaît, cliquez sur OK pour générer tous les fichiers connexes.

   Pour les fonctionnalités Spry pour travailler, 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, comme la couleur du visage de la police ou du texte, modifier la règle CSS correspondant.

    Note: Vous ne pouvez pas éditer les styles correspondantes pour un panneau accordéon jusqu'à ce que la page a été enregistrée et Dreamweaver a généré le CSS correspondant et fichiers javascript.

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

    Lorsque vous utilisez votre ordinateur pour prévisualiser une page qui a une fonction interactive nécessitant javascript ou une autre programmation, certains navigateurs, notamment Internet Explorer, affiche un avertissement indiquant que vous devez autoriser les contrôles ActiveX pour afficher la page.

    Ceci est 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 à un serveur Web, puis l'affichez via une connexion Internet, cette erreur ne apparaîtra pour vous ou vos visiteurs.