Création de panneaux à onglets avec jQuery dans Dreamweaver - mannequins

L'option d'onglet jQuery UI dans Dreamweaver facilite l'ajout d'une série de panneaux qui affichent ou masquent le contenu correspondant à une série d'onglets. Similaire aux panneaux pliables, cette fonctionnalité de l'interface utilisateur jQuery vous permet d'afficher plus d'informations dans moins d'espace dans une fenêtre de navigateur.

Tout comme les panneaux d'accordéon, les panneaux à onglets peuvent être utilisés pour afficher du texte, des images et du contenu multimédia.

Lorsque vous créez des onglets avec le widget jQuery UI dans Dreamweaver, vous pouvez spécifier l'ordre des onglets, en contrôlant efficacement le contenu qui apparaît lors du premier chargement de la page.

Procédez comme suit pour créer un groupe de panneaux à onglets:

1. Placez votre curseur sur une page où vous souhaitez afficher le panneau à onglets.

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

   Un panneau à onglets est inséré dans la page et les fichiers CSS correspondants apparaissent dans le panneau Source du concepteur CSS.

   

3. Dans l'espace de travail principal, sélectionnez tour à tour le texte Tab1, Tab2, et Tab 3 , puis remplacez chaque en-tête d'onglet par le texte que vous souhaitez afficher dans l'onglet du panneau région.

   Vous pouvez modifier le contenu des onglets uniquement dans l'espace de travail et non dans l'inspecteur des propriétés. Par défaut, le texte de la zone Tab est en gras et en noir, mais vous pouvez modifier ce format en modifiant la règle CSS correspondante.

4. Pour ajuster la taille de chaque onglet, sélectionnez l'onglet, puis utilisez les paramètres Hauteur et Largeur dans l'inspecteur des propriétés.

   Lorsqu'un onglet individuel est sélectionné, l'inspecteur des propriétés affiche les paramètres de cet onglet en particulier.

   

5. Pour ajouter du contenu, sélectionnez le mot Contenu dans la zone principale de l'onglet sélectionné, puis entrez du texte, des images ou du contenu multimédia.

   Vous pouvez copier du texte dans un panneau en le collant comme vous collez du texte ailleurs sur la page. De même, insérez des images dans des panneaux comme vous le feriez n'importe où sur une page: Choisissez Insérer → Image → Image, puis sélectionnez le fichier GIF, JPEG ou PNG que vous souhaitez afficher. Vous pouvez également ajouter des fichiers multimédia ou Photoshop si vous souhaitez utiliser Dreamweaver pour optimiser vos images.

6. Pour modifier l'aspect d'un onglet ou d'un panneau, tel que la police ou la couleur, modifiez la règle CSS correspondante.

   Par exemple, pour modifier la couleur ou la police du texte dans les onglets, cochez la case autour de l'onglet et le style de la boîte est automatiquement sélectionné dans le panneau du sélecteur CSS Designer.

7. Pour modifier le nombre ou l'ordre des panneaux à onglets, cliquez sur l'onglet onglets jQuery bleus situé en haut du panneau 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. Cliquez en dehors de la zone encadrée bleue et l'inspecteur des propriétés revient à ses paramètres par défaut.

   

8. Pour ajouter des onglets, cliquez sur l'icône plus (+) dans l'inspecteur des propriétés.

   De nouveaux onglets apparaissent dans l'espace de travail.

9. Pour modifier l'ordre des onglets, sélectionnez le nom de l'onglet dans l'Inspecteur des propriétés, puis utilisez les flèches dans le champ Panneaux pour déplacer le panneau.

   Les noms du panneau se déplacent vers le haut et vers le bas du menu lorsque l'ordre est modifié. Les panneaux et leurs onglets correspondants apparaissent dans la page Web dans l'ordre dans lequel ils apparaissent dans l'inspecteur des propriétés.

10. Sélectionnez le panneau dans la liste déroulante Panneaux que vous souhaitez afficher lorsque la page est chargée dans un navigateur Web.

    La liste déroulante correspond aux noms que vous attribuez à chaque onglet de l'espace de travail.

11. 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 automatiquement tous les fichiers associés.

    Pour que les fonctionnalités de l'interface utilisateur jQuery fonctionnent, vous devez télécharger ces fichiers sur votre serveur Web lorsque vous téléchargez la page Web.

12. Cliquez sur l'icône de globe en haut de l'espace de travail et sélectionnez un navigateur pour prévisualiser votre travail dans un navigateur.

    Selon votre navigateur Web, vous devrez peut-être autoriser les contrôles ActiveX à prévisualiser la page sur votre ordinateur.