Télécharger cours informatique en PDF Cours informatique PDF Plan de cours
- Fichiers de base
- Utilisation du DOM
- Avec un peu plus de complexité
- Utilisation de jQuery
Ecrire le balisage
Commençons par écrire notre balisage comme si notre visiteur n’a même pas JavaScript activé. Même si vous ne souhaitez pas prendre en charge les utilisateurs sans JavaScript.
Hi, this is the first tab.
This is the 2nd tab.
And this is the 3rd tab.
J’ai utilisé des identifiants de fragment (# tab1, # tab2, # tab3) pour les valeurs de href dans la navigation. Chaque élément contenant le contenu d’un onglet reçoit un identifiant qui correspond à un identifiant de fragment. De cette façon, les liens sont sémantiques et continuent à être fonctionnels même si le visiteur a JavaScript désactivé.
JavaScript fournit un accès direct à l’identificateur de fragment, ou hachage, pour les objets d’élément d’ancrage et l’objet window.location en utilisant leur propriété de hachage.
$('ul.tabs').each(function(){ // For each set of tabs, we want to keep track of // which tab is active and its associated content var $active, $content, $links = $(this).find('a'); // If the location.hash matches one of the links, use that as the active tab. // If no match is found, use the first link as the initial active tab. $active = $($links.filter('[href=''+location.hash+'']')[0] || $links[0]); $active.addClass('active'); $content = $($active[0].hash); // Hide the remaining content $links.not($active).each(function () { $(this.hash).hide(); }); // Bind the click event handler $(this).on('click', 'a', function(e){ // Make the old tab inactive. $active.removeClass('active'); $content.hide(); // Update the variables with the new link and content $active = $(this); $content = $(this.hash); // Make the tab active. $active.addClass('active'); $content.show(); // Prevent the anchor's default click action e.preventDefault(); }); });Téléchargement un deuxième exemple de création des onglet à l’aide de Javascript et jQuery.
Profitez de ce manuel de formation en PDF pour comprendre mieux le jQuery et enrichir votre connaissance.
Commencez à télécharger ce cours adapté pour vous et à apprendre jQuery.
Créer une boîte d'onglets à la mode Web 2.0 avec jQuery Partie 2 : le code JavaScript par Dave Lizotte (PcKULT.NET)
– 3 – Copyright © 13/11/2008 – Dave Lizotte. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu :textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300000 E de dommages et intérêts. http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/boite-onglets-web2/
Fichiers de base
Voici la base à partir de laquelle nous allons travailler :
Les codes HTML et CSS correspondants sont disponibles ici
Utilisation du DOM
Les éléments que nous recherchons se nomment :
•
•
méthode : document.getElementById() . Ainsi, document.getElementById('content_1') va nous retourner l'élément
correspondant au premier onglet. Il suffit alors de modifier le style pour mettre la valeur display:none à display:block :
document .getElementById( 'content_1 ').style .display = 'none ';
Afin de modifier l'onglet actif, il suffit de modifier le nom de sa classe comme suit :
document .getElementById( 'tab_1 ').className = 'active ';
Voici donc le code simple et complet pour une implémentation de base de votre gestionnaire d'onglets :
