Фильтр для HTML

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

Модальные окна в Featherlight создаются вызовом метода .featherlight() на jQuery-объекте. Простейший пример:

$('#trigger').featherlight('<p>Привет, мир!</p>');

Здесь #trigger — элемент, при клике на который откроется модальное окно с содержимым <p>Привет, мир!</p>.

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

Подключение и инициализация

Для работы библиотеки необходимы следующие ресурсы:

<link href="featherlight.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="featherlight.min.js"></script>

Инициализация может быть как программной, так и через атрибуты HTML:

<a href="#inline-content" data-featherlight="inline">Открыть окно</a>

<div id="inline-content" style="display:none;">
  <h2>Контент для модального окна</h2>
  <p>Можно использовать любые элементы HTML.</p>
</div>

В данном случае Featherlight автоматически связывает ссылку с модальным окном через data-featherlight="inline".

Настройка модального окна

Featherlight предоставляет обширный набор опций для конфигурации поведения модального окна. Основные из них:

  • variant — добавляет CSS-класс для кастомизации внешнего вида.
  • closeOnClick — управление закрытием по клику вне окна (true, false, 'background').
  • closeIcon — HTML для кнопки закрытия.
  • openSpeed / closeSpeed — скорость анимации открытия и закрытия в миллисекундах.
  • beforeOpen / afterOpen / beforeClose / afterClose — хуки для выполнения функций на разных стадиях жизненного цикла окна.

Пример настройки через Jav * aScript:

$('#trigger').featherlight('<p>Содержимое окна</p>', {
    variant: 'custom-lightbox',
    closeOnClick: 'background',
    openSpeed: 300,
    closeSpeed: 200,
    afterOpen: function() {
        console.log('Окно открыто');
    }
});

Работа с фильтром для HTML-контента

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

Использование селектора для фильтрации:

$('#gallery a').featherlight({
    filter: 'img',
    afterOpen: function(event) {
        console.log('Показан элемент:', event.target);
    }
});

В этом примере при клике на ссылку будет отображено только содержимое, соответствующее селектору img, игнорируя остальные вложенные элементы.

Фильтр как функция:

$('#gallery a').featherlight({
    filter: function() {
        return $(this).find('img').first();
    }
});

Функциональный фильтр позволяет динамически выбирать контент в зависимости от состояния элемента, например, выводить первый <img> в блоке или формировать HTML на основе атрибутов.

Использование inline и ajax контента с фильтром

Inline-контент:

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

<div id="product" style="display:none;">
  <h2>Товар</h2>
  <p class="description">Описание товара</p>
  <p class="price">$199</p>
</div>

<a href="#product" data-featherlight="inline" data-featherlight-filter=".price">Цена</a>

Только элемент с классом .price будет отображён в модальном окне.

AJAX-контент:

При подгрузке данных через AJAX фильтр позволяет выбрать нужный элемент из загруженного HTML:

$.featherlight({
    ajax: 'product.html',
    filter: '.product-description'
});

Featherlight извлечёт из ответа только .product-description и покажет его в модальном окне, игнорируя остальные части документа.

Кастомизация CSS для фильтрованных элементов

Библиотека добавляет класс featherlight к контейнеру окна, а фильтрованный контент помещается внутрь. Это позволяет применять стили как к самому окну, так и к выбранным элементам:

.featherlight.custom-lightbox {
    background: rgba(0,0,0,0.85);
    padding: 20px;
    border-radius: 8px;
}

.featherlight .price {
    color: #ff0000;
    font-size: 24px;
    font-weight: bold;
}

Класс custom-lightbox можно подключить через опцию variant, что делает дизайн модального окна полностью настраиваемым.

Динамическая фильтрация и события

Featherlight поддерживает события, которые позволяют динамически изменять фильтр или контент перед отображением:

  • beforeOpen — возможность изменить фильтр до открытия окна.
  • afterOpen — можно манипулировать фильтрованным DOM.
  • beforeClose / afterClose — очищение и подготовка к следующему показу.

Пример динамического фильтра:

$('#gallery a').featherlight({
    beforeOpen: function(event) {
        this.filter = function() {
            return $(this).find('img.featured');
        };
    }
});

При этом модальное окно покажет только изображения с классом featured, даже если ссылка содержит несколько <img>.

Резюме ключевых особенностей фильтра в Featherlight

  • Позволяет отображать только нужные элементы DOM в модальном окне.
  • Может быть задан как CSS-селектор или функция.
  • Работает с inline и AJAX-контентом.
  • Полностью интегрируется с событиями жизненного цикла Featherlight.
  • Обеспечивает гибкую кастомизацию через CSS и JS.

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

Оглавление