Comment utiliser jQuery pour créer une interface à onglets dans CSS3 - dummies

Pour certains sites Web, une interface à onglets est la meilleure méthode pour afficher les informations: CSS3 a du code pour utiliser la méthode jQuery pour créer une interface à onglets

$ (function () {// Créer des variables pour contenir des données temporaires var TabHeads = "; var TabContent ="; // Obtenir le fichier de données XML et le traiter. $. Get ("XMLTabData.xml", function (data) {// Localiser chaque entrée Titre et l'utiliser pour // créer un en-tête d'onglet. $ (données). find ("Titre"). each (function () {TabHeads + = "
" + $ (this). attr ("légende") + "
";}); // Ajouter les données à la zone d'en-tête. $ (" # En-têtes "). Append (TabHeads); // Localiser chaque entrée de contenu et l'utiliser // pour créer le contenu de l'onglet. data). find ("Contenu"). each (function () {TabContent + = " " + $ (this). text () + "";}) // Ajoute les données à la zone de contenu de l'onglet. $ ("# Tabs "). append (TabContent); // Terminez le processus en affichant les // onglets. $ ("# Tabs"). onglets ();});});

Le code commence par créer deux variables: TabHeads et TabContent, pour contenir les données utilisées pour remplir l'interface à onglets. Cette information est finalement ajoutée à deux balises HTML, comme indiqué ici:

La méthode get () obtient le fichier XML, XMLTabData. XML et place le contenu dans les données. Qu'est-ce que les données contient est un fichier XML entièrement formé qui est passé à une fonction anonyme (un qui n'a pas de nom) que vous définissez comme: function (data) {}. La fonction est exécutée lorsque la récupération de données est terminée, elle sert donc de rappel pour une lecture de données asynchrone.

Tout ce que vous devez savoir pour l'instant, c'est que le fichier XML contient des éléments qui contiennent les données utilisées pour créer les entrées de tabulation, ainsi que des éléments qui contiennent les données placées dans chaque onglet. Dans ce cas, l'onglet 1 serait un titre et "Ceci est du contenu pour l'onglet 1." serait le contenu de cet onglet.

Toutes les informations de rubrique apparaissent dans les éléments. Le code demande à jQuery de trouver () chacun des éléments et de les traiter un à la fois en utilisant la méthode each (). La méthode each () crée une boucle qui fournit automatiquement l'accès aux éléments individuels à travers cette variable. Les en-têtes d'onglet sont stockés dans une liste non ordonnée (

), en-têtes, qui fait déjà partie du code HTML de la page d'exemple.

Le contenu de chaque onglet apparaît dans les éléments ajoutés après l'élément

, en-têtes. Le contenu peut être quelque chose - y compris les contrôles utilisés pour l'exemple d'interface à onglets précédent. Le problème le plus important à prendre en compte est de savoir comment stocker des informations dans le fichier XML.Assurez-vous d'échapper les balises afin qu'elles ne soient pas interprétées comme des éléments XML.

Comme pour les en-têtes, le code utilise find () pour localiser chacun des éléments du fichier XML et les convertir au format HTML requis pour créer le contenu de l'onglet. La méthode each () crée la boucle utilisée pour traiter chaque élément un à la fois.