Javascript API

Хотя это не является основным фокусом библиотеки, htmx предоставляет небольшой API вспомогательных методов, предназначенных в основном для разработки расширений или работы с событиями.

Проект hyperscript призван обеспечить более широкую поддержку сценариев для приложений на основе htmx.

Метод - `htmx.addClass()`

Этот метод добавляет класс к заданному элементу.

Параметры

elt - элемент, к которому нужно добавить класс
class - класс для добавления

или

elt - элемент, к которому нужно добавить класс
class - класс для добавления
delay - задержка (в миллисекундах) перед добавлением класса

Пример

// add the class 'myClass' to the element with the id 'demo'
htmx.addClass(htmx.find('#demo'), 'myClass');
// add the class 'myClass' to the element with the id 'demo' after 1 second
htmx.addClass(htmx.find('#demo'), 'myClass', 1000);

Метод - `htmx.ajax()`

Выполняет запрос AJAX в стиле htmx. Этот метод возвращает Promise, поэтому после вставки содержимого в DOM можно выполнить обратный вызов.

Параметры

verb - ‘GET’, ‘POST’ и т.д.
path - путь URL для AJAX-запроса
element - целевой элемент (по умолчанию body)

или

verb - ‘GET’, ‘POST’ и т.д.
path - путь URL для AJAX-запроса
selector - селектор для целевого элемента

или

verb - ‘GET’, ‘POST’ и т.д.
path - путь URL для AJAX-запроса
context - объект контекста, содержащий любое из следующего:
- source - исходный элемент запроса
- event - событие, «вызвавшее» запрос
- handler - обратный вызов, который обработает HTML-ответ
- target - целевой элемент для замены ответа
- swap - способ замены ответа относительно целевого элемента
- values - значения для отправки с запросом
- headers - заголовки для отправки с запросом
- select - позволяет выбрать содержимое, которое вы хотите заменить из ответа

Пример

// issue a GET to /example and put the response HTML into #myDiv
htmx.ajax('GET', '/example', '#myDiv')
// issue a GET to /example and replace #myDiv with the response
htmx.ajax('GET', '/example', {target:'#myDiv', swap:'outerHTML'})
// execute some code after the content has been inserted into the DOM
htmx.ajax('GET', '/example', '#myDiv').then(() => {
// this code will be executed after the 'htmx:afterOnLoad' event,
// and before the 'htmx:xhr:loadend' event
console.log('Content inserted successfully!');
    });

Метод - `htmx.closest()`

Находит ближайший соответствующий элемент в родословной заданных элементов, включая сам элемент.

Параметры

elt - элемент, от которого начинается поиск
selector - селектор для поиска

Пример

// find the closest enclosing div of the element with the id 'demo'
htmx.closest(htmx.find('#demo'), 'div');

Свойство - `htmx.config`

Свойство, хранящее конфигурацию, которую htmx использует во время выполнения.

Обратите внимание, что использование тега meta является предпочтительным способом установки этих свойств.

Свойства

attributesToSettle:["class", "style", "width", "height"] - массив строк: атрибуты, которые устанавливаются на стадии завершения
refreshOnHistoryMiss:false - булево значение: если установлено в true, htmx будет выполнять полную перегрузку страницы при пропуске истории, а не использовать AJAX-запрос
defaultSettleDelay:20 - целое число: стандартная задержка между завершением замены содержимого и настройкой атрибутов
defaultSwapDelay:0 - целое число: стандартная задержка между получением ответа от сервера и выполнением замены
defaultSwapStyle:'innerHTML' - строка: стандартный стиль замены, используемый, если hx-swap опущен
historyCacheSize:10 - целое число: количество страниц, хранимых в localStorage для поддержки истории
historyEnabled:true - булево значение: использовать ли историю
includeIndicatorStyles:true - булево значение: если true, htmx вставит немного CSS в страницу, чтобы сделать индикаторы невидимыми, если класс htmx-indicator не присутствует
indicatorClass:'htmx-indicator' - строка: класс, который добавляется к индикаторам, когда запрос находится в процессе
requestClass:'htmx-request' - строка: класс, который временно добавляется к элементам, добавленным htmx в DOM
addedClass:'htmx-added' - строка: класс, который добавляется к целевым элементам, когда htmx находится на стадии завершения
settlingClass:'htmx-settling' - строка: класс, который добавляется к целевым элементам, когда htmx находится на стадии замены
allowEval:true - булево значение: позволяет использовать функциональность типа eval в htmx, чтобы включить hx-vars, условия срабатывания и оценку тегов script. Может быть установлено в false для совместимости CSP.
allowScriptTags:true - булево значение: разрешить оценку тегов script в новом содержимом
inlineScriptNonce:'' - строка: nonce для добавления к встроенным скриптам
useTemplateFragments:false - булево значение: использовать теги HTML-шаблонов для разбора содержимого с сервера. Это позволяет использовать внеочередное содержимое при возвращении таких элементов, как строки таблиц, но несовместимо с IE11.
withCredentials:false - булево значение: разрешить запросы с межсайтовым управлением доступом (CORS) с использованием учетных данных, таких как куки, заголовки авторизации или сертификаты клиента TLS
timeout:0 - целое число: количество миллисекунд, которое запрос может занимать до автоматического завершения
wsReconnectDelay:'full-jitter' - строка/функция: стандартная реализация getWebSocketReconnectDelay для повторного подключения после неожиданной потери соединения кодом события Abnormal Closure, Service Restart или Try Again Later
wsBinaryType:'blob' - строка: тип двоичных данных, получаемых по WebSocket-соединению
disableSelector:"[hx-disable], [data-hx-disable]" - массив строк: htmx не будет обрабатывать элементы с этим атрибутом или родительскими
scrollBehavior:'smooth' - строка: поведение для усиленного (boosted) элемента при переходах между страницами. Разрешенные значения auto и smooth. Smooth обеспечивает плавную прокрутку до начала страницы, а auto ведет себя как обычная ссылка.
defaultFocusScroll:false - булево значение: если фокусированный элемент должен быть прокручен в область просмотра. Может быть переопределён с помощью модификатора замены focus-scroll.
getCacheBusterParam:false - булево значение: если установлено в true, htmx будет включать параметр для обхода кэширования в GET запросах, чтобы избежать кеширования частичных ответов браузером
globalViewTransitions:false - булево значение: если установлено в true, htmx будет использовать API переходов между представлениями (View Transition) при замене содержимого.
methodsThatUseUrlParams:["get"] - массив строк: htmx будет форматировать запросы этими методами, кодируя их параметры в URL, а не в теле запроса
selfRequestsOnly:false - булево значение: если установлено в true, будут разрешены только запросы AJAX в том же домене, что и текущий документ
ignoreTitle:false - булево значение: если установлено в true, htmx не будет обновлять заголовок документа при нахождении тега title в новом содержимом
scrollIntoViewOnBoost:true - булево значение: прокручивается ли целевой элемент усиленного элемента в viewport. Если hx-target опущен для усиленного элемента, целевой элемент по умолчанию - body, что вызывает прокрутку страницы до верха.
triggerSpecsCache:null - объект: кэш для хранения спецификаций оценённых триггеров, улучшающий производительность парсинга за счёт большего использования памяти. Можно определить простой объект для использования кэша, который никогда не очищается, или реализовать собственную систему с помощью объекта proxy |

Пример

// update the history cache size to 30
htmx.config.historyCacheSize = 30;

Свойство - `htmx.createEventSource`

Свойство, используемое для создания новых источников Server Sent Events (SSE). Может быть обновлено для настройки настраиваемого SSE.

Значение

func(url) - функция, которая принимает строку URL и возвращает новый EventSource

Пример

// override SSE event sources to not use credentials
htmx.createEventSource = function(url) {
return new EventSource(url, {withCredentials:false});
  };

Свойство - `htmx.createWebSocket`

Свойство, используемое для создания новых WebSocket соединений. Может быть обновлено для настройки настраиваемого WebSocket.

Значение

func(url) - функция, которая принимает строку URL и возвращает новый WebSocket

Пример

// override WebSocket to use a specific protocol
htmx.createWebSocket = function(url) {
return new WebSocket(url, ['wss']);
  };

Метод - `htmx.defineExtension()`

Определяет новое расширение htmx.

