От автора: Bootstrap — это CSS-фреймворк, который предлагает множество компонентов, таких как кнопки, панели и раскрывающиеся списки. Вы можете использовать его для быстрого создания веб-сайта или графического интерфейса для веб-приложения.
Для создания интерфейса Bootstrap все, что вам нужно, — это некоторые знания HTML и CSS. Однако некоторые функции могут быть реализованы только с помощью JavaScript. Для этого фреймворк Bootstrap предлагает простой интерфейс JavaScript.
Работа с Bootstrap в интерфейсе JavaScript
В этой статье мы рассмотрим, как изменять и контролировать компоненты Bootstrap через интерфейс JavaScript. В качестве примера мы будем использовать простую кнопку, которая позволяет пользователям открывать диалоговое окно (модал).
Если вы посмотрите документацию Bootstrap, вы заметите, что интерфейс для других интерактивных компонентов Bootstrap, таких как Carousel, Collapse или Dropdown, очень похож. Таким образом, то, что вы узнаете из этой статьи, можно легко применить к другим компонентам.
Пример страницы: базовая структура
Ниже вы можете увидеть HTML-код базовой структуры нашей тестовой страницы. Он основан на начальном шаблоне Bootstrap 4.5 в сочетании с подвижным контейнером, в который должно быть помещено содержимое страницы.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>Bootstrap Example</title> </head> <body> <div class="container-fluid"> <h1>My Bootstrap Playground</h1> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
В этом примере нужно учитывать две вещи:
В будущей версии Bootstrap 5 библиотека jQuery больше не понадобится.
Необходимые внешние файлы CSS и JS будут интегрированы здесь через сеть доставки контента (CDN).
Использование CDN позволит вашему веб-сайту подключаться к внешним серверам, что вам может потребоваться указать в политике конфиденциальности. Кроме того, файлы фреймворка также можно загрузить вручную и разместить на вашем собственном сервере.
В следующем разделе мы рассмотрим пример кнопки / модального окна без дополнительного JavaScript. Модальное окно может быть открыто пользователем нажатием кнопки. Его можно снова закрыть, нажав «Закрыть» или «x».
Чтобы реализовать дополнительное поведение (например, когда пользователь нажимает «Сохранить»), нам нужен собственный JavaScript. Возможности этого рассматриваются в следующих разделах.
Интерактивные компоненты Bootstrap без специального JavaScript
Начнем с добавления нескольких компонентов на страницу. Пример: сначала мы добавим кнопку (button):
<div class="container-fluid"> <h1>My Bootstrap Playground</h1> <button type="button" class="btn btn-success">Task 1</button> </div>
При нажатии кнопки должно открыться модальное окно со следующим текстом: «Нажмите «сохранить», чтобы завершить задачу». В разделе Live demo объясняется, как это поведение может быть реализовано. Кнопку необходимо дополнить атрибутами data-toggle=»modal» и data-target=»#task1_Modal».
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#task1_Modal">Task 1</button>
Необходимо вставить HTML-код модального компонента. Назначенный идентификатор (здесь: task1_Modal) должен быть правильно указан в свойстве data-target кнопки (с предшествующим знаком #, поэтому он читается как #task1_Modal”).
<div class="modal fade" id="task1_Modal" tabindex="-1" aria-labelledby="task1_ModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="task1_ModalLabel">Task 1</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Если вы посмотрите на страницу в браузере, вы заметите, что при нажатии на кнопку отображается диалоговое окно, которое можно снова закрыть, нажав кнопку «Закрыть».
Здесь вы можете попробовать первую версию нашего примера. Без использования фреймворка Bootstrap такое взаимодействие было бы возможно только с дополнительным кодом JavaScript. Нам нужно будет реагировать на события клика, отображать и скрывать модальное окно и настраивать стиль кнопки. Фреймворк Bootstrap делает все это за нас.
Интерактивные компоненты Bootstrap с пользовательским JavaScript
Обратите внимание, что для следующих примеров, кода требуется, чтобы на веб-сайт была включена библиотека JavaScript jQuery. Если вы хотите изменить код на простой JavaScript, я рекомендую отличную шпаргалку Тобиаса Ахлина.
Методы кнопок
В документации Bootstrap по отдельным компонентам часто есть раздел методов. Bootstrap предоставляет нам полезный метод управления кнопкой с помощью JavaScript toggle. Чтобы использовать метод, мы сначала должны задать кнопке идентификатор, например task1_button:
<button id="task_button"... </button>
Вызывая метод toggle, мы можем переключить внешний вид кнопки с «не нажата» на «нажата» и наоборот с помощью JavaScript. Чтобы проверить это, вставьте следующий фрагмент кода непосредственно перед закрывающим тегом тела:
... <script> $("#task1_button").button("toggle"); </script> </body>Код выполняется сразу после загрузки страницы браузером. Используя селектор #task1_button, мы указываем, что метод toggle должен применяться только к кнопке с идентификатором task1_button (даже если на странице должно быть больше кнопок).
При открытии страницы кнопка должна выглядеть как кнопка, на которую уже было нажатие (темно-зеленый). Теперь добавьте второй вызов toggle:
$("#task1_button").button("toggle"); $("#task1_button").button("toggle");При открытии страницы кнопка должна снова быть в исходном состоянии (светло-зеленая).
Методы модалов
Раздел методов модального компонента имеет аналогичную структуру. Здесь также есть метод toggle, с помощью которого модальное окно можно программно переводить из закрытого состояния в открытое (и наоборот).
... <script> $("#task1_Modal").modal("toggle"); </script> </body>С помощью этого фрагмента модальное окно автоматически открывается при загрузке страницы и пользователю не нужно сначала нажимать кнопку. Второй клик закрывает диалоговое окно.
Чтобы открыть и закрыть, вы также можете использовать отдельные методы show и hide. Мы можем использовать метод hide, чтобы закрыть модальное окно после нажатия кнопки «Сохранить». Для этого требуется 2 шага. Сначала используйте onclick, чтобы определить, какая функция JavaScript должна выполняться при нажатии кнопки, например task1_save():
<button type="button" class="btn btn-primary" onclick="task1_save()">Save changes</button>
Затем вставьте следующий код скрипта перед закрывающим тегом body:
<script> function task1_save(){ $("#task1_Modal").modal("hide"); } </script>
</body>Другие интерактивные компоненты, такие как Carousel, Collapse и Dropdown имеют аналогичные методы управления состоянием компонента.
События
Для некоторых компонентов Bootstrap, в документации есть дополнительный раздел «Событие». Речь идет о программной реакции на предопределенные события, которые пользователь запускает во время взаимодействия с соответствующим компонентом.
Для модального окна, например, мы можем определить, что должно происходить, когда события show или hide запускаются (например, путем вызова соответствующих методов компонента show или hide).
В нашем примере должно быть определено следующее:
Как только событие show запускается, название кнопки меняется с «Задача 1» на «Задача 1 в процессе…».
Как только событие hide запускается, метка снова меняется на «Задача 1».
Пока модальное окно открыто, кнопка имеет другое название. Вставьте следующий код в область скрипта внизу страницы:
$('#task1_Modal').on('show.bs.modal', function (e) { $("#task1_button").text("Task 1 in process..."); }); $('#task1_Modal').on('hide.bs.modal', function (e) { $("#task1_button").text("Task 1"); });Теперь вы заметите, что в любом случае при закрытии диалогового окна метка сбрасывается, независимо от того, нажимает ли пользователь «Закрыть» или «Сохранить». Событие hide срабатывает в обоих случаях. Вы можете попробовать вторую версию нашего примера здесь.
Рассмотрение компонентов для индикации прогресса
В предыдущем примере мы увидели, как функцию jQuery text можно использовать для настройки текстового содержимого элемента HTML. С помощью JavaScript вы можете изменять все свойства элемента HTML, включая классы CSS или отдельные свойства CSS. Взгляните на следующие примеры:
Расширить функцию task1_save
После сохранения диалога, мы изменим класс CSS для кнопки с btn-success на btn-secondary. Это указывает на то, что задача уже выполнена:
function task1_save(){ $("#task1_Modal").modal("hide"); $("#task1_button").removeClass("btn-success"); $("#task1_button").addClass("btn-secondary"); }Добавление индикатора выполнения
Контекстуализируйте кнопку с помощью небольшого индикатора выполнения:
<h1>My Bootstrap Playground</h1> <button id="task1_button" type="button" class="btn btn-success" data-toggle="modal" data-target="#task1_Modal">Task 1</button> <div id="task1_progress" class="progress"> <div id="task1_progressbar" class="progress-bar bg-success" style="width:0%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div>
Индикатор выполнения начинается с 0%. Теперь мы хотим выполнить следующее действие. Во-первых, пока отображается диалоговое окно, прогресс уже должен быть установлен на 100%. Для этого мы должны изменить свойство CSS width. Поскольку задача все еще выполняется, мы хотим отобразить анимированный узор полос на индикаторе выполнения. Мы достигаем этого, добавляя классы CSS progress-bar-striped и progress-bar-animated.
$('#task1_Modal').on('show.bs.modal', function (e) { $("#task1_button").text("Task 1 in progress..."); $("#task1_progressbar").css("width", "100%"); $("#task1_progressbar").addClass("progress-bar-striped");
$("#task1_progressbar").addClass("progress-bar-animated"); });Затем, после скрытия диалога (независимо от того, сохранил ли пользователь или закрыл), анимация и образец полосы удаляются, а продвижение устанавливается на 0%.
$('#task1_Modal').on('hide.bs.modal', function (e) { $("#task1_button").text("Task 1"); $("#task1_progressbar").css("width", "0%"); $("#task1_progressbar").removeClass("progress-bar-striped");
$("#task1_progressbar").removeClass("progress-bar-animated");
});Если пользователь сохранил диалог, продвижение должно быть постоянно установлено на 100%.
function task1_save(){ $("#task1_Modal").modal("hide"); $("#task1_button").removeClass("btn-success");
$("#task1_button").addClass("btn-secondary"); $("#task1_progressbar").css("width", "100%"); }
Обратите внимание: кнопка и индикатор выполнения будут отображаться до, во время и после открытия диалогового окна, когда пользователь нажимает «Сохранить изменения».
Сигнал о завершении задачи
После того, как задача уже была сохранена, второй щелчок по кнопке должен отобразить другое диалоговое окно с содержанием «Вы уже выполнили задачу». Мы готовим для этого вторую модальную программу.
Код этого модального окна такой же, как и для нашего первого модального окна, но мы должны выбрать другой идентификатор, например task1_Message. Затем мы установим текст в теле модального окна на «Вы уже выполнили задачу».
В функцию task1_save(), которую мы вызываем при сохранении первого диалога, мы добавляем инструкцию, которая изменяет атрибут кнопки data-target с task1_Modal на task1_Message:
function task1_save(){ $("#task1_Modal").modal("hide"); $("#task1_button").removeClass("btn-success");
$("#task1_button").addClass("btn-secondary"); $("#task1_progressbar").removeClass("progress-bar-striped");
$("#task1_progressbar").removeClass("progress-bar-animated"); $("#task1_button").attr("data-target", "#task1_Message"); }
Вы можете скачать код для полного примера здесь. Как вариант, вы можете попробовать последнюю версию нашего примера на CodePen.
Заключение
Даже без дополнительного JavaScript, вы все еще можете использовать интерактивные компоненты Bootstrap, в том числе Button, Modal, Carousel, Collapse, и Dropdown. Однако использование небольшого JavaScript-интерфейса Bootstrap обеспечивает большую интерактивность.
Автор: Anna Prenzel
Источник: blog.logrocket.com
Редакция: Команда webformyself.