Первый пример работы с Vex

Перед тем как начать работу с библиотекой Vex, необходимо её установить. Для этого используйте менеджер пакетов npm или yarn. Для установки через npm выполните команду:

npm install vex-js

Для использования с ES-модулями подключите библиотеку следующим образом:

import vex from 'vex-js';
import 'vex-js/dist/css/vex.css';

Если вы используете обычный <script> тег, то можно подключить библиотеку и её стили:

<script src="https://cdn.jsdelivr.net/npm/vex-js@4.4.0/dist/vex.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vex-js@4.4.0/dist/css/vex.css">

После установки библиотеки и её подключения можно приступать к созданию первого примера.

Основы работы с Vex

Библиотека Vex предоставляет простое и гибкое API для создания модальных окон, уведомлений и других взаимодействий с пользователем. Начнём с самого базового примера — создания модального окна.

Простой пример модального окна

Для создания модального окна в Vex достаточно вызвать метод vex.dialog.open(), передав в качестве параметра настройки. Например:

vex.dialog.open({
  message: 'Это простое модальное окно.',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Закрыть'
    })
  ]
});

Этот код создаст простое модальное окно с текстом и одной кнопкой “Закрыть”. Кнопка будет закрывать окно при нажатии.

Параметры модального окна

Метод open принимает объект с настройками, позволяющими конфигурировать окно по вашему усмотрению:

  • message: текстовое сообщение, которое будет отображаться в модальном окне.
  • buttons: массив объектов кнопок. Каждая кнопка может быть настроена с помощью различных свойств, таких как text, className, click.

Пример с несколькими кнопками:

vex.dialog.open({
  message: 'Вы уверены, что хотите продолжить?',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Да',
      click: function() {
        console.log('Пользователь нажал Да');
      }
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Нет',
      click: function() {
        console.log('Пользователь нажал Нет');
      }
    })
  ]
});

В этом примере мы создали два варианта ответа: “Да” и “Нет”. При клике на любую из кнопок в консоль будет выведено соответствующее сообщение.

Дополнительные опции для модальных окон

Помимо стандартных параметров, можно настроить дополнительные опции для более гибкой работы с окнами.

  • escapeButton: позволяет управлять закрытием модального окна с помощью клавиши Escape.
  • overlayClosesOnClick: определяет, будет ли окно закрываться при клике на область за пределами модального окна.
  • showCloseButton: отображает или скрывает кнопку закрытия в правом верхнем углу.

Пример с дополнительными опциями:

vex.dialog.open({
  message: 'Хотите ли вы закрыть это окно?',
  escapeButton: true,
  overlayClosesOnClick: true,
  showCloseButton: true,
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Закрыть окно'
    })
  ]
});

В этом примере окно можно закрыть как по нажатию на кнопку, так и по клику вне окна или с помощью клавиши Escape.

Формы в модальных окнах

Модальные окна могут также содержать формы, которые можно использовать для сбора информации от пользователя. Для этого Vex позволяет вставлять HTML-формы прямо в тело модального окна.

Пример создания формы:

vex.dialog.open({
  message: 'Введите ваше имя:',
  input: '<input name="username" type="text" placeholder="Имя">',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Отправить'
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Отмена'
    })
  ],
  callback: function(data) {
    if (data) {
      console.log('Введённое имя: ' + data.username);
    } else {
      console.log('Пользователь отменил ввод');
    }
  }
});

В этом примере модальное окно отображает поле ввода и два варианта кнопок: отправить данные или отменить. После отправки формы в колбэк передаётся объект данных с полем username, содержащим введённое значение.

Пользовательские стили

Библиотека Vex позволяет настраивать внешний вид модальных окон с помощью CSS. Вы можете использовать стандартные классы для изменения стилей окон и кнопок. Например, можно изменить цвет фона модального окна:

.vex {
  background-color: #f0f0f0;
}

Также можно добавить пользовательские стили для кнопок:

.vex-button {
  background-color: #4CAF50;
  color: white;
}

Эти стили будут применяться ко всем элементам модальных окон, которые создаются с помощью Vex.

Пример использования Vex для уведомлений

Кроме модальных окон, Vex может быть использован для создания простых уведомлений. Библиотека предоставляет метод vex.notify(), который позволяет показывать уведомления на экране.

Пример уведомления:

vex.notify({
  message: 'Ваши изменения были сохранены.',
  className: 'vex-theme-wireframe',
  duration: 3000
});

Уведомление будет показываться на экране в течение 3 секунд. В параметре className можно указать тему уведомления, а в duration — продолжительность отображения уведомления.

Заключение

Работа с библиотекой Vex достаточно проста и интуитивно понятна. Она позволяет быстро создавать модальные окна, формы и уведомления с минимальными усилиями. Большое количество опций и настроек делают её гибким инструментом для взаимодействия с пользователем на веб-страницах.

Оглавление