Инициализация

В этом руководстве описано создание экземпляра Booking на странице. Выполните следующие шаги, чтобы получить рабочий компонент:

1. Подключите исходные файлы Booking.
2. Создайте контейнер.
3. Инициализируйте Booking с помощью конструктора.

Подключение исходных файлов

Виджет Booking поставляется в виде двух файлов, которые загружаются на страницу.

Скачайте пакет и распакуйте его в папку вашего проекта. Добавьте следующие файлы на страницу:

• booking.js — исходный код Booking
• booking.css — стили Booking

Укажите корректные относительные пути к исходным файлам.

Следующий фрагмент кода подключает файлы Booking из папки dist/:

index.html

<script type="text/javascript" src="./dist/booking.js"></script>
<link rel="stylesheet" href="./dist/booking.css">

Создание контейнера

Добавьте HTML-элемент, который будет содержать виджет Booking, и присвойте ему идентификатор, например root.

Следующий фрагмент кода создаёт контейнер с идентификатором root:

index.html

<div id="root"></div>

Инициализация Booking

Вызовите конструктор booking.Booking с двумя параметрами:

• container — селектор или идентификатор HTML-контейнера, в котором размещается виджет
• config — объект со свойствами конфигурации (см. Свойства конфигурации)

Следующий фрагмент кода инициализирует Booking внутри контейнера #root:

index.html

// создание Booking
new booking.Booking("#root", {
    // свойства конфигурации
});

Свойства конфигурации

к сведению

Полный список свойств для настройки Booking см. в разделе Обзор свойств.

Пример

Приведённый ниже фрагмент инициализирует Booking с набором начальных свойств: