Справочник

Содержание

Справочник по основным атрибутам

Ниже приведены наиболее распространенные атрибуты при использовании htmx.

Атрибут	Описание
`hx-boost`	добавить или убрать постепенное улучшение для ссылок и форм
`hx-get`	выполняет запрос `GET` на указанный URL
`hx-post`	выполняет запрос `POST` на указанный URL
`hx-on*`	обрабатывает события с помощью встроенных скриптов на элементах
`hx-push-url`	добавляет URL в адресную строку браузера, создавая новую запись в истории
`hx-select`	выбирает содержимое для обмена из ответа
`hx-select-oob`	выбирает содержимое для обмена из ответа, вне зоны видимости (в другом месте, кроме целевого элемента)
`hx-swap`	управляет тем, как содержимое обменивается (`outerHTML`, `beforeend`, `afterend`, …)
`hx-swap-oob`	помечает содержимое в ответе как вне зоны видимости (должно быть обменено в другом месте, кроме целевого элемента)
`hx-target`	указывает целевой элемент для обмена
`hx-trigger`	указывает событие, которое запускает запрос
`hx-vals`	добавляет значения в параметры для отправки с запросом (в формате JSON)

Справочник по дополнительным атрибутам

В таблице ниже перечислены все остальные доступные атрибуты htmx.

Атрибут	Описание
`hx-confirm`	отображает диалог `confirm()` перед отправкой запроса
`hx-delete`	выполняет запрос `DELETE` на указанный URL
`hx-disable`	отключает обработку htmx для данного узла и всех дочерних узлов
`hx-disabled-elt`	добавляет атрибут `disabled` к указанным элементам во время выполнения запроса
`hx-disinherit`	управление и отключение автоматического наследования атрибутов для дочерних узлов
`hx-encoding`	изменяет тип кодирования запроса
`hx-ext`	расширения, используемые для данного элемента
`hx-headers`	добавляет заголовки, которые будут отправлены с запросом
`hx-history`	предотвращает сохранение конфиденциальных данных в кэше истории
`hx-history-elt`	элемент для создания снимка и восстановления во время навигации по истории
`hx-include`	включает дополнительные данные в запросы
`hx-indicator`	элемент, к которому будет добавлен класс `htmx-request` во время запроса
`hx-params`	фильтрует параметры, которые будут отправлены с запросом
`hx-patch`	выполняет запрос `PATCH` на указанный URL
`hx-preserve`	указывают элементы, которые останутся неизменными между запросами
`hx-prompt`	отображает `prompt()` перед отправкой запроса
`hx-put`	выполняет запрос `PUT` на указанный URL
`hx-replace-url`	заменяет URL в адресной строке браузера
`hx-request`	настраивает различные аспекты запроса
`hx-sse`	перемещено в расширение. Документация для старых версий
`hx-sync`	управление синхронизацией запросов, выполняемых разными элементами
`hx-validate`	вынуждает элементы пройти валидацию перед запросом
`hx-vars`	динамически добавляет значения в параметры для отправки с запросом (устаревшее, используйте `hx-vals`)
`hx-ws`	перемещено в расширение. Документация для старых версий

Справочник по CSS классам

Класс	Описание
`htmx-added`	Применяется к новому фрагменту содержимого перед заменой, удаляется после фиксации.
`htmx-indicator`	Динамически сгенерированный класс, который будет переключать видимость (прозрачность: 1) при наличии класса `htmx-request`
`htmx-request`	Применяется к элементу или элементу, указанному с помощью `hx-indicator`, в процессе выполнения запроса
`htmx-settling`	Применяется к целевому элементу после обмена содержимого, удаляется после фиксации. Продолжительность может быть изменена с помощью `hx-swap`.
`htmx-swapping`	Применяется к целевому элементу перед обменом содержимого, удаляется после обмена. Продолжительность может быть изменена с помощью `hx-swap`.

Справочник по HTTP-заголовкам

Справочник по заголовкам запросов

Заголовок	Описание
`HX-Boosted`	указывает, что запрос осуществляется элементом, использующим hx-boost
`HX-Current-URL`	текущий URL браузера
`HX-History-Restore-Request`	“true”, если запрос для восстановления истории после промаха в кэше локальной истории
`HX-Prompt`	ответ пользователя на hx-prompt
`HX-Request`	всегда “true”
`HX-Target`	идентификатор целевого элемента, если он существует
`HX-Trigger-Name`	идентификатор элемента, вызвавшего событие, если он существует
`HX-Trigger`	идентификатор элемента, вызвавшего событие, если он существует

Справочник по заголовкам ответов

Заголовок	Описание
`HX-Location`	позволяет выполнить переадресацию на стороне клиента без полной перезагрузки страницы
`HX-Push-Url`	добавляет новый URL в стек истории
`HX-Redirect`	можно использовать для переадресации на стороне клиента на новое местоположение
`HX-Refresh`	если установлено “true”, клиент выполнит полную перезагрузку страницы
`HX-Replace-Url`	заменяет текущий URL в адресной строке
`HX-Reswap`	позволяет указать, как будет заменено содержимое ответа. См. hx-swap для возможных значений
`HX-Retarget`	CSS-селектор, обновляющий целевой элемент для обновления содержимого в другом элементе страницы
`HX-Reselect`	CSS-селектор, позволяющий выбрать часть ответа для замены. Переопределяет существующий `hx-select` в элементе, вызвавшем событие
`HX-Trigger`	позволяет запускать события на стороне клиента
`HX-Trigger-After-Settle`	позволяет запускать события на стороне клиента после этапа фиксации
`HX-Trigger-After-Swap`	позволяет запускать события на стороне клиента после этапа обмена

Справочник по событиям

Событие	Описание
`htmx:abort`	отправить это событие элементу, чтобы прервать запрос
`htmx:afterOnLoad`	срабатывает после завершения обработки успешного ответа AJAX-запроса
`htmx:afterProcessNode`	срабатывает после того, как htmx инициализировал узел
`htmx:afterRequest`	срабатывает после завершения AJAX-запроса
`htmx:afterSettle`	срабатывает после стабилизации DOM
`htmx:afterSwap`	срабатывает после замены нового содержимого
`htmx:beforeCleanupElement`	срабатывает перед тем, как htmx отключит элемент или удалит его из DOM
`htmx:beforeOnLoad`	срабатывает перед любой обработкой ответа
`htmx:beforeProcessNode`	срабатывает перед тем, как htmx инициализирует узел
`htmx:beforeRequest`	срабатывает перед выполнением AJAX-запроса
`htmx:beforeSwap`	срабатывает перед заменой, позволяет настроить замену
`htmx:beforeSend`	срабатывает непосредственно перед отправкой ajax-запроса
`htmx:configRequest`	срабатывает перед запросом, позволяет настроить параметры и заголовки
`htmx:confirm`	срабатывает после срабатывания триггера на элементе, позволяет отменить (или отложить) отправку AJAX-запроса
`htmx:historyCacheError`	срабатывает при ошибке при записи в кэш
`htmx:historyCacheMiss`	срабатывает при пропуске кэша в подсистеме истории
`htmx:historyCacheMissError`	срабатывает при неудачной удаленной загрузке
`htmx:historyCacheMissLoad`	срабатывает при успешной удаленной загрузке
`htmx:historyRestore`	срабатывает, когда htmx обрабатывает действие восстановления истории
`htmx:beforeHistorySave`	срабатывает перед сохранением содержимого в кэш истории
`htmx:load`	срабатывает, когда новое содержимое добавляется в DOM
`htmx:noSSESourceError`	срабатывает, когда элемент ссылается на событие SSE в своем триггере, но родительский источник SSE не определен
`htmx:onLoadError`	срабатывает при возникновении исключения во время обработки onLoad в htmx
`htmx:oobAfterSwap`	срабатывает после замены элемента вне диапазона
`htmx:oobBeforeSwap`	срабатывает перед заменой элемента вне диапазона, позволяет настроить замену
`htmx:oobErrorNoTarget`	срабатывает, когда элемент вне диапазона не имеет соответствующего идентификатора в текущем DOM
`htmx:prompt`	срабатывает после отображения запроса на ввод
`htmx:pushedIntoHistory`	срабатывает после добавления URL в историю
`htmx:responseError`	срабатывает при возникновении ошибки HTTP-ответа (не `200` или `300` код ответа)
`htmx:sendError`	срабатывает при сетевой ошибке, которая предотвращает выполнение HTTP-запроса
`htmx:sseError`	срабатывает при возникновении ошибки с источником SSE
`htmx:sseOpen`	срабатывает при открытии источника SSE
`htmx:swapError`	срабатывает при возникновении ошибки во время фазы замены
`htmx:targetError`	срабатывает при указании неверной цели
`htmx:timeout`	срабатывает при истечении времени ожидания запроса
`htmx:validation:validate`	срабатывает перед проверкой элемента
`htmx:validation:failed`	срабатывает, когда проверка элемента завершается неудачно
`htmx:validation:halted`	срабатывает, когда запрос приостановлен из-за ошибок проверки
`htmx:xhr:abort`	срабатывает при прерывании ajax-запроса
`htmx:xhr:loadend`	срабатывает по окончании ajax-запроса
`htmx:xhr:loadstart`	срабатывает при начале ajax-запроса
`htmx:xhr:progress`	срабатывает периодически во время ajax-запроса, который поддерживает события о ходе выполнения

Справочник по API JavaScript

Метод	Описание
`htmx.addClass()`	Добавляет класс к заданному элементу
`htmx.ajax()`	Выполняет ajax-запрос в стиле htmx
`htmx.closest()`	Находит ближайшего родителя заданного элемента, соответствующего селектору
`htmx.config`	Свойство, содержащее текущий объект конфигурации htmx
`htmx.createEventSource`	Свойство, содержащее функцию для создания объектов SSE EventSource для htmx
`htmx.createWebSocket`	Свойство, содержащее функцию для создания объектов WebSocket для htmx
`htmx.defineExtension()`	Определяет расширение htmx расширение
`htmx.find()`	Находит единственный элемент, соответствующий селектору
`htmx.findAll()` `htmx.findAll(elt, selector)`	Находит все элементы, соответствующие заданному селектору
`htmx.logAll()`	Устанавливает логирование, которое будет записывать все события htmx
`htmx.logger`	Свойство, установленное на текущий логгер (по умолчанию `null`)
`htmx.off()`	Удаляет обработчик события от заданного элемента
`htmx.on()`	Создает обработчик события на заданном элементе, возвращая его
`htmx.onLoad()`	Добавляет обработчик обратного вызова для события `htmx:load`
`htmx.parseInterval()`	Разбирает объявление интервала в значение в миллисекундах
`htmx.process()`	Обрабатывает данный элемент и его потомков, подключая любые функции htmx
`htmx.remove()`	Удаляет заданный элемент
`htmx.removeClass()`	Удаляет класс из заданного элемента
`htmx.removeExtension()`	Удаляет расширение htmx расширение
`htmx.takeClass()`	Взять класс из других элементов для данного элемента
`htmx.toggleClass()`	Переключает класс заданного элемента
`htmx.trigger()`	Срабатывает событие на элементе
`htmx.values()`	Возвращает значения ввода, связанные с данным элементом

Справочник по конфигурации

Htmx имеет некоторые параметры конфигурации, к которым можно получить доступ как программно, так и декларативно. Они перечислены ниже:

