• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Personnalisez les fonctionnalités à l'aide de jQuery

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

De nombreux composants de Bootstrap utilisent JavaScript pour implémenter leurs fonctionnalités. Les plugins JavaScript des composants reposent sur la bibliothèque populaire jQuery. Certains d'entre eux dépendent également de la bibliothèque Popper.js. C'est la raison pour laquelle nous avons inclus jQuery et Popper.js avant d'inclure la bibliothèque Bootstrap.js, pour nous assurer que tous les composants de la page fonctionnent correctement.  

Vous avez déjà rencontré certains des composants qui utilisent JavaScript dans ce cours, tels que la barre de navigation, le carrousel et l'alerte. Lorsque vous avez implémenté ces composants, vous avez appris l'une des méthodes préférées d'utilisation des fonctionnalités de JavaScript dans Bootstrap, c'est-à-dire les attributs HTML   data-*.

Par exemple, si vous examinez le code HTML de la page d'accueil que vous avez créée, vous constaterez que le  <div>  principal du carrousel, ainsi que les éléments de contrôle du carrousel (éléments des boutons Précédent/Suivant), comportent des attributs de données pour implémenter les fonctionnalités de JavaScript. Dans le cas du carrousel, vous pouvez observer les options dans la section pertinente de sa page de documentation, et vous trouverez des détails similaires dans la documentation d'autres éléments.

Filtrez du contenu à l'aide de jQuery

Étant donné que l'école d’informatique (Info School) comportera de nombreuses leçons, il serait plus agréable pour vos utilisateurs de pouvoir filtrer le contenu à l’aide d’une recherche.

À présent, vous intégrerez une zone de saisie simple en haut de la page Cours, qui permettra aux utilisateurs d'entrer le terme de leur recherche, comme dans l’exemple ci-dessous :

Page Cours avec la zone de saisie de la recherche
Page Cours avec la zone de saisie de la recherche

Commencez par ajouter la zone de saisie entre le titre et la liste des leçons :

<div class="row mb-3">
<div class="col">
<input class="form-control" id="searchInput" type="text" placeholder="Search..">
</div>
</div>

Ensuite, ajoutez le JavaScript qui filtrera la liste, afin qu'elle n'inclue que les leçons qui contiennent la saisie de l'utilisateur dans le texte de la liste. Ajoutez l'élément suivant de JavaScript dans une balise  <script>  à la fin de la page cours.html, juste avant la balise  </body>  de fermeture :

<script>
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#lessonList .col-12").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>

La syntaxe utilisée pour la sélection des éléments dans jQuery utilise le format  $(“selector”). Cela permet de sélectionner les éléments qui correspondent au sélecteur entre parenthèses. Si vous souhaitez en savoir plus sur jQuery ou si vous avez besoin d'un cours de révision, consultez le cours Introduction à jQuery sur OpenClassrooms.

Cet extrait de code recherchera l'événement  on.(“keyup”) dans la zone de saisie pour détecter quand l’utilisateur a entré une lettre, puis filtrera les éléments enfants du   div   #lessonList  qui comprend une classe.col-12. Ainsi, seules les colonnes qui contiennent le texte de recherche affiché et celles qui ne contiennent pas ce texte verront leur affichage basculer sur "none" via la fonction jQuery toggle().

La dernière étape pour faire fonctionner ce filtre de recherche est de s'assurer que l’élément  <div>   classe  .row  qui contient la liste des leçons possède un identifiant lessonList, pour faire correspondre le sélecteur utilisé dans ce code. 

Une fois que vous avez apporté les modifications au fichier cours.html, testez la nouvelle fonction en entrant le texte qui s'affiche dans le titre de la leçon ou les descriptions répertoriées sur la page (par exemple, “espace” ou “exercice”), et les leçons seront filtrées pour n'afficher que celles contenant ce texte.

Vous pouvez consulter le répertoire partie-5/chapitre-2/filter dans le dépôt Git du cours, pour référence.

En résumé

  • Bootstrap utilise des bibliothèques JavaScript pour implémenter ses fonctionnalités.

  • Utilisez la bibliothèque de jQuery pour créer des fonctionnalités personnalisées à l'aide des classes et composants de Bootstrap.

Maintenant que vous avez appris à utiliser jQuery pour personnaliser les fonctionnalités de votre site web Bootstrap, vous êtes prêt à appliquer ce que vous avez appris à vos projets !

Exemple de certificat de réussite
Exemple de certificat de réussite