Πώς να κάνετε εναλλαγή από το jQuery σε Vanilla JavaScript με το Bootstrap 5

Το Bootstrap 5 είναι ένα ελεύθερο και ανοιχτού κώδικα πλαίσιο CSS που απευθύνεται σε ανάπτυξη ιστοσελίδων με δυνατότητα απόκρισης, πρώτης τεχνολογίας.

Σε περίπτωση που δεν το γνωρίζετε, το Bootstrap 5 alpha κυκλοφόρησε επίσημα. Έχει καταργήσει το jQuery ως εξάρτηση, έχει χάσει την υποστήριξη για τον Internet Explorer 9 και 10 και φέρνει μερικές εκπληκτικές ενημερώσεις για τα αρχεία Sass, σήμανση και ένα νέο βοηθητικό πρόγραμμα.

Αυτό το σεμινάριο θα σας δείξει πώς να ξεκινήσετε να χρησιμοποιείτε το VanillaJS αντί για το jQuery όταν δημιουργείτε ιστότοπους χρησιμοποιώντας τη νεότερη έκδοση του Bootstrap 5.

Ξεκινώντας

Θα πρέπει να συμπεριλάβετε το Bootstrap 5 στο έργο σας. Υπάρχουν διάφοροι τρόποι για να το κάνετε αυτό, αλλά για να το κρατήσετε απλό θα συμπεριλάβουμε το πλαίσιο μέσω CDN.

Πρώτα απ 'όλα, ας δημιουργήσουμε μια κενή index.htmlσελίδα μέσα σε ένα φάκελο έργου:

     Bootstrap 5 Vanilla JS tutorial by Themesberg    

Συμπεριλάβετε το bootstrap.min.cssφύλλο στυλ πριν από το τέλος της ετικέτας σας :

Στη συνέχεια, συμπεριλάβετε τη βιβλιοθήκη Popper.js και το κύριο αρχείο Bootstrap JavaScript πριν από το τέλος της ετικέτας σας :

Είστε περίεργοι τι σημαίνουν integrityκαι τα crossoriginχαρακτηριστικά; Εδώ είναι η εξήγηση:

Χαρακτηριστικό ακεραιότητας : επιτρέπει στο πρόγραμμα περιήγησης να ελέγχει την προέλευση του αρχείου για να διασφαλίσει ότι ο κώδικας δεν φορτώνεται ποτέ εάν έχει γίνει χειραγώγηση της πηγής.

Χαρακτηριστικό Crossorigin : υπάρχει όταν φορτώνεται ένα αίτημα χρησιμοποιώντας το "CORS" το οποίο είναι πλέον απαίτηση ελέγχου SRI όταν δεν φορτώνεται από την "ίδια προέλευση".

Μεγάλος! Τώρα έχουμε συμπεριλάβει με επιτυχία τη νεότερη έκδοση του Bootstrap στο έργο μας. Μία από τις προφανείς διαφορές είναι ότι δεν χρειαζόμαστε πλέον το jQuery ως εξάρτηση, εξοικονομώντας περίπου 82,54 KB σε εύρος ζώνης εάν σε κατάσταση ελαχιστοποίησης.

Μετάβαση από το jQuery σε Vanilla JS

Πριν ξεκινήσουμε με αυτήν την ενότητα, πρέπει να γνωρίζετε ότι η χρήση του Bootstrap 5 με το jQuery είναι ακόμα δυνατή σύμφωνα με την επίσημη τεκμηρίωση.

Σας συνιστούμε να χρησιμοποιήσετε το JavaScript της Vanilla εάν ο μόνος λόγος που χρησιμοποιήσατε το jQuery ήταν για τον επιλογέα ερωτημάτων, επειδή μπορείτε να κάνετε το ίδιο πράγμα με το document.querySelector('#element')εάν ήταν $('#element').

Το πρώτο βήμα είναι να δημιουργήσετε ένα αρχείο JavaScript και να το συμπεριλάβετε πριν από το τέλος της ετικέτας σώματος, αλλά αφού τα άλλα δύο περιλαμβάνουν:

Λοιπόν, πότε πρέπει να χρησιμοποιήσετε το Javascript με το Bootstrap 5; Υπάρχουν ορισμένα στοιχεία στο πλαίσιο που λειτουργούν μόνο εάν αρχικοποιηθούν μέσω Javascript, όπως επεξηγήσεις εργαλείων, popovers και τοστ.

Επιπλέον, με στοιχεία όπως modals, dropdowns και carousels, ίσως θελήσετε να μπορείτε να τα αλλάξετε μέσω προγραμματισμού με βάση μια ενέργεια χρήστη ή μια λογική εφαρμογής.

Αρχικοποίηση συμβουλών εργαλείων μέσω JavaScript Vanilla

Όλοι αγαπάμε τις συμβουλές εργαλείων, αλλά δεν λειτουργούν εκτός εάν αρχικοποιηθούν μέσω JavaScript. Ας ξεκινήσουμε πρώτα δημιουργώντας ένα στοιχείο συμβουλών εργαλείων μέσα στο index.htmlαρχείο μας :

 Tooltip on top 