Переменная конфигурации	Информация
`htmx.config.historyEnabled`	по умолчанию `true`, действительно полезна только для тестирования
`htmx.config.historyCacheSize`	по умолчанию 10
`htmx.config.refreshOnHistoryMiss`	по умолчанию `false`, если установлено `true`, htmx выполнит полную перезагрузку страницы при пропуске истории, а не AJAX-запрос
`htmx.config.defaultSwapStyle`	по умолчанию `innerHTML`
`htmx.config.defaultSwapDelay`	по умолчанию 0
`htmx.config.defaultSettleDelay`	по умолчанию 20
`htmx.config.includeIndicatorStyles`	по умолчанию `true` (определяет, загружаются ли стили индикатора)
`htmx.config.indicatorClass`	по умолчанию `htmx-indicator`
`htmx.config.requestClass`	по умолчанию `htmx-request`
`htmx.config.addedClass`	по умолчанию `htmx-added`
`htmx.config.settlingClass`	по умолчанию `htmx-settling`
`htmx.config.swappingClass`	по умолчанию `htmx-swapping`
`htmx.config.allowEval`	по умолчанию `true`, может использоваться для отключения использования htmx eval для определенных функций (например, фильтров триггеров)
`htmx.config.allowScriptTags`	по умолчанию `true`, определяет, будет ли htmx обрабатывать теги script, найденные в новом содержимом
`htmx.config.inlineScriptNonce`	по умолчанию `''`, что означает, что к встроенным скриптам не будет добавлен nonce
`htmx.config.attributesToSettle`	по умолчанию `["class", "style", "width", "height"]`, атрибуты, которые необходимо установить во время фазы установления
`htmx.config.useTemplateFragments`	по умолчанию `false`, HTML-теги шаблонов для парсинга содержимого с сервера (несовместимо с IE11!)
`htmx.config.wsReconnectDelay`	по умолчанию `full-jitter`
`htmx.config.wsBinaryType`	по умолчанию `blob`, тип двоичных данных, получаемых по подключению WebSocket
`htmx.config.disableSelector`	по умолчанию `[hx-disable], [data-hx-disable]`, htmx не будет обрабатывать элементы с этим атрибутом или родительским элементом
`htmx.config.withCredentials`	по умолчанию `false`, разрешить межсайтовые запросы Access-Control с использованием учетных данных, таких как куки, заголовки авторизации или сертификаты TLS-клиента
`htmx.config.timeout`	по умолчанию 0, количество миллисекунд, которое запрос может занимать, прежде чем автоматически будет прерван
`htmx.config.scrollBehavior`	по умолчанию «smooth», поведение для усиленного элемента при переходе по страницам. Допустимые значения — `auto` и `smooth`. Smooth обеспечит плавную прокрутку до начала страницы, а auto будет вести себя как обычная ссылка.
`htmx.config.defaultFocusScroll`	если выделенный элемент должен быть прокручен в область видимости, по умолчанию false и может быть переопределен с помощью модификатора переключения focus-scroll.
`htmx.config.getCacheBusterParam`	по умолчанию false, если установлено в true, htmx включит параметр cache-busting в `GET` запросах, чтобы избежать кеширования частичных ответов браузером
`htmx.config.globalViewTransitions`	если установлено `true`, htmx будет использовать API переходов переходов при вставке нового содержимого.
`htmx.config.methodsThatUseUrlParams`	по умолчанию `["get"]`, htmx будет форматировать запросы с этими методами, кодируя их параметры в URL, а не в теле запроса
`htmx.config.selfRequestsOnly`	по умолчанию `false`, если установлено `true`, будут разрешены только AJAX-запросы на тот же домен, что и текущий документ
`htmx.config.ignoreTitle`	по умолчанию `false`, если установлено `true`, htmx не будет обновлять заголовок документа, когда будет найден тег `title` в новом содержимом
`htmx.config.scrollIntoViewOnBoost`	по умолчанию `true`, нужно ли прокручивать целевой элемент усиленного элемента в область видимости. Если `hx-target` пропущен в усиленном элементе, по умолчанию устанавливается `body`, что вызывает прокрутку страницы в начало.
`htmx.config.triggerSpecsCache`	по умолчанию `null`, кэш для хранения вычисленных спецификаций триггеров, улучшая производительность парсинга за счет большего использования памяти. Вы можете определить простой объект для использования никогда не очищающегося кэша или реализовать свою собственную систему с помощью объекта прокси

Вы можете установить их напрямую в javascript или использовать тег meta:

<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>

Licensed under the Zero-Clause BSD License.
https://htmx.org/reference/