Kā pāriet no jQuery uz Vanilla JavaScript ar Bootstrap 5

Bootstrap 5 ir bezmaksas un atvērtā koda CSS ietvars, kas paredzēts reaģējošai, mobilajām ierīcēm paredzētas front-end tīmekļa izstrādei.

Gadījumā, ja jūs nezināt, Bootstrap 5 alfa ir oficiāli palaists. Tas ir atcēlis jQuery kā atkarību, ir zaudējis atbalstu pārlūkiem Internet Explorer 9 un 10, kā arī sniedz dažus lieliskus Sass failu atjauninājumus, marķējumu un jaunu Utility API.

Šī apmācība parādīs, kā sākt lietot VanillaJS, nevis jQuery, veidojot vietnes, izmantojot jaunāko Bootstrap 5 versiju.

Darba sākšana

Bootstrap 5 būs jāiekļauj projektā. Ir vairāki veidi, kā to izdarīt, taču, lai tas būtu vienkārši, ietversim ietvaru, izmantojot CDN.

Vispirms izveidosim tukšu index.htmllapu projekta mapē:

     Bootstrap 5 Vanilla JS tutorial by Themesberg    

Iekļaujiet bootstrap.min.cssstila lapu pirms taga taga:

Pēc tam pirms taga beigām iekļaujiet Popper.js bibliotēku un galveno Bootstrap JavaScript failu :

Interesanti, ko nozīmē integrityun crossoriginatribūti? Lūk, paskaidrojums:

Integritātes atribūts : ļauj pārlūkprogrammai pārbaudīt faila avotu, lai kods netiktu ielādēts, ja ar avotu ir manipulēts.

Crossorigin atribūts : ir klāt, kad pieprasījums tiek ielādēts, izmantojot “CORS”, kas tagad ir SRI pārbaudes prasība, ja tas nav ielādēts no “vienas izcelsmes”.

Lieliski! Tagad mēs esam veiksmīgi iekļāvuši jaunāko Bootstrap versiju savā projektā. Viena no acīmredzamajām atšķirībām ir tā, ka mums vairs nebija jāpieprasa jQuery kā atkarība, ietaupot aptuveni 82,54 KB joslas platumā, ja tas ir samazināts.

Pāreja no jQuery uz Vanilla JS

Pirms mēs sākam darbu ar šo sadaļu, jums jāzina, ka saskaņā ar oficiālo dokumentāciju joprojām ir iespējams izmantot Bootstrap 5 ar jQuery.

Mēs iesakām izmantot Vanilla JavaScript, ja vienīgais iemesls, kāpēc jūs izmantojāt jQuery, bija vaicājumu atlasītājs, jo jūs varat darīt to pašu document.querySelector('#element'), it kā tas būtu $('#element').

Pirmais solis ir izveidot JavaScript failu un iekļaut to pirms pamatteksta taga, bet pēc tam, kad pārējie divi ietver:

Tātad, kad jums faktiski ir jāizmanto Javascript ar Bootstrap 5? Sistēmā ir noteikti komponenti, kas darbojas tikai tad, ja tie tiek inicializēti, izmantojot Javascript, piemēram, rīku padomi, uznirstošie logi un grauzdiņi.

Turklāt, iespējams, vēlēsities, lai ar tādiem komponentiem kā modāli, nolaižamie izvēlnes un karuseļi varētu tos programmiski mainīt, pamatojoties uz lietotāja darbību vai lietojumprogrammas loģiku.

Inicializē padomus, izmantojot Vanilla JavaScript

Mēs visi mīlam padomus, taču tie nedarbojas, ja vien tie nav inicializēti, izmantojot JavaScript. Vispirms sāksim, izveidojot rīka padoma elementu mūsu index.htmlfailā:

 Tooltip on top 

Virzot kursoru virs pogas, rīka padoms netiks rādīts, jo pēc noklusējuma tā ir Bootstrap izvēles funkcija, un tā ir jāinicializē manuāli, izmantojot JavaScript. Ja vēlaties to izdarīt ar jQuery, tas izskatās šādi:

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

Izmantojot Vanilla JS, lai iespējotu rīka padomu, jums būs jāizmanto šāds kods:

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

Tas, ko dara iepriekš minētais kods, atlasa elementu ar unikālo ID “tooltip” un pēc tam izveido Bootstrap tooltip objektu. Pēc tam varat to izmantot, lai manipulētu ar rīka padoma stāvokli, piemēram, programmatiski parādītu vai paslēptu padomu.

Lūk, piemērs, kā to varētu parādīt / paslēpt, izmantojot metodes:

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

Ja vēlaties iespējot visus rīku padomus, varat izmantot arī šādu kodu:

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

Šeit notiek tas, ka mēs atlasām visus elementus, kuriem ir data-toggle="tooltip"atribūts un vērtība, un katram no tiem inicializējam rīka padoma objektu. Tas arī saglabā tos mainīgajā tooltipList.

Pārslēdziet savu elementu redzamību, izmantojot Sakļaut JavaScript metodes

Bootstrap sabrukšanas funkcija ir vēl viens ļoti ērts veids, kā parādīt un paslēpt elementus, izmantojot datu atribūtus vai JavaScript.

Šis ir piemērs tam, kā mēs varam parādīt vai paslēpt karti, kad tiek noklikšķināts uz noteiktas pogas. Vispirms izveidosim HTML marķējumu:

Toggle Card ...
Freecodecamp.org

Awesome resource to learn programming from.

Learn coding for free

Tāpēc mēs izveidojām pogu ar ID toggleCardButtonun karti ar ID card. Sāksim, atlasot divus elementus:

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

Tad mums jāizveido saliekams objekts, izmantojot jaunizvēlēto kartes elementu:

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

Ko toggle:falsekarogs tas ir, ka tas saglabā elementu redzams pēc tam veidojot objektu. Ja tā nav, karte pēc noklusējuma tiks paslēpta.

Tagad pogas klikšķināšanas darbībai jāpievieno notikumu klausītājs:

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

Visbeidzot, mums ir jāpārslēdz karte, izmantojot saliekamo objektu, kuru mēs šādi inicializējām:

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

Tieši tā! Tagad karte tiks parādīta / paslēpta ikreiz, kad tiek noklikšķināts uz pogas. Protams, to visu varēja izdarīt, izmantojot datu atribūtu funkciju no Bootstrap, taču, iespējams, vēlēsities pārslēgt noteiktus elementus, pamatojoties uz API izsaukumu vai lietojumprogrammas loģiku.

Secinājums

Ja esat sekojis līdzi šai apmācībai, tagad jums vajadzētu būt iespējai izmantot populārāko CSS ietvaru, neprasot jQuery projektā. Tas ļauj ietaupīt līdz 85 KB datu un padara jūsu vietni ātrāku! Apsveicu?

Ja jūs novērtējat šo apmācību un vēlaties izmantot Bootstrap kā CSS ietvaru saviem projektiem, es aicinu jūs apskatīt dažas bezmaksas un augstākās kvalitātes Bootstrap tēmas, veidnes un lietotāja saskarnes komplektus, ko mēs veidojam vietnē Themesberg ❤️