Динамическое добавление кнопок

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

Основы работы с tingle.js

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

var modal = new tingle.modal({
  closeMethods: ['overlay', 'button', 'escape'],
  closeLabel: "Закрыть"
});

Здесь создаётся новое модальное окно с возможностью закрытия через клик на оверлей, кнопку закрытия или клавишу escape.

Добавление кнопки в модальное окно

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

  • Первый параметр — текст на кнопке.
  • Второй параметр — класс CSS, который может быть использован для стилизации кнопки.
  • Третий параметр — функция, которая будет вызвана при нажатии на кнопку.

Пример:

modal.addFooterBtn('OK', 'tingle-btn tingle-btn--primary', function() {
  modal.close();
});

Этот код добавляет кнопку с текстом «OK» и закрывает модальное окно при её нажатии. Но что если нужно добавить кнопку динамически, в ответ на действия пользователя или на событие?

Динамическое добавление кнопок

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

1. Добавление кнопки при инициализации

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

function addDynamicButton() {
  var buttonText = "Новая кнопка";
  var buttonClass = "tingle-btn tingle-btn--secondary";
  var buttonAction = function() {
    alert('Нажата динамическая кнопка!');
  };

  modal.addFooterBtn(buttonText, buttonClass, buttonAction);
}

В данном примере кнопка будет добавлена в модальное окно с текстом «Новая кнопка», и при нажатии на неё будет показываться alert.

2. Удаление динамически добавленных кнопок

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

modal.removeFooterBtn();

Этот метод удаляет все кнопки из нижней части окна. Однако, если нужно удалить только конкретную кнопку, можно использовать её идентификатор или ссылку на саму кнопку.

3. Условное добавление кнопок

В зависимости от состояния приложения можно добавить кнопки с разными функциями. Например, если в модальном окне отображается форма, можно добавить кнопку «Отправить», а если отображается информация, то — кнопку «Закрыть».

if (isFormOpen) {
  modal.addFooterBtn('Отправить', 'tingle-btn tingle-btn--primary', function() {
    submitForm();
  });
} else {
  modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--secondary', function() {
    modal.close();
  });
}

Здесь мы проверяем условие isFormOpen, чтобы определить, какая кнопка должна быть добавлена.

4. Использование динамических данных для кнопок

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

function createButtonFromData(data) {
  var buttonText = data.buttonText || 'По умолчанию';
  var buttonAction = function() {
    alert('Данные: ' + data.info);
  };

  modal.addFooterBtn(buttonText, 'tingle-btn tingle-btn--default', buttonAction);
}

var buttonData = {
  buttonText: 'Подтвердить',
  info: 'Нажали на подтверждение!'
};

createButtonFromData(buttonData);

В этом примере данные для кнопки получаются из объекта buttonData, и на основе этих данных создаётся кнопка с текстом и действием.

Преимущества динамического добавления кнопок

Динамическое добавление кнопок даёт гибкость в разработке интерфейсов. Кнопки могут быть добавлены или удалены в ответ на события, что позволяет:

  • Изменять поведение интерфейса в реальном времени.
  • Динамически адаптировать модальные окна под текущие задачи.
  • Предоставлять пользователю уникальный опыт взаимодействия с приложением.

Обработка событий

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

modal.addFooterBtn('Удалить', 'tingle-btn tingle-btn--danger', function() {
  alert('Удаление...');
  // Логика удаления
});

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

Заключение

Использование библиотеки tingle.js для динамического добавления кнопок в модальное окно позволяет создавать гибкие и адаптивные пользовательские интерфейсы. Простейший механизм добавления кнопок с помощью метода addFooterBtn легко расширяется для динамического контента, что открывает широкие возможности для взаимодействия с пользователем.

Оглавление