Comment passer de jQuery à Vanilla JavaScript avec Bootstrap 5

Bootstrap 5 est un framework CSS gratuit et open-source destiné au développement Web frontal réactif et mobile.

Au cas où vous ne le sauriez pas, Bootstrap 5 alpha a été officiellement lancé. Il a supprimé jQuery en tant que dépendance, a abandonné la prise en charge d'Internet Explorer 9 et 10 et apporte des mises à jour impressionnantes pour les fichiers Sass, le balisage et une nouvelle API utilitaire.

Ce tutoriel vous montrera comment commencer à utiliser VanillaJS au lieu de jQuery lors de la création de sites Web à l'aide de la dernière version de Bootstrap 5.

Commencer

Vous devrez inclure Bootstrap 5 dans votre projet. Il y a plusieurs façons de faire cela, mais pour rester simple, nous inclurons le framework via CDN.

Tout d'abord, créons une index.htmlpage vierge dans un dossier de projet:

     Bootstrap 5 Vanilla JS tutorial by Themesberg    

Incluez la bootstrap.min.cssfeuille de style avant la fin de votre balise:

Ensuite, incluez la bibliothèque Popper.js et le fichier JavaScript Bootstrap principal avant la fin de votre balise:

Curieux de savoir ce integrityque crossoriginsignifient les attributs et ? Voici l'explication:

Attribut d'intégrité : permet au navigateur de vérifier la source du fichier pour s'assurer que le code n'est jamais chargé si la source a été manipulée.

Attribut Crossorigin : est présent lorsqu'une demande est chargée en utilisant 'CORS' qui est maintenant une exigence de vérification SRI lorsqu'elle n'est pas chargée depuis la 'même origine'.

Génial! Nous avons maintenant inclus avec succès la dernière version de Bootstrap dans notre projet. L'une des différences évidentes est que nous n'avons plus besoin d'exiger jQuery en tant que dépendance, ce qui permet d'économiser environ 82,54 Ko de bande passante dans un état réduit.

Passer de jQuery à Vanilla JS

Avant de commencer avec cette section, vous devez savoir que l'utilisation de Bootstrap 5 avec jQuery est toujours possible selon la documentation officielle.

Nous vous recommandons d'utiliser Vanilla JavaScript si la seule raison pour laquelle vous avez utilisé jQuery était pour le sélecteur de requête, car vous pouvez faire la même chose avec le document.querySelector('#element')comme si c'était le cas $('#element').

La première étape consiste à créer un fichier JavaScript et à l'inclure avant la fin de la balise body mais après que les deux autres incluent:

Alors, quand avez-vous réellement besoin d'utiliser Javascript avec Bootstrap 5? Certains composants du framework ne fonctionnent que s'ils sont initialisés via Javascript, tels que les info-bulles, les popovers et les toasts.

En outre, avec des composants tels que les modaux, les listes déroulantes et les carrousels, vous souhaiterez peut-être être en mesure de les modifier par programme en fonction d'une action utilisateur ou d'une logique d'application.

Initialisation des info-bulles via Vanilla JavaScript

Nous aimons tous les info-bulles, mais elles ne fonctionnent que si elles sont initialisées via JavaScript. Commençons par créer un élément d'info-bulle dans notre index.htmlfichier:

 Tooltip on top 

Le survol du bouton n'affichera pas l'info-bulle, car par défaut, il s'agit d'une fonctionnalité d'activation de Bootstrap et elle doit être initialisée manuellement à l'aide de JavaScript. Si vous voulez le faire avec jQuery, voici à quoi cela ressemblerait:

$('#tooltip').tooltip();

En utilisant Vanilla JS, vous devrez utiliser le code suivant pour activer l'info-bulle:

var tooltipElement = document.getElementById('tooltip'); var tooltip = new bootstrap.Tooltip(tooltipElement);

Ce que fait le code ci-dessus, c'est qu'il sélectionne l'élément avec l'identifiant unique "tooltip", puis crée un objet tooltrap Bootstrap. Vous pouvez ensuite l'utiliser pour manipuler l'état de l'info-bulle, comme afficher ou masquer l'info-bulle par programme.

Voici un exemple sur la façon dont vous pouvez l'afficher / le masquer via des méthodes:

var showTooltip = true; if (showTooltip) { tooltip.show(); } else { tooltip.hide(); }

Si vous souhaitez activer toutes les info-bulles, vous pouvez également utiliser le code suivant:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) });

Ce qui se passe ici, c'est que nous sélectionnons tous les éléments qui ont l' data-toggle="tooltip"attribut et la valeur et initialisons un objet info-bulle pour chacun. Il les enregistre également dans une variable tooltipList.

Activer / désactiver la visibilité de vos éléments à l'aide des méthodes JavaScript Collapse

La fonction de réduction sur Bootstrap est un autre moyen très pratique d'afficher et de masquer des éléments via des attributs de données ou JavaScript.

Voici un exemple de la façon dont nous pouvons afficher ou masquer une carte lorsqu'un certain bouton est cliqué. Commençons par créer le balisage HTML:

Toggle Card ...
Freecodecamp.org

Awesome resource to learn programming from.

Learn coding for free

Nous avons donc créé un bouton avec l'identifiant toggleCardButtonet une carte avec l'identifiant card. Commençons par sélectionner les deux éléments:

var toggleButton = document.getElementById('toggleCardButton'); var card = document.getElementById('card');

Ensuite, nous devons créer un objet réductible en utilisant l'élément de carte nouvellement sélectionné:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

Ce que fait l' toggle:falseindicateur, c'est qu'il garde l'élément visible après la création de l'objet. S'il n'est pas présent, il masquerait la carte par défaut.

Nous devons maintenant ajouter un écouteur d'événements pour le bouton de l'action de clic:

toggleButton.addEventListener('click', function () { // do something when the button is being clicked });

Et enfin, nous devons basculer la carte en utilisant l'objet réductible que nous avons initialisé comme ceci:

toggleButton.addEventListener('click', function () { collapsableCard.toggle(); });

That's it! Now the card will be shown/hidden whenever the button is clicked. Of course all of this could've been done using the data attributes feature from Bootstrap, but you may want to toggle certain elements based on an API call or a logic in your application.

Conclusion

If you have followed along this tutorial you should now be able to use the most popular CSS framework without the need of requiring jQuery in your project. This lets you save up to 85 KB of data and makes your website faster! Congratulations ?

If you appreciate this tutorial and like using Bootstrap as a CSS framework for your projects, I invite you to check out some of the free and premium Bootstrap themes, templates, and UI Kits that we build at Themesberg ❤️