Параметр filter

Featherlight — это лёгкая и гибкая библиотека для создания модальных окон на JavaScript. Одним из ключевых инструментов настройки поведения модальных окон является параметр filter. Он позволяет точно определять элементы, на которых будет инициироваться открытие окна, что особенно важно при работе с динамическим содержимым или множеством ссылок на одной странице.

Основное назначение filter

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

Пример базовой инициализации:

$('.gallery a').featherlight({
    filter: '.lightbox'
});

В этом примере Featherlight будет открывать модальное окно только для ссылок с классом .lightbox внутри контейнера .gallery. Все остальные ссылки внутри .gallery не будут реагировать на клик.

Форматы задания filter

filter поддерживает несколько способов задания:

  1. CSS-селектор — наиболее часто используемый вариант. Позволяет указывать классы, идентификаторы или сложные селекторы.
$('.menu a').featherlight({
    filter: 'a[data-lightbox="true"]'
});
  1. Функция — используется для более сложной логики выбора. Функция получает в качестве аргумента элемент, на который был произведён клик, и должна возвращать true для элементов, которые должны открывать модальное окно.
$('.items a').featherlight({
    filter: function(element){
        return $(element).data('active') === true;
    }
});
  1. Массив или список — редко используется, но позволяет задавать несколько критериев сразу. На практике чаще применяют CSS-селекторы, объединённые через запятую.
$('.list a').featherlight({
    filter: '.first, .second'
});

Особенности работы

  • filter применяется только на этапе клика. То есть Featherlight сначала ищет все элементы, к которым прикреплён обработчик, а затем проверяет каждый клик на соответствие фильтру.
  • Если filter не задан, модальное окно будет открываться для всех элементов, к которым привязана инициализация.
  • Использование функции в качестве фильтра даёт возможность учитывать динамические свойства элементов, например состояние кнопки или наличие определённых данных (data-*).

Примеры практического применения

Фильтрация по атрибуту data-*:

$('ul.photos li a').featherlight({
    filter: '[data-featured="true"]'
});

В этом случае окно откроется только для фотографий с атрибутом data-featured="true".

Фильтрация с учётом видимости элемента:

$('.menu a').featherlight({
    filter: function(el){
        return $(el).is(':visible');
    }
});

Модальное окно будет открываться только для видимых ссылок, игнорируя скрытые элементы.

Комбинированный фильтр для сложных списков:

$('.products a').featherlight({
    filter: '.available, [data-sale="true"]'
});

Окно откроется для ссылок, которые имеют класс .available или атрибут data-sale="true".

Взаимодействие с другими параметрами

Параметр filter тесно связан с параметрами selector и delegate:

  • selector определяет контейнер, внутри которого ищутся элементы.
  • delegate позволяет делегировать обработку событий клика на родительский элемент, а filter уточняет, какие дочерние элементы действительно вызывают модальное окно.

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

$('#gallery').featherlight({
    selector: 'a',
    filter: '.highlighted'
});

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

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

  • Использовать CSS-селекторы для простых случаев: классы, идентификаторы, атрибуты.
  • Использовать функцию для сложной логики: состояния элементов, динамические изменения DOM.
  • При работе с большим количеством элементов применять фильтры для оптимизации производительности и предотвращения лишних обработчиков.

Параметр filter делает Featherlight мощным инструментом для управления интерактивными элементами на странице, обеспечивая точный контроль над тем, что вызывает модальное окно, и позволяя легко интегрировать библиотеку в сложные интерфейсы.

Оглавление