Comment construire une interface à onglets dans AJAX pour la programmation HTML5 et CSS3 - les nuls

Une technique importante dans le développement web HTML5 et CSS3 est l'utilisation d'une interface à onglets dans AJAX. Cela permet à l'utilisateur de modifier le contenu d'un segment en sélectionnant l'un d'une série d'onglets.

Dans une interface à onglets, un seul élément est visible à la fois, mais les onglets sont tous visibles. L'interface à onglets est un peu plus prévisible que l'accordéon car les onglets (contrairement aux en-têtes de l'accordéon) restent au même endroit.

Les onglets changent de couleur pour indiquer quel onglet est actuellement en surbrillance, et ils changent également d'état (normalement en changeant de couleur) pour indiquer qu'ils sont survolés. Lorsque vous cliquez sur un autre onglet, la zone de contenu principale du widget est remplacée par le contenu correspondant.

C'est ce qui se passe lorsque l'utilisateur clique sur l'onglet.

Comme l'accordéon, l'effet de tabulation est incroyablement facile à réaliser. Regardez le code:

$ (init); Fonction init () {$ ("# tabs"). onglets ();} onglets. html

Tab Demo

Livre 1
Livre 2
Livre 3


Livre I - Création de la base HTML







Fondations HTML sonores
Tout sur la validation
Choix de vos outils
Gestion des informations avec listes et tableaux
Établissement de liens avec des liens
Ajout d'images
Création formes


Livre II - Styling avec CSS

Coloriage de votre monde
Texte de style
Sélecteurs, classe et style
Bordures et arrière-plans
Niveaux de CSS


Livre III - Utilisation de position CSS pour la mise en page

Amusement avec le flotteur fabuleux
Construire des mises en page flottantes
Listes de style et menus
Utiliser un positionnement alternatif

Le mécanisme de construction d'une interface à onglets est très similaire à celui accordéons:

1. Ajouter tous les fichiers appropriés.

   Comme la plupart des effets de l'interface utilisateur jQuery, vous avez besoin de jQuery, de l'interface utilisateur jQuery et d'un fichier CSS de thème. Vous devez également accéder au répertoire images pour les graphiques d'arrière-plan du thème.

2. Construire du HTML comme d'habitude.

   Si vous construisez une page Web bien organisée, vous êtes déjà très proche.

3. Construire un div qui contient toutes les données à onglets.

   C'est l'élément sur lequel vous allez utiliser la magie de jQuery.

4. Placez les zones de contenu principal dans les divs nommés.

   Chaque partie du contenu qui sera affichée en tant que page doit être placée dans une div avec un identifiant descriptif. Chacune de ces divs devrait être placée dans l'onglet div.

5. Ajoutez une liste de liens locaux au contenu.

   Construire un menu de liens. Placez-le en haut de la div tabbed. Chaque lien devrait être un lien local vers l'un des divs. Par exemple, l'index ressemble à ceci:

   
   Livre 1
   Livre 2
   Livre 3
   
   

6. Construire une fonction init () comme d'habitude.

   Utilisez les techniques normales de jQuery.

7. Appelez la méthode onglets () sur la div principale.

   Incroyablement, une ligne de code jQuery fait tout le travail.