Accueil » Developpement web » Créer une boite d’onglet avec jQuery

Créer une boite d’onglet avec jQuery

Télécharger cours gratuit sur Créer une boite d’onglet avec jQuery, ebook de Web en PDF de 6 pages.

Catégorie: Web, type de fichier: PDF, Nombre de page: 6, auteur: , license: Creative commons, taille de fichier: 135.46 Kb, niveau: Débutant, date: 2018-04-27, téléchargement: 757.

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.

 

Ce cours intitulé Créer une boite d’onglet avec jQuery est à télécharger gratuitement, plusieurs autre documents sous la catégorie Web sont disponibles dans ce site, que ce soit vous êtes débutant ou professionel ce cours de jQuery va vous aider à améliorer votre compétence et votre savoire faire dans le Web.

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.

Télécharger

Extrait du cours :

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 :

Laisser une réponse

Votre adresse email ne sera pas publiéeLes champs requis sont surlignés *

*