Како пребацити са јКуери-а на Ванилла ЈаваСцрипт помоћу Боотстрапа 5

Боотстрап 5 је бесплатни ЦСС оквир отвореног кода усмерен ка прилагодљивом, првом мобилном веб развоју.

У случају да нисте знали, Боотстрап 5 алпха је званично покренут. Уклонио је јКуери као зависност, укинуо је подршку за Интернет Екплорер 9 и 10 и донео сјајна ажурирања за Сасс датотеке, ознаке и нови услужни програм.

Ово упутство ће вам показати како да почнете да користите ВаниллаЈС уместо јКуери-а када правите веб странице користећи најновију верзију Боотстрапа 5.

Почетак

У пројекат ћете морати да укључите Боотстрап 5. Постоји неколико начина да се то уради, али да бисмо поједноставили, укључићемо оквир путем ЦДН-а.

Пре свега, креирајмо празну index.htmlстраницу унутар фасцикле пројекта:

     Bootstrap 5 Vanilla JS tutorial by Themesberg    

Укључите bootstrap.min.cssтабелу стилова пре краја ознаке:

После тога укључите Поппер.јс библиотеку и главну Боотстрап ЈаваСцрипт датотеку пре краја ваше ознаке:

Занима вас шта значе атрибути integrityи crossorigin? Ево објашњења:

Атрибут интегритета : омогућава прегледачу да провери извор датотеке како би се осигурало да се код никада не учита ако је извор манипулисан.

Атрибут Цроссоригин : присутан је када се захтев учита помоћу „ЦОРС“, што је сада захтев СРИ провере када није учитан из „истог порекла“.

Сјајно! Сада смо успешно укључили најновију верзију Боотстрапа у наш пројекат. Једна од очигледних разлика је та што више нисмо морали да захтевамо јКуери као зависност, уштедећи око 82,54 КБ пропусног опсега ако је у минификованом стању.

Прелазак са јКуери-а на Ванилла ЈС

Пре него што започнемо са овим одељком, требали бисте знати да је коришћење Боотстрапа 5 са ​​јКуери-јем и даље могуће у складу са званичном документацијом.

Препоручујемо употребу Ванилла ЈаваСцрипт-а ако је једини разлог због ког сте користили јКуери био селектор упита, јер исто можете да урадите са document.querySelector('#element')као да јесте $('#element').

Први корак је креирање ЈаваСцрипт датотеке и њено укључивање пре краја ознаке тела, али након што друга два укључују:

Па када заправо требате да користите Јавасцрипт са Боотстрап 5? Постоје одређене компоненте у оквиру које раде само ако су иницијализоване путем Јавасцрипта, као што су описи алата, поповер и здравице.

Даље, са компонентама попут модалних, падајућих и вртуљака можда ћете желети да их можете програмски променити на основу корисничке акције или логике апликације.

Покретање описа алата путем Ванилла ЈаваСцрипт-а

Сви волимо описе, али они не функционишу ако нису иницијализовани путем ЈаваСцрипт-а. Почнимо прво са стварањем елемента описа унутар наше index.htmlдатотеке:

 Tooltip on top 

Ако задржите показивач миша изнад дугмета, неће се приказати опис, јер је то подразумевано опција за покретање система Боотстрап и мора се ручно иницијализовати помоћу ЈаваСцрипт-а. Ако то желите да урадите са јКуери, ево како би то изгледало:

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

Користећи Ванилла ЈС, требали бисте користити следећи код да бисте омогућили опис:

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

Ово што чини горњи код значи да бира елемент са јединственим ИД-ом „тоолтип“, а затим креира објект Боотстрап тоолтип. Тада то можете користити за манипулисање стањем описа, као што је програмско приказивање или скривање описа.

Ево примера како бисте то могли приказати / сакрити путем метода:

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"атрибут и вредност и за сваки иницијализујемо објекат са описом. Такође их чува у променљивој тоолтипЛист.

Укључите или искључите видљивост својих елемената помоћу метода Цоллапсе ЈаваСцрипт

Функција колапса на Боотстрапу је још један врло згодан начин за приказивање и скривање елемената путем атрибута података или ЈаваСцрипт-а.

Ево примера како можемо приказати или сакрити картицу када се кликне на одређено дугме. Направимо прво ХТМЛ ознаку:

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(); });

То је то! Сада ће картица бити приказана / сакривена сваки пут када се кликне на дугме. Наравно да је све ово могло да се уради помоћу функције атрибута података из Боотстрапа, али можда ћете желети да пребаците одређене елементе на основу АПИ позива или логике у вашој апликацији.

Закључак

Ако сте пратили овај водич, сада бисте могли да користите најпопуларнији ЦСС оквир без потребе за захтевањем јКуери-а у свом пројекту. Ово вам омогућава да уштедите до 85 КБ података и убрзате веб локацију! Честитам ?

Ако цените ово упутство и волите да користите Боотстрап као ЦСС оквир за своје пројекте, позивам вас да погледате неке бесплатне и премиум теме Боотстрап, предлошке и корисничке интерфејсе које градимо у Тхемесбергу берг