Параметр footer и работа с кнопками

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

Параметр footer предоставляет возможность задать кастомизированный контент в нижней части модального окна. Он принимает элемент DOM или HTML строку, которую можно вставить внутрь модального окна. Например, часто используется для добавления кнопок управления.

При создании нового модального окна с использованием Tingle.js, можно указать footer в объекте параметров. Например:

var modal = new tingle.modal({
  footer: true,
  closeMethods: ['overlay', 'escape'],
  cssClass: ['custom-class']
});

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

Добавление кнопок в футер

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

Пример:

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

modal.setFooter([
  '<button class="btn btn-primary">Подтвердить</button>',
  '<button class="btn btn-secondary">Отмена</button>'
]);

modal.open();

В этом примере футер будет содержать две кнопки: одну для подтверждения действия, другую — для отмены. Каждая кнопка может быть настроена с различными стилями и функциональностью. Для этого также удобно использовать методы Tingle.js для управления этими элементами.

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

После того как кнопки были добавлены в футер, необходимо организовать обработку их событий. Например, при нажатии на кнопку «Подтвердить» можно закрыть модальное окно или выполнить какое-то другое действие.

Чтобы добавить обработчики событий для кнопок, можно воспользоваться стандартными методами JavaScript. Пример:

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

modal.setFooter([
  '<button class="btn btn-primary">Подтвердить</button>',
  '<button class="btn btn-secondary">Отмена</button>'
]);

modal.open();

// Получаем ссылки на кнопки
var confirmButton = modal.modal.querySelector('.btn-primary');
var cancelButton = modal.modal.querySelector('.btn-secondary');

// Добавляем обработчики
confirmButton.addEventListener('click', function () {
  console.log('Подтверждено!');
  modal.close();
});

cancelButton.addEventListener('click', function () {
  console.log('Отменено!');
  modal.close();
});

В данном примере, при нажатии на кнопку «Подтвердить» будет выведено сообщение в консоль и модальное окно закроется. Аналогично для кнопки «Отмена» происходит то же самое, но с другим сообщением.

Кастомизация кнопок

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

.btn-primary {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

Этот CSS-код изменяет стиль кнопок, придавая им более выразительный вид с эффектами при наведении.

Работа с динамическим содержимым футера

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

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

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

modal.open();

// Условие для изменения футера
var isConfirmed = false;
if (!isConfirmed) {
  modal.setFooter([
    '<button class="btn btn-primary">Подтвердить</button>',
    '<button class="btn btn-secondary">Отмена</button>'
  ]);
} else {
  modal.setFooter('<button class="btn btn-primary">Закрыть</button>');
}

// Обновление футера
modal.modal.querySelector('.btn-primary').addEventListener('click', function () {
  if (!isConfirmed) {
    console.log('Подтверждено!');
    isConfirmed = true;
    modal.setFooter('<button class="btn btn-primary">Закрыть</button>');
  } else {
    console.log('Закрытие окна!');
    modal.close();
  }
});

Этот код демонстрирует, как изменить содержимое футера в зависимости от состояния переменной isConfirmed. Если действие не было подтверждено, в футере отображаются кнопки «Подтвердить» и «Отмена», если подтверждено — только кнопка «Закрыть».

Удаление футера

В некоторых случаях может возникнуть необходимость удалить футер или очистить его содержимое. Для этого Tingle.js предоставляет метод clearFooter(), который позволяет удалить все элементы футера.

Пример:

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

modal.setFooter([
  '<button class="btn btn-primary">Подтвердить</button>',
  '<button class="btn btn-secondary">Отмена</button>'
]);

modal.open();

// Очистить футер
modal.clearFooter();

После вызова метода clearFooter() футер будет пустым, и можно будет добавить новые элементы, если это необходимо.

Итоговая настройка кнопок в футере

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

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

Оглавление