Параметры

name - имя расширения
ext - определение расширения

Пример

// defines a silly extension that just logs the name of all events triggered
htmx.defineExtension("silly", {
onEvent : function(name, evt) {
console.log("Event " + name + " was triggered!")
    }
  });

Метод - `htmx.find()`

Находит элемент, соответствующий селектору.

Параметры

selector - селектор для сопоставления

или

elt - корневой элемент, в котором нужно найти соответствующий элемент, включая сам элемент
selector - селектор для сопоставления

Пример

// find div with id my-div
var div = htmx.find("#my-div")
// find div with id another-div within that div
var anotherDiv = htmx.find(div, "#another-div")

Метод - `htmx.findAll()`

Находит все элементы, соответствующие селектору.

Параметры

selector - селектор для сопоставления

или

elt - корневой элемент, в котором нужно найти соответствующие элементы, включая сам элемент
selector - селектор для сопоставления

Пример

// find all divs
var allDivs = htmx.findAll("div")
// find all paragraphs within a given div
var allParagraphsInMyDiv = htmx.findAll(htmx.find("#my-div"), "p")

Метод - `htmx.logAll()`

Выводит все события htmx, полезно для отладки.

Пример

htmx.logAll();

Метод - `htmx.logNone()`

Не выводить события htmx, вызовите этот метод, чтобы отключить отладчик, если вы ранее его включили.

Пример

htmx.logNone();

Свойство - `htmx.logger`

Логгер, используемый htmx для регистрации.

Значение

func(elt, eventName, detail) - функция, которая принимает элемент, имя события и детали события и записывает его

Пример

htmx.logger = function(elt, event, data) {
if(console) {
console.log("INFO:", event, elt, data);
        }
    }

Метод - `htmx.off()`

Удаляет обработчик событий из элемента.

Параметры

eventName - имя события для удаления обработчика
listener - обработчик для удаления

или

target - элемент, из которого нужно удалить обработчик
eventName - имя события для удаления обработчика
listener - обработчик для удаления

Пример

// remove this click listener from the body
htmx.off("click", myEventListener);
// remove this click listener from the given div
htmx.off("#my-div", "click", myEventListener)

Метод - `htmx.on()`

Добавляет обработчик событий к элементу.

Параметры

eventName - имя события, для которого нужно добавить обработчик
listener - обработчик для добавления

или

target - элемент, к которому нужно добавить обработчик
eventName - имя события, для которого нужно добавить обработчик
listener - обработчик для добавления

Пример

// add a click listener to the body
var myEventListener = htmx.on("click", function(evt){ console.log(evt); });
// add a click listener to the given div
var myEventListener = htmx.on("#my-div", "click", function(evt){ console.log(evt); });

Метод - `htmx.onLoad()`

Добавляет обработчик для события htmx:load. Это можно использовать для обработки нового контента, например, инициализации контента с помощью javascript библиотеки

Параметры

callback(elt) - обработчик для вызова при загрузке нового контента

Пример

htmx.onLoad(function(elt){
MyLibrary.init(elt);
    })

Метод - `htmx.parseInterval()`

Парсит строку интервала, соответствующую тому, как это делает htmx. Полезно для плагинов, имеющих атрибуты, связанные с временем.

Внимание: Принимает целое число, за которым следует либо s либо ms. Все остальные значения используют parseFloat

Параметры

str - строка интервала

Пример

// returns 3000
var milliseconds = htmx.parseInterval("3s");
// returns 3 - Caution
var milliseconds = htmx.parseInterval("3m");

Метод - `htmx.process()`

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

Параметры

elt - элемент для обработки

Пример

  document.body.innerHTML = "<div hx-get='/example'>Get it!</div>"
// process the newly added content
htmx.process(document.body);

Метод - `htmx.remove()`

Удаляет элемент из DOM

Параметры

elt - удаляемый элемент

или

elt - удаляемый элемент
delay - задержка (в миллисекундах) перед удалением элемента

Пример

// removes my-div from the DOM
htmx.remove(htmx.find("#my-div"));
// removes my-div from the DOM after a delay of 2 seconds
htmx.remove(htmx.find("#my-div"), 2000);

Метод - `htmx.removeClass()`

