Метод addFooterBtn

Метод addFooterBtn в библиотеке Tingle.js

Метод addFooterBtn является одним из ключевых методов библиотеки Tingle.js, предназначенной для создания и управления модальными окнами в веб-приложениях. Этот метод позволяет добавлять кнопки в нижнюю часть модального окна, что предоставляет пользователю возможность взаимодействовать с модальными окнами, например, для закрытия, подтверждения или других действий.

Модальные окна часто требуют дополнительной пользовательской интеракции через кнопки, расположенные внизу окна. Метод addFooterBtn решает задачу добавления таких кнопок. Каждая кнопка может быть настроена с указанием текста, стилей и функций, которые она должна выполнять при нажатии.

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

const modal = new tingle.modal();

// Добавление кнопки в нижнюю часть модального окна
modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary', function() {
    modal.close();
});

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

Сигнатура метода

modal.addFooterBtn(buttonText, buttonClass, callback);

Параметры:

  • buttonText (строка): текст, который будет отображаться на кнопке.
  • buttonClass (строка): классы CSS, которые будут применены к кнопке. Это позволяет задавать стиль кнопки, включая цвет, размер, оформление и т.д.
  • callback (функция): функция, которая будет вызвана при нажатии на кнопку. В этой функции обычно выполняются действия, такие как закрытие модального окна или вызов других сценариев.

Описание параметров

buttonText

Этот параметр определяет текст, который будет отображаться на кнопке. Текст может быть любым и представляет собой строку. Например, можно использовать такие значения, как “ОК”, “Отмена”, “Применить” или даже более сложные строки с HTML-разметкой, если необходимо.

buttonClass

Параметр buttonClass задаёт внешний вид кнопки, определяя её стиль. Он может включать несколько классов, разделённых пробелами. Например:

modal.addFooterBtn('ОК', 'tingle-btn tingle-btn--primary tingle-btn--large');

Здесь добавляется кнопка с текстом “ОК”, которая будет иметь стиль кнопки “primary” (основная кнопка) и увеличенный размер.

callback

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

Пример:

modal.addFooterBtn('Сохранить', 'tingle-btn tingle-btn--success', function() {
    // Логика сохранения данных
    alert('Данные сохранены');
    modal.close();
});

В данном примере кнопка выполняет действие по сохранению данных и закрывает модальное окно после выполнения операции.

Особенности работы с кнопками в Tingle.js

  1. Неограниченное количество кнопок: Метод addFooterBtn позволяет добавлять любое количество кнопок в нижнюю часть модального окна. При необходимости можно добавить несколько кнопок для выполнения различных действий. Например:

    modal.addFooterBtn('ОК', 'tingle-btn tingle-btn--primary', function() {
    modal.close();
});
modal.addFooterBtn('Отмена', 'tingle-btn tingle-btn--secondary', function() {
    modal.close();
});

  2. CSS стилизация: Tingle.js предоставляет стили по умолчанию для кнопок. Однако для гибкости можно добавлять собственные классы CSS, чтобы настроить кнопки в соответствии с дизайном приложения. Это особенно полезно, когда требуется применить индивидуальные стили для разных кнопок.

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

  4. Кнопки с динамическим текстом: При необходимости можно менять текст на кнопке после её создания, обращаясь к элементу DOM:

    const btn = modal.addFooterBtn('Начать', 'tingle-btn tingle-btn--primary', function() {
    console.log('Процесс начался');
});
btn.innerHTML = 'Старт';

  5. Обработчики событий: Можно передавать обработчики событий, помимо стандартных функций callback. Это позволяет гибко управлять поведением кнопок и взаимодействовать с другими элементами страницы.

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

Пример модального окна с двумя кнопками: одна для закрытия окна, другая — для выполнения действия.

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

modal.setContent('<h1>Вы хотите продолжить?</h1>');

modal.addFooterBtn('Да', 'tingle-btn tingle-btn--primary', function() {
    alert('Вы выбрали "Да"');
    modal.close();
});

modal.addFooterBtn('Нет', 'tingle-btn tingle-btn--secondary', function() {
    alert('Вы выбрали "Нет"');
    modal.close();
});

modal.open();

В этом примере создаются два варианта кнопок с разными действиями, и модальное окно открывается с указанным контентом. Пользователь может выбрать одно из двух действий.

Заключение

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

Оглавление