Базовые параметры конфигурации

Tingle.js — это легковесная библиотека для создания модальных окон в веб-приложениях. Она предоставляет разработчикам гибкие возможности для настройки внешнего вида и поведения модальных окон. В этом разделе рассмотрены основные параметры конфигурации, которые можно использовать при инициализации модальных окон с помощью tingle.js.

Создание экземпляра модального окна

Для того чтобы начать работу с tingle.js, необходимо создать экземпляр модального окна. Обычно для этого используется следующий код:

var modal = new tingle.modal({
    // Параметры конфигурации
});

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

Параметры конфигурации

Параметр footer отвечает за отображение нижней части модального окна. В этой части обычно размещаются кнопки действия, такие как “Закрыть” или “Сохранить”. Если необходимо скрыть футер, можно установить значение false.

Пример:

var modal = new tingle.modal({
    footer: true
});

Если нужно отключить футер, указывается:

var modal = new tingle.modal({
    footer: false
});

closeMethods

Параметр closeMethods управляет тем, как пользователи могут закрыть модальное окно. Он принимает массив значений, определяющих доступные методы закрытия. Возможные значения:

  • 'button' — закрытие через кнопку.
  • 'overlay' — закрытие при клике на затемнённую область вокруг модала.
  • 'escape' — закрытие при нажатии клавиши Escape.

Пример использования:

var modal = new tingle.modal({
    closeMethods: ['button', 'escape']
});

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

var modal = new tingle.modal({
    closeMethods: []
});

closeLabel

Этот параметр позволяет задать текст для кнопки закрытия. По умолчанию используется строка “Закрыть”. Можно указать своё значение:

var modal = new tingle.modal({
    closeLabel: 'Закрыть окно'
});

cssClass

С помощью параметра cssClass можно добавить собственные CSS классы к модальному окну. Это полезно для тонкой настройки стилей в зависимости от потребностей интерфейса.

Пример добавления классов:

var modal = new tingle.modal({
    cssClass: ['custom-modal', 'my-modal']
});

overlayClose

Параметр overlayClose определяет, будет ли модальное окно закрываться при клике на затемнённую область (фон) вокруг окна. По умолчанию это поведение включено. Для его отключения необходимо установить значение false.

var modal = new tingle.modal({
    overlayClose: false
});

sticky

С помощью параметра sticky можно сделать модальное окно фиксированным на экране при прокрутке. Это полезно, если нужно, чтобы окно оставалось на месте даже при скролле страницы.

var modal = new tingle.modal({
    sticky: true
});

Параметры контента

content

Параметр content позволяет задать содержимое модального окна. Это может быть HTML-код, текст или другие элементы, которые должны быть отображены внутри модала.

Пример:

var modal = new tingle.modal({
    content: '<p>Это текст внутри модального окна.</p>'
});

Если содержимое изменяется динамически, можно использовать методы библиотеки для обновления контента:

modal.setContent('<p>Новый контент.</p>');

beforeClose

Этот параметр принимает функцию, которая будет выполнена перед закрытием модального окна. Это полезно, если необходимо выполнить определённые действия, например, сохранить состояние перед закрытием.

Пример:

var modal = new tingle.modal({
    beforeClose: function() {
        console.log('Модальное окно закрывается');
    }
});

onOpen

Функция onOpen позволяет задать обработчик, который будет вызван при открытии модального окна. Это может быть полезно для выполнения анимаций или других действий при показе окна.

Пример:

var modal = new tingle.modal({
    onOpen: function() {
        console.log('Модальное окно открылось');
    }
});

onClose

Аналогично onOpen, параметр onClose позволяет задать функцию, которая будет вызвана при закрытии окна. Этот параметр полезен для выполнения логики по закрытию.

Пример:

var modal = new tingle.modal({
    onClose: function() {
        console.log('Модальное окно закрыто');
    }
});

Прочие параметры

animation

Параметр animation отвечает за анимацию модального окна при его открытии и закрытии. По умолчанию анимация включена. Для отключения анимации можно установить значение false.

var modal = new tingle.modal({
    animation: false
});

loadAsync

Если в модальное окно необходимо загрузить данные асинхронно, можно использовать параметр loadAsync. Он принимает булево значение: true — будет ожидать асинхронную загрузку данных перед открытием модала, false — данные будут загружены без ожидания.

Пример:

var modal = new tingle.modal({
    loadAsync: true
});

Настройка модальных окон через API

Кроме указанных параметров конфигурации, tingle.js предоставляет гибкий API для динамической работы с модальными окнами. После создания экземпляра окна можно использовать следующие методы для управления его состоянием:

  • open() — открывает модальное окно.
  • close() — закрывает модальное окно.
  • setContent(content) — изменяет содержимое модального окна.
  • addFooterBtn(label, className, callback) — добавляет кнопку в футер модала.
  • removeFooterBtn(button) — удаляет кнопку из футера модала.

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

Оглавление