测试 ---目录提取 -- 编写开发文档

参考文档

文章引用为:

https://htmx.org.cn/reference/

目录

  • htmx 核心属性

  • htmx 附加属性

  • htmx CSS类

  • htmx 请求头

  • htmx 响应头

  • htmx 事件

  • htmx 扩展

  • JavaScript API

  • 配置选项

核心属性参考

使用htmx时最常用的属性。

属性

描述

hx-get

向指定URL发送GET请求

hx-post

向指定URL发送POST请求

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-boost

为链接和表单添加渐进增强

hx-confirm

在发出请求前显示confirm()对话框

hx-delete

向指定URL发送DELETE请求

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-inherit

控制并启用子节点的自动属性继承(如果默认已禁用)

hx-params

过滤随请求一起提交的参数

hx-patch

向指定URL发送PATCH请求

hx-preserve

指定在请求之间保持不变的元素

hx-prompt

在提交请求前显示prompt()

hx-put

向指定URL发送PUT请求

hx-replace-url

替换浏览器地址栏中的URL

hx-request

配置请求的各个方面

hx-sync

控制不同元素发出的请求如何同步

hx-validate

强制元素在请求前进行自我验证

hx-vars

动态添加随请求一起提交的参数值(已弃用,请使用hx-vals)

CSS类参考

描述

htmx-added

在交换新内容前应用,内容稳定后移除。

htmx-indicator

动态生成的类,当存在htmx-request类时切换可见性(opacity:1)

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

目标元素的id(如果存在)

HX-Trigger-Name

触发元素的name(如果存在)

HX-Trigger

触发元素的id(如果存在)

响应头参考

头部

描述

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:beforeTransition

在视图过渡包装的交换发生前触发

htmx:configRequest

在请求前触发,允许你自定义参数和头部

htmx:confirm

在元素上触发事件后触发,允许你取消(或延迟)发出AJAX请求

htmx:historyCacheError

在缓存写入过程中发生错误时触发

htmx:historyCacheHit

在历史子系统中缓存命中时触发

htmx:historyCacheMiss

在历史子系统中缓存未命中时触发

htmx:historyCacheMissLoadError

在远程检索失败时触发

htmx:historyCacheMissLoad

在成功远程检索时触发

htmx:historyRestore

在htmx处理历史恢复操作时触发

htmx:beforeHistorySave

在内容保存到历史缓存前触发

htmx:load

在向DOM添加新内容时触发

htmx:noSSESourceError

当元素在其触发器中引用SSE事件但未定义父SSE源时触发

htmx:onLoadError

在htmx的onLoad处理过程中发生异常时触发

htmx:oobAfterSwap

在带外元素交换后触发

htmx:oobBeforeSwap

在带外元素交换前触发,允许你配置交换

htmx:oobErrorNoTarget

当带外元素在当前DOM中没有匹配的ID时触发

htmx:prompt

在显示提示后触发

htmx:pushedIntoHistory

在将URL推入历史记录后触发

htmx:replacedInHistory

在替换历史记录中的URL后触发

htmx:responseError

在发生HTTP响应错误(非200或300响应码)时触发

htmx:sendAbort

在请求中止时触发

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请求期间定期触发

JavaScript API参考

方法

描述

htmx.addClass()

向给定元素添加类

htmx.ajax()

发出htmx风格的AJAX请求

htmx.closest()

查找给定元素最接近的匹配选择器的父元素

htmx.config

保存当前htmx配置对象的属性

htmx.createEventSource

保存为htmx创建SSE EventSource对象的函数的属性

htmx.createWebSocket

保存为htmx创建WebSocket对象的函数的属性

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.swap()

执行HTML内容的交换(和稳定)

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是否处理新内容中的脚本标签

htmx.config.inlineScriptNonce

默认为'',表示不会向内联脚本添加nonce

htmx.config.inlineStyleNonce

默认为'',表示不会向内联样式添加nonce

htmx.config.attributesToSettle

默认为["class", "style", "width", "height"],稳定阶段要稳定的属性

htmx.config.wsReconnectDelay

默认为full-jitter

htmx.config.wsBinaryType

默认为blob,通过WebSocket连接接收的二进制数据类型

htmx.config.disableSelector

默认为[hx-disable], [data-hx-disable],htmx不会处理具有此属性或其父元素具有此属性的元素

htmx.config.disableInheritance

默认为false。如果设置为true,将完全禁用属性继承,此时可以使用hx-inherit属性手动控制继承。

htmx.config.withCredentials

默认为false,允许跨域请求携带凭据(如cookies、授权头或TLS客户端证书)

htmx.config.timeout

默认为0,表示请求自动终止前的超时毫秒数

htmx.config.scrollBehavior

默认为'instant',在使用show修饰符时的滚动行为。可选值有instant(立即跳转)、smooth(平滑滚动)和auto(由scroll-behavior的CSS计算值决定)。

htmx.config.defaultFocusScroll

聚焦元素是否自动滚动到视图中,默认为false,可通过focus-scroll交换修饰符覆盖

htmx.config.getCacheBusterParam

默认为false,若设为true,htmx会在GET请求后追加org.htmx.cache-buster=targetElementId格式的目标元素参数

htmx.config.globalViewTransitions

若设为true,htmx将在内容交换时使用视图过渡API

htmx.config.methodsThatUseUrlParams

默认为["get", "delete"],这些方法的请求参数将被编码在URL中而非请求体

htmx.config.selfRequestsOnly

默认为true,是否仅允许向当前文档同域的AJAX请求

htmx.config.ignoreTitle

默认为false,若设为true,当发现新内容中有title标签时htmx不会更新文档标题

htmx.config.scrollIntoViewOnBoost

默认为true,是否将增强元素的目标滚动到视图中。若增强元素未指定hx-target,则默认以body为目标,导致页面滚动到顶部。

htmx.config.triggerSpecsCache

默认为null,用于存储已解析的触发器规范的缓存,可提升解析性能但会增加内存使用。可定义普通对象作为永久缓存,或使用代理对象实现自定义系统

htmx.config.responseHandling

可在此配置不同状态码的默认响应处理行为(交换或报错)

htmx.config.allowNestedOobSwaps

默认为true,是否处理主响应元素内嵌套元素的OOB交换。参见嵌套OOB交换。

htmx.config.historyRestoreAsHxRequest

默认为true,是否将历史缓存未命中的整页重载请求视为"HX-Request"(通过返回此响应头)。当使用HX-Request头选择性返回部分响应时,应始终禁用此选项

您可以直接在JavaScript中设置这些配置,或使用meta标签:

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

请先登录后再回复 登录

一位过气的老牌手搓程序员兼用户体验测试员
发帖 125
评论 160
粉丝 2
关注 1
发新帖
目录

扫码手机打开本帖