Vidéo: Formation jQuery Leçon 9 Réaliser une navigation par onglet 2025
De nombreux développeurs utilisent des interfaces à onglets pour réduire la complexité de l'application.Si vous pouvez concentrer l'attention de l'utilisateur sur un élément à la fois, Dans cet exemple CSS3, vous commencez par un simple appel de fonction (vous pouvez trouver le code complet de cet exemple dans le dossier Chapter 06Widgets du code téléchargeable sous la forme Tabs. HTML.)
$ (function () {$ ("# Configuration"). tabs ();});
L'astuce pour cet exemple est dans les balises HTML, tout comme pour l'exemple du widget Accordéon. vous créez les deux pages pour obtenir l'apparence souhaitée, comme indiqué dans le code suivant:
- Couleur de premier plan
- Couleur de fond
- Options
… Plus d'entrées et d'étiquettes … Rouge
… Plus d'entrées et d'étiquettes … Utiliser des sons spéciaux
Utiliser des effets spéciaux
Notez que les éléments
ont disparu. Au lieu d'utiliser des en-têtes pour définir la séparation entre les éléments, vous fournissez plutôt une liste non ordonnée (
). La liste doit contenir un href pour chacun des éléments de la page. Il n'y a pas de différence dans le contenu de la page. Vous devez également fournir des CSS pour formater le contrôle comme indiqué ici.
#Configuration {largeur: 90%; text-align: center;} #Configuration div {text-align: left;}
Dans ce cas, le style #Configuration définit la taille globale de l'interface à onglets et le fait que les onglets ont du texte centré. La div #Configuration modifie l'alignement du contenu à gauche.
Pour effectuer une modification, vous cliquez sur l'onglet contenant les informations que vous voulez voir. Vous effectuez les modifications normalement. Cliquez sur le bouton Modifier la configuration pour envoyer les modifications au serveur. Si vous testez cet exemple en utilisant le même processus que pour l'exemple accordéon, vous obtiendrez exactement les mêmes résultats - seul l'aspect de l'interface a changé.
