Структура объекта buttons

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

buttons представляет собой массив экземпляров класса Noty.button, где каждый элемент описывает одну кнопку с определёнными параметрами и поведением.

Общая структура

Каждая кнопка создаётся через конструктор:

new Noty.button(text, className, onClick, attributes)

И затем передаётся в массив:

new Noty({
  text: 'Удалить файл?',
  buttons: [
    new Noty.button('Да', 'btn btn-success', function () {
      console.log('Удаление выполнено');
    }),
    new Noty.button('Нет', 'btn btn-danger', function () {
      console.log('Удаление отменено');
    })
  ]
}).show();

Параметры Noty.button

1. text

Тип: String Назначение: текст, отображаемый на кнопке

new Noty.button('Сохранить', ...)
  • Поддерживает обычный текст
  • Может содержать HTML (например, иконки)
new Noty.button('<b>OK</b>', ...)

2. className

Тип: String Назначение: CSS-классы для стилизации кнопки

new Noty.button('OK', 'btn btn-primary', ...)

Особенности:

  • Можно использовать любые CSS-фреймворки (например, Bootstrap)
  • Разрешено указывать несколько классов через пробел
  • При отсутствии классов кнопка будет использовать стандартные стили Noty

3. onClick

Тип: Function Назначение: обработчик события нажатия

new Noty.button('OK', 'btn btn-primary', function () {
  console.log('Нажато');
})

Функция получает два аргумента:

function (notyInstance, event) {
  // notyInstance — экземпляр уведомления
  // event — объект события
}

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

new Noty.button('Закрыть', 'btn btn-secondary', function (noty) {
  noty.close();
})

4. attributes

Тип: Object Назначение: дополнительные HTML-атрибуты кнопки

new Noty.button('Подробнее', 'btn btn-info', handler, {
  id: 'details-btn',
  'data-id': 42
})

Особенности:

  • Позволяет добавлять любые пользовательские атрибуты
  • Используется для интеграции с другими скриптами или тестами

Полная структура объекта кнопки

{
  text: 'Текст кнопки',
  className: 'css-классы',
  onClick: function(notyInstance, event) {},
  attributes: {
    key: 'value'
  }
}

Поведение кнопок

Закрытие уведомления

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

new Noty.button('OK', 'btn btn-success', function (noty) {
  noty.close();
})

Асинхронные действия

Кнопки часто используются для запуска асинхронных операций:

new Noty.button('Отправить', 'btn btn-primary', function (noty) {
  fetch('/api/send')
    .then(() => {
      noty.setText('Отправлено!');
      noty.close();
    });
})

Изменение состояния кнопки

Можно динамически изменять поведение через DOM:

new Noty.button('Загрузка...', 'btn btn-primary', function (noty, event) {
  event.target.disabled = true;
});

Работа с несколькими кнопками

Массив buttons позволяет создавать сложные интерфейсы:

new Noty({
  text: 'Сохранить изменения?',
  buttons: [
    new Noty.button('Сохранить', 'btn btn-success', function (noty) {
      console.log('Сохранено');
      noty.close();
    }),
    new Noty.button('Не сохранять', 'btn btn-warning', function (noty) {
      console.log('Пропущено');
      noty.close();
    }),
    new Noty.button('Отмена', 'btn btn-danger', function (noty) {
      noty.close();
    })
  ]
}).show();

Взаимодействие с экземпляром Noty

Объект notyInstance, передаваемый в onClick, предоставляет доступ ко всем методам уведомления:

  • noty.close() — закрыть уведомление
  • noty.setText(text) — изменить текст
  • noty.setType(type) — изменить тип уведомления
  • noty.show() — повторно показать

Пример:

new Noty.button('Ошибка', 'btn btn-danger', function (noty) {
  noty.setType('error');
  noty.setText('Произошла ошибка');
})

Стилизация кнопок

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

.custom-btn {
  background-color: #222;
  color: #fff;
  border-radius: 4px;
}
new Noty.button('Custom', 'custom-btn', handler)

Использование HTML внутри кнопки

Поддерживается вставка HTML:

new Noty.button('<i class="icon-ok"></i> OK', 'btn btn-success', handler)

Это удобно для:

  • добавления иконок
  • форматирования текста

Управление порядком кнопок

Порядок отображения кнопок соответствует порядку в массиве:

buttons: [
  button1,
  button2,
  button3
]

Изменение порядка элементов массива напрямую влияет на UI.

Ограничения и особенности

  • Кнопки работают только если buttons передан как массив
  • Нельзя передавать обычные объекты — только new Noty.button
  • Обработчик onClick обязателен для интерактивности
  • При большом количестве кнопок требуется дополнительная стилизация

Практический пример: диалог подтверждения

function confirmAction() {
  new Noty({
    text: 'Вы уверены?',
    modal: true,
    buttons: [
      new Noty.button('Да', 'btn btn-success', function (noty) {
        console.log('Подтверждено');
        noty.close();
      }),
      new Noty.button('Нет', 'btn btn-danger', function (noty) {
        noty.close();
      })
    ]
  }).show();
}

Особенности:

  • modal: true блокирует взаимодействие с остальной страницей
  • кнопки управляют логикой диалога

Расширенные сценарии

Использование замыканий

function createButton(id) {
  return new Noty.button('Выбрать', 'btn', function () {
    console.log('ID:', id);
  });
}

Генерация кнопок динамически

const items = ['A', 'B', 'C'];

const buttons = items.map(item =>
  new Noty.button(item, 'btn btn-info', function () {
    console.log(item);
  })
);

new Noty({
  text: 'Выбор:',
  buttons: buttons
}).show();

Ошибки при работе с buttons

1. Передача функции вместо кнопки

buttons: [
  function() {} // ошибка
]

2. Отсутствие new

Noty.button(...) // ошибка

3. Не закрывается уведомление

Причина — отсутствие noty.close() в обработчике.

Рекомендации по использованию

  • Использовать не более 2–3 кнопок для удобства интерфейса
  • Всегда явно управлять закрытием уведомления
  • Разделять действия по смыслу (подтверждение / отмена)
  • Добавлять визуальные различия через классы
  • Не перегружать кнопки логикой — выносить сложные действия в отдельные функции

Внутреннее представление

После создания кнопки Noty формирует DOM-элемент <button> с:

  • текстом (innerHTML)
  • CSS-классами
  • привязанным обработчиком click
  • пользовательскими атрибутами

Это делает buttons полноценным мостом между уведомлением и пользовательским интерфейсом, позволяя превращать простые уведомления в интерактивные элементы управления.

Оглавление