Удаляет класс из заданного элемента

Параметры

elt - элемент, из которого нужно удалить класс
class - класс для удаления

или

elt - элемент, из которого нужно удалить класс
class - класс для удаления
delay - задержка (в миллисекундах) перед удалением класса

Пример

// removes .myClass from my-div
htmx.removeClass(htmx.find("#my-div"), "myClass");
// removes .myClass from my-div after 6 seconds
htmx.removeClass(htmx.find("#my-div"), "myClass", 6000);

Метод - `htmx.removeExtension()`

Удаляет указанное расширение из htmx

Параметры

name - имя расширения для удаления

Пример

htmx.removeExtension("my-extension");

Метод - `htmx.takeClass()`

Забирает заданный класс у его соседей, так что среди его соседей только указанный элемент будет иметь этот класс.

Параметры

elt - элемент, который получит класс
class - класс для взятия

Пример

// takes the selected class from tab2's siblings
htmx.takeClass(htmx.find("#tab2"), "selected");

Метод - `htmx.toggleClass()`

Переключает заданный класс для элемента

Параметры

elt - элемент для переключения класса
class - класс для переключения

Пример

// toggles the selected class on tab2
htmx.toggleClass(htmx.find("#tab2"), "selected");

Метод - `htmx.trigger()`

Вызывает заданное событие на элементе

Параметры

elt - элемент, на котором нужно вызвать событие
name - имя события для вызова
detail - детали события

Пример

// triggers the myEvent event on #tab2 with the answer 42
htmx.trigger("#tab2", "myEvent", {answer:42});

Метод - `htmx.values()`

Возвращает значения ввода, которые будут разрешены для данного элемента с помощью механизма разрешения значений htmx

Параметры

elt - элемент, для которого нужно разрешить значения
request type - тип запроса (например, get или post) не-GET запросы будут включать в себя форму элемента. По умолчанию post

Пример

// gets the values associated with this form
var values = htmx.values(htmx.find("#myForm"));

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

Javascript API

Метод - htmx.addClass()

Параметры

Пример

Метод - htmx.ajax()

Параметры

Пример

Метод - htmx.closest()

Параметры

Пример

Свойство - htmx.config

Свойства

Пример

Свойство - htmx.createEventSource

Значение

Пример

Свойство - htmx.createWebSocket

Значение

Пример

Метод - htmx.defineExtension()

Параметры

Пример

Метод - htmx.find()

Параметры

Пример

Метод - htmx.findAll()

Параметры

Пример

Метод - htmx.logAll()

Пример

Метод - htmx.logNone()

Пример

Свойство - htmx.logger

Значение

Пример

Метод - htmx.off()

Параметры

Пример

Метод - htmx.on()

Параметры

Пример

Метод - htmx.onLoad()

Параметры

Пример

Метод - htmx.parseInterval()

Параметры

Пример

Метод - htmx.process()

Параметры

Пример

Метод - htmx.remove()

Параметры

Пример

Метод - htmx.removeClass()

Параметры

Пример

Метод - htmx.removeExtension()

Параметры

Пример

Метод - htmx.takeClass()

Параметры

Пример

Метод - htmx.toggleClass()

Параметры

Пример

Метод - htmx.trigger()

Параметры

Пример

Метод - htmx.values()

Параметры

Пример

Метод - `htmx.addClass()`

Метод - `htmx.ajax()`

Метод - `htmx.closest()`

Свойство - `htmx.config`

Свойство - `htmx.createEventSource`

Свойство - `htmx.createWebSocket`

Метод - `htmx.defineExtension()`

Метод - `htmx.find()`

Метод - `htmx.findAll()`

Метод - `htmx.logAll()`

Метод - `htmx.logNone()`

Свойство - `htmx.logger`

Метод - `htmx.off()`

Метод - `htmx.on()`

Метод - `htmx.onLoad()`

Метод - `htmx.parseInterval()`

Метод - `htmx.process()`

Метод - `htmx.remove()`

Метод - `htmx.removeClass()`

Метод - `htmx.removeExtension()`

Метод - `htmx.takeClass()`

Метод - `htmx.toggleClass()`

Метод - `htmx.trigger()`

Метод - `htmx.values()`