Как переключиться с jQuery в ванильный JavaScript с Bootstrap 5

Автор оригинала: FreeCodeCamp Community Member.

Bootstrap 5 Является бесплатным и открытым исходным каркасом CSS, направленная на адаптивную, мобильную первую интерфейсную веб-разработку.

Если вы не знали, Bootstrap 5 Alpha был официально запущен Отказ Он удалил jQuery в качестве зависимости, бросил поддержку Internet Explorer 9 и 10 и приводит к тому, что некоторые потрясающие обновления для файлов SASS, Markup и новой утилиты API.

Этот учебник покажет вам, как начать использовать VanillaJs вместо jQuery, когда строительные веб-сайты используют новейшую версию Bootstrap 5.

Начиная

Вам нужно будет включить Bootstrap 5 в вашем проекте. Есть несколько способов сделать это, но держать его простым, мы будем включать рамки через CDN.

Прежде всего, давайте создадим пустые index.html Страница внутри папки проекта:

Включить bootstrap.min.css styleshe лита до конца вашего ярлык:

Впоследствии включите библиотеку POPPER.JS и основной файл JavaScript Bootstrap до конца вашего ярлык:

Любопытно, что Целостность и Crossorigin Атрибуты означают? Вот объяснение:

Атрибут целостности : Позволяет браузеру проверить источник файла, чтобы убедиться, что код никогда не загружен, если источник был манипулированный.

Атрибут кроссоригина : Присутствует, когда запрос загружен с использованием «CORS», которые сейчас являются требованием проверки SRI, когда не загружаются из «однообразного происхождения».

Большой! Теперь мы успешно включили новейшую версию Bootstrap в нашем проекте. Одним из очевидных различий в том, что нам больше не пришлось требовать jQuery в качестве зависимости, Сохранение около 82,54 кб в пропускной способности, если в министерстве.

Переключение с jQuery в ванильные js

Прежде чем мы начнем с этого раздела, вы должны знать, что использование Bootstrap 5 с jQuery все еще возможен в соответствии с Официальная документация Отказ

Мы рекомендуем использовать Vanilla JavaScript, если единственная причина, по которой вы использовали jQuery, было для селектора запроса, потому что вы можете сделать то же самое с Document.Queryselector («# элемент») Как будто это было $ («# элемент») Отказ

Первый шаг – создать файл JavaScript и включить его до конца тега тела, но после двух других включенных:

Поэтому, когда вам нужно на самом деле использовать JavaScript с Bootstrap 5? Существуют определенные компоненты в рамках, которые работают только в том случае, если они инициализируются через JavaScript, такие как всплывающие подсказки, тосты и тосты.

Кроме того, с такими компонентами, как модали, выпадающие и карусели, вы можете иметь возможность программно изменить их на основе действий пользователя или логики приложений.

Инициализация подсказков через ванильный JavaScript

Мы все любим подсказки, но они не работают, если они не будут инициализироваться через JavaScript. Давайте сначала начнем с создания элемента подсказки внутри нашего index.html файл:

    Tooltip on top

Завешивание на кнопку не будет отображать всплывающую подсказку, поскольку по умолчанию он является функцией Bootstrap, и она должна быть инициализирована вручную с помощью JavaScript. Если вы хотите сделать это с jQuery, вот как это будет выглядеть:

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

Использование Vanilla JS Вам необходимо использовать следующий код для включения всплывающей подсказки:

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 = "ztrictip" атрибут и значение и инициализируйте объект для подсказки для каждого. Это также экономит их в переменной набора инструментов.

Переключите видимость ваших элементов с помощью методов коллапса JavaScript

Функция коллапса на Bootstrap – это еще один очень удобный способ показать и скрывать элементы с помощью атрибутов данных или JavaScript.

Вот пример того, как мы можем показать или скрыть карту, когда нажата определенная кнопка. Давайте сначала создадим HTML Markup:

Toggle Card
    

        
        

            
Freecodecamp.org
            
Awesome resource to learn programming from.
            Learn coding for free
        
    

Итак, мы создали кнопку с идентификатором TOGGLECARDBUTTON и карта с идентификатором карта Отказ Давайте начнем с выбора двух элементов:

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

Затем нам нужно создать складной объект, используя вновь выбранный элемент карты:

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

Что такое Переключатель: ложь Флаг делает то, что он хранит элемент виден после создания объекта. Если нет, это будет скрывать карту по умолчанию.

Теперь нам нужно добавить слушатель события для кнопки для действия Click:

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

И, наконец, нам нужно переключить карту, используя разрушимый объект, который мы инициализировали, как это:

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

Вот и все! Теперь карта будет показана/скрыта всякий раз, когда кнопка нажала. Конечно, все это могло быть сделано, используя Функция атрибутов данных От загрузки, но вы можете переключить определенные элементы на основе вызова API или логике в вашем приложении.

Вывод

Если вы следили в этом руководстве, вы теперь должны быть в состоянии использовать самые популярные рамки CSS без необходимости требовать от JQuery в вашем проекте. Это позволяет вам Сохранить до 85 кб данных И делает ваш сайт быстрее! Поздравляю?

Если вы цените это учебное пособие и, подобное использованию Bootstrap в качестве CSS Framework для ваших проектов, я приглашаю вас проверить некоторые из бесплатных и премию Темы, шаблоны, шаблоны и комплекты пользователей что мы строим в Themesberg ❤️