Η τοποθέτηση του κουμπιού πάνω από το κουμπί δεν θα εμφανίζει την επεξήγηση εργαλείου, επειδή από προεπιλογή είναι μια δυνατότητα επιλογής του Bootstrap και πρέπει να αρχικοποιηθεί χειροκίνητα χρησιμοποιώντας JavaScript. Αν θέλετε να το κάνετε με το jQuery, δείτε πώς φαίνεται:

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

Χρησιμοποιώντας το Vanilla JS θα πρέπει να χρησιμοποιήσετε τον ακόλουθο κώδικα για να ενεργοποιήσετε τη συμβουλή εργαλείου:

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

Τι κάνει ο παραπάνω κώδικας που επιλέγει το στοιχείο με το μοναδικό αναγνωριστικό του "tooltip" και στη συνέχεια δημιουργεί ένα αντικείμενο Bootstrap tooltip. Στη συνέχεια, μπορείτε να το χρησιμοποιήσετε για να χειριστείτε την κατάσταση της συμβουλής εργαλείων, όπως εμφάνιση ή απόκρυψη της συμβουλής εργαλείων μέσω προγραμματισμού.

Ακολουθεί ένα παράδειγμα για το πώς θα μπορούσατε να το δείξετε / να το κρύψετε μέσω μεθόδων:

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

Εάν θέλετε να ενεργοποιήσετε όλες τις συμβουλές εργαλείων, θα μπορούσατε επίσης να χρησιμοποιήσετε τον ακόλουθο κώδικα:

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

Αυτό που συμβαίνει εδώ είναι ότι επιλέγουμε όλα τα στοιχεία που έχουν το data-toggle="tooltip"χαρακτηριστικό και την τιμή και προετοιμάζουμε ένα αντικείμενο επεξήγησης εργαλείων για κάθε ένα. Τους αποθηκεύει επίσης σε μια μεταβλητή εργαλείου συμβουλών εργαλείων.

Εναλλαγή της ορατότητας των στοιχείων σας χρησιμοποιώντας τις μεθόδους Σύμπτυξη JavaScript

Η λειτουργία σύμπτυξης στο Bootstrap είναι ένας άλλος πολύ βολικός τρόπος για την εμφάνιση και απόκρυψη στοιχείων μέσω χαρακτηριστικών δεδομένων ή JavaScript.

Ακολουθεί ένα παράδειγμα για το πώς μπορούμε να δείξουμε ή να αποκρύψουμε μια κάρτα όταν κάνετε κλικ σε ένα συγκεκριμένο κουμπί. Ας δημιουργήσουμε πρώτα τη σήμανση HTML:

Toggle Card ...
Freecodecamp.org

Awesome resource to learn programming from.

Learn coding for free

Έτσι δημιουργήσαμε ένα κουμπί με το αναγνωριστικό toggleCardButtonκαι μια κάρτα με το αναγνωριστικό card. Ας ξεκινήσουμε επιλέγοντας τα δύο στοιχεία:

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

Στη συνέχεια, πρέπει να δημιουργήσουμε ένα πτυσσόμενο αντικείμενο χρησιμοποιώντας το στοιχείο κάρτας που επιλέξατε πρόσφατα:

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

Αυτό που κάνει η toggle:falseσημαία είναι ότι διατηρεί το στοιχείο ορατό μετά τη δημιουργία του αντικειμένου. Εάν δεν υπάρχει, θα αποκρύψει την κάρτα από προεπιλογή.

Τώρα πρέπει να προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων για το κουμπί για την ενέργεια κλικ:

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

Και τέλος, πρέπει να αλλάξουμε την κάρτα χρησιμοποιώντας το πτυσσόμενο αντικείμενο που ξεκινήσαμε ως εξής:

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

Αυτό είναι! Τώρα η κάρτα θα εμφανίζεται / κρύβεται κάθε φορά που πατάτε το κουμπί. Φυσικά όλα αυτά θα μπορούσαν να είχαν γίνει χρησιμοποιώντας τη δυνατότητα χαρακτηριστικών δεδομένων από το Bootstrap, αλλά ίσως θελήσετε να αλλάξετε ορισμένα στοιχεία με βάση μια κλήση API ή μια λογική στην εφαρμογή σας.

συμπέρασμα

Εάν έχετε ακολουθήσει αυτό το σεμινάριο, θα πρέπει τώρα να μπορείτε να χρησιμοποιήσετε το πιο δημοφιλές πλαίσιο CSS χωρίς να χρειάζεται να απαιτείται jQuery στο έργο σας. Αυτό σας επιτρέπει να αποθηκεύσετε έως και 85 KB δεδομένων και να κάνετε τον ιστότοπό σας πιο γρήγορο! Συγχαρητήρια;

Αν εκτιμάτε αυτό το σεμινάριο και θέλετε να χρησιμοποιήσετε το Bootstrap ως πλαίσιο CSS για τα έργα σας, σας καλώ να ρίξετε μια ματιά σε μερικά από τα δωρεάν και premium θέματα Bootstrap, πρότυπα και UI Kits που δημιουργούμε στο Themesberg ❤️