mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 20:51:21 +08:00
754 lines
56 KiB
HTML
754 lines
56 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>\</> htmx 备忘清单
|
||
& htmx cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="适合初学者的综合 htmx 备忘清单
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="htmx,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
<link rel="stylesheet" href="../style/katex.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/htmx.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.5.1"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="-htmx-备忘清单"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||
<path d="M107.946667 838.4l57.173333 23.893333v-385.28l-103.68 250.026667c-17.493333 43.52 3.413333 93.44 46.506667 111.36z m832-157.866667L728.32 169.813333a85.888 85.888 0 0 0-77.226667-52.48c-11.093333 0-22.613333 1.706667-33.706666 6.4L302.933333 253.866667a85.290667 85.290667 0 0 0-46.08 110.933333l211.626667 510.72a85.248 85.248 0 0 0 110.933333 46.08l314.026667-130.133333a85.077333 85.077333 0 0 0 46.506667-110.933334zM336.213333 373.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m-85.333333 469.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h61.866667l-147.2-355.84v270.506667z"></path>
|
||
</svg><a aria-hidden="true" tabindex="-1" href="#-htmx-备忘清单"><span class="icon icon-link"></span></a></> htmx 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://npmjs.org/package/htmx.org"><img src="https://img.shields.io/npm/v/htmx.org.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/htmx.org"><img src="https://img.shields.io/npm/dm/htmx.org.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/bigskysoftware/htmx/network/dependents"><img src="https://badgen.net/github/dependents-repo/bigskysoftware/htmx" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/bigskysoftware/htmx"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">适合初学者的综合 <a href="https://htmx.org/">htmx</a> 备忘清单</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#快速开始">快速开始</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#点击编辑提交">点击编辑提交</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#删除行">删除行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#延迟加载">延迟加载</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hx-swap">hx-swap</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#api-参考">API 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#核心属性参考">核心属性参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#附加属性参考">附加属性参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#css-类参考">CSS 类参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件参考">事件参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#javascript-api-参考">JavaScript API 参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#请求标头参考">请求标头参考</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#响应标头参考">响应标头参考</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="快速开始"><a aria-hidden="true" tabindex="-1" href="#快速开始"><span class="icon icon-link"></span></a>快速开始</h3><div class="wrap-body">
|
||
<p><a href="https://htmx.org/">htmx</a> 是 <a href="http://intercoolerjs.org/">intercooler.js</a> 的继承者</p>
|
||
<pre class="wrap-text"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://unpkg.com/htmx.org@1.8.4<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token comment"><!-- 有一个按钮POST，通过AJAX点击 --></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">hx-post</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/clicked<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 点击我
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p><code>hx-post</code> 和 <code>hx-swap</code> 属性告诉 <code>htmx</code>：</p>
|
||
<blockquote>
|
||
<p>当用户单击此按钮时，向 <code>/clicked</code> 发出 <code>AJAX</code> 请求，并用响应替换整个按钮</p>
|
||
</blockquote>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">npm</span> <span class="token function">install</span> htmx.org
|
||
</span></code></pre>
|
||
<p>安装 <code>htmx</code> 将导入添加到您的 <code>index.js</code></p>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token string">'htmx.org'</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="点击编辑提交"><a aria-hidden="true" tabindex="-1" href="#点击编辑提交"><span class="icon icon-link"></span></a>点击编辑提交</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<p>有一个按钮，可以从 <code>/contacts/1/edit</code> 获取联系人的编辑 UI</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">hx-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>this<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>名字<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>: Joe<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>姓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>: Blow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>: joe@blow.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">hx-get</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1/edit<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> 点击编辑
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>这将返回一个可用于编辑联系人的表单</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">hx-put</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1<span class="token punctuation">"</span></span> <span class="token attr-name">hx-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>this<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>名字<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>firstName<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Joe<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>姓<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lastName<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Blow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>邮箱<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>joe@blow.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span> <span class="token attr-name">hx-get</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>取消<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>表单按照通常的 <code>REST-ful</code> 模式将 <code>PUT</code> 发回 <code>/contacts/1</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="删除行"><a aria-hidden="true" tabindex="-1" href="#删除行"><span class="icon icon-link"></span></a>删除行</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>table delete-row-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Name<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Status<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span> <span class="token attr-name">hx-confirm</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Are you sure?<span class="token punctuation">"</span></span> <span class="token attr-name">hx-target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>closest tr<span class="token punctuation">"</span></span> <span class="token attr-name">hx-swap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>outerHTML swap:1s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> ...
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>表体有一个 <code>hx-confirm</code> 属性来确认删除动作。 它还将所有按钮的目标设置为最近的 <code>tr</code>，即最近的表格行（<code>hx-target</code> 继承自 DOM 中的父级）<code>hx-swap</code> 中的交换规范表示将整个目标换出并收到响应后等待 1 秒。最后一点是为了让我们可以使用以下 CSS：</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector">tr<span class="token class">.htmx-swapping</span> td</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> opacity <span class="token number">1</span><span class="token unit">s</span> ease-out<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
<p>在交换/删除之前淡出该行。每行都有一个带有 <code>hx-delete</code> 属性的按钮，该属性包含发出 <code>DELETE</code> 请求以从服务器中删除该行的 <code>url</code>。此请求以空内容响应，表明该行应替换为空内容</p>
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Angie MacDowell<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>angie@macdowell.org<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Active<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn btn-danger<span class="token punctuation">"</span></span> <span class="token attr-name">hx-delete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/contact/1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> Delete
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="延迟加载"><a aria-hidden="true" tabindex="-1" href="#延迟加载"><span class="icon icon-link"></span></a>延迟加载</h3><div class="wrap-body">
|
||
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">hx-get</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/graph<span class="token punctuation">"</span></span> <span class="token attr-name">hx-trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>load<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>正在加载中...<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>htmx-indicator<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/img/bars.svg<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>当我们加载图表时显示进度指示器。 然后通过稳定的 CSS(<code>htmx-settling</code>) 过渡加载图形并逐渐淡入视图</p>
|
||
<pre class="language-css"><code class="language-css code-highlight"><span class="code-line"><span class="token selector"><span class="token class">.htmx-settling</span> img</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token selector">img</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token property">transition</span><span class="token punctuation">:</span> opacity <span class="token number">300</span><span class="token unit">ms</span> ease-in<span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="hx-swap"><a aria-hidden="true" tabindex="-1" href="#hx-swap"><span class="icon icon-link"></span></a>hx-swap</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="left-align"><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>innerHTML</code></td><td>默认，替换目标元素的内部 <code>html</code></td></tr><tr><td align="left"><code>outerHTML</code></td><td>用响应替换整个目标元素</td></tr><tr><td align="left"><code>beforebegin</code></td><td>在目标元素之前插入响应</td></tr><tr><td align="left"><code>afterbegin</code></td><td>目标元素的第一个子元素之前插入响应</td></tr><tr><td align="left"><code>beforeend</code></td><td>目标元素的最后一个子元素之后插入响应</td></tr><tr><td align="left"><code>afterend</code></td><td>在目标元素之后插入响应</td></tr><tr><td align="left"><code>delete</code></td><td>无论响应如何，都删除目标元素</td></tr><tr><td align="left"><code>none</code></td><td>不附加来自响应的内容 <br><em>(带外项目仍将被处理)</em></td></tr></tbody></table>
|
||
<!--rehype:className=left-align-->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="api-参考"><a aria-hidden="true" tabindex="-1" href="#api-参考"><span class="icon icon-link"></span></a>API 参考</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="核心属性参考"><a aria-hidden="true" tabindex="-1" href="#核心属性参考"><span class="icon icon-link"></span></a>核心属性参考</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="left-align"><thead><tr><th align="left">属性</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>hx-boost</code></td><td>添加或删除链接和表单的<a href="https://en.wikipedia.org/wiki/Progressive_enhancement">渐进增强</a></td></tr><tr><td align="left"><code>hx-get</code></td><td>向指定的 URL 发出 <code>GET</code></td></tr><tr><td align="left"><code>hx-post</code></td><td>向指定的 URL 发出 <code>POST</code></td></tr><tr><td align="left"><code>hx-push-url</code></td><td>将 URL 推入浏览器地址栏，创建一个新的历史条目</td></tr><tr><td align="left"><code>hx-select</code></td><td>从响应中选择要换入的内容</td></tr><tr><td align="left"><code>hx-select-oob</code></td><td>从带外(目标以外的某个地方)的响应中选择要换入的内容</td></tr><tr><td align="left"><code>hx-swap</code></td><td>控制内容的交换方式(<code>outerHTML</code>、<code>beforeEnd</code>、<code>afterend</code>，...)</td></tr><tr><td align="left"><code>hx-swap-oob</code></td><td>将响应中的内容标记为带外(应该在目标以外的地方交换)</td></tr><tr><td align="left"><code>hx-target</code></td><td>指定要交换的目标元素</td></tr><tr><td align="left"><code>hx-trigger</code></td><td>指定触发请求的事件</td></tr><tr><td align="left"><code>hx-vals</code></td><td>向参数添加值以随请求一起提交(JSON 格式)</td></tr></tbody></table>
|
||
<!--rehype:className=left-align-->
|
||
<p>使用 htmx 时最常用的属性</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="附加属性参考"><a aria-hidden="true" tabindex="-1" href="#附加属性参考"><span class="icon icon-link"></span></a>附加属性参考</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="left-align"><thead><tr><th align="left">属性</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>hx-confirm</code></td><td>在发出请求之前显示一个 <code>confim()</code> 对话框</td></tr><tr><td align="left"><code>hx-delete</code></td><td>向指定的 URL 发出 <code>DELETE</code></td></tr><tr><td align="left"><code>hx-disable</code></td><td>禁用给定节点和任何子节点的 htmx 处理</td></tr><tr><td align="left"><code>hx-disinherit</code></td><td>控制和禁用子节点的自动属性继承</td></tr><tr><td align="left"><code>hx-encoding</code></td><td>更改请求编码类型</td></tr><tr><td align="left"><code>hx-ext</code></td><td>用于此元素的扩展</td></tr><tr><td align="left"><code>hx-headers</code></td><td>添加到将与请求一起提交的标头</td></tr><tr><td align="left"><code>hx-history-elt</code></td><td>在历史导航期间要快照和恢复的元素</td></tr><tr><td align="left"><code>hx-include</code></td><td>在请求中包含额外数据</td></tr><tr><td align="left"><code>hx-indicator</code></td><td>在请求期间放置 <code>htmx-request</code> 类的元素</td></tr><tr><td align="left"><code>hx-params</code></td><td>过滤将与请求一起提交的参数</td></tr><tr><td align="left"><code>hx-patch</code></td><td>向指定的 URL 发出 PATCH</td></tr><tr><td align="left"><code>hx-preserve</code></td><td>指定在请求之间保持不变的元素</td></tr><tr><td align="left"><code>hx-prompt</code></td><td>在提交请求之前显示一个 <code>prompt()</code></td></tr><tr><td align="left"><code>hx-put</code></td><td>向指定的 URL 发出 PUT</td></tr><tr><td align="left"><code>hx-replace-url</code></td><td>替换浏览器地址栏中的 URL</td></tr><tr><td align="left"><code>hx-request</code></td><td>配置请求的各个方面</td></tr><tr><td align="left"><code>hx-sse</code></td><td>已移至分机。 <a href="https://htmx.org/attributes/hx-sse">旧版本的文档</a></td></tr><tr><td align="left"><code>hx-sync</code></td><td>控制不同元素发出的请求如何同步</td></tr><tr><td align="left"><code>hx-validate</code></td><td>强制元素在请求之前验证自己</td></tr><tr><td align="left"><del><code>hx-vars</code></del></td><td>将值动态添加到参数以随请求提交(已弃用，请使用 <code>hx-vals</code>)</td></tr><tr><td align="left"><code>hx-ws</code></td><td>已移至分机。<a href="https://htmx.org/attributes/hx-ws">旧版本的文档</a></td></tr></tbody></table>
|
||
<!--rehype:className=left-align-->
|
||
<p>列出了 htmx 中可用的所有其他属性</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="css-类参考"><a aria-hidden="true" tabindex="-1" href="#css-类参考"><span class="icon icon-link"></span></a>CSS 类参考</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">Class</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>htmx-added</code></td><td>在交换之前应用于新的内容，在它被解决之后移除</td></tr><tr><td align="left"><code>htmx-indicator</code></td><td>一个动态生成的类，当存在 <code>htmx-request</code> 类时将切换可见<br> <em>(不透明度：<code>1</code>)</em></td></tr><tr><td align="left"><code>htmx-request</code></td><td>在请求进行时应用于元素或使用 <code>hx-indicator</code> 指定的元素</td></tr><tr><td align="left"><code>htmx-settling</code></td><td>内容交换后应用于目标，内容确定后删除。<br> <em>可以通过 <code>hx-swap</code> 修改持续时间</em></td></tr><tr><td align="left"><code>htmx-swapping</code></td><td>在交换任何内容之前应用于目标，在交换之后移除。<br> <em>可以通过 <code>hx-swap</code> 修改持续时间</em></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="事件参考"><a aria-hidden="true" tabindex="-1" href="#事件参考"><span class="icon icon-link"></span></a>事件参考</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">事件</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>htmx:abort</code></td><td>将此事件发送到元素以中止请求</td></tr><tr><td align="left"><code>htmx:afterOnLoad</code></td><td>AJAX 请求完成处理成功响应后触发</td></tr><tr><td align="left"><code>htmx:afterProcessNode</code></td><td>在 htmx 初始化节点后触发</td></tr><tr><td align="left"><code>htmx:afterRequest</code></td><td>AJAX 请求完成后触发</td></tr><tr><td align="left"><code>htmx:afterSettle</code></td><td>DOM 稳定后触发</td></tr><tr><td align="left"><code>htmx:afterSwap</code></td><td>换入新内容后触发</td></tr><tr><td align="left"><code>htmx:beforeOnLoad</code></td><td>在任何响应处理发生之前触发</td></tr><tr><td align="left"><code>htmx:beforeProcessNode</code></td><td>在 htmx 初始化节点之前触发</td></tr><tr><td align="left"><code>htmx:beforeRequest</code></td><td>在发出 AJAX 请求之前触发</td></tr><tr><td align="left"><code>htmx:beforeSwap</code></td><td>在交换完成之前触发，允许您配置交换</td></tr><tr><td align="left"><code>htmx:beforeSend</code></td><td>在发送 ajax 请求之前触发</td></tr><tr><td align="left"><code>htmx:configRequest</code></td><td>在请求之前触发，允许您自定义参数、标头</td></tr><tr><td align="left"><code>htmx:confirm</code></td><td>在元素上发生触发器后触发<br> <em>允许您取消(或延迟)发出 AJAX 请求</em></td></tr><tr><td align="left"><code>htmx:historyCacheError</code></td><td>在缓存写入期间因错误而触发</td></tr><tr><td align="left"><code>htmx:historyCacheMiss</code></td><td>在历史子系统中的缓存未命中时触发</td></tr><tr><td align="left"><code>htmx:historyCacheMissError</code></td><td>远程检索不成功时触发</td></tr><tr><td align="left"><code>htmx:historyCacheMissLoad</code></td><td>在成功的远程检索时触发</td></tr><tr><td align="left"><code>htmx:historyRestore</code></td><td>当 htmx 处理历史恢复操作时触发</td></tr><tr><td align="left"><code>htmx:beforeHistorySave</code></td><td>在内容保存到历史缓存之前触发</td></tr><tr><td align="left"><code>htmx:load</code></td><td>当新内容添加到 DOM 时触发</td></tr><tr><td align="left"><code>htmx:noSSESourceError</code></td><td>当元素在其触发器中引用 SSE 事件<br> <em>但未定义父 SSE 源时触发</em></td></tr><tr><td align="left"><code>htmx:onLoadError</code></td><td>htmx中onLoad处理异常时触发</td></tr><tr><td align="left"><code>htmx:oobAfterSwap</code></td><td>在交换了一个带元素之后触发</td></tr><tr><td align="left"><code>htmx:oobBeforeSwap</code></td><td>在带外元素交换完成之前触发，允许您配置交换</td></tr><tr><td align="left"><code>htmx:oobErrorNoTarget</code></td><td>当带外元素在当前 DOM 中没有匹配的 ID 时触发</td></tr><tr><td align="left"><code>htmx:prompt</code></td><td>显示提示后触发</td></tr><tr><td align="left"><code>htmx:pushedIntoHistory</code></td><td>在 url 被推送到历史记录后触发</td></tr><tr><td align="left"><code>htmx:responseError</code></td><td>当发生 HTTP 响应错误<br> <em>(非 200 或 300 响应代码)时触发</em></td></tr><tr><td align="left"><code>htmx:sendError</code></td><td>当网络错误阻止 HTTP 请求发生时触发</td></tr><tr><td align="left"><code>htmx:sseError</code></td><td>当 SSE 源发生错误时触发</td></tr><tr><td align="left"><code>htmx:swapError</code></td><td>在交换阶段发生错误时触发</td></tr><tr><td align="left"><code>htmx:targetError</code></td><td>指定无效目标时触发</td></tr><tr><td align="left"><code>htmx:timeout</code></td><td>发生请求超时时触发</td></tr><tr><td align="left"><code>htmx:validation:validate</code></td><td>在验证元素之前触发</td></tr><tr><td align="left"><code>htmx:validation:failed</code></td><td>当元素验证失败时触发</td></tr><tr><td align="left"><code>htmx:validation:halted</code></td><td>当请求由于验证错误而停止时触发</td></tr><tr><td align="left"><code>htmx:xhr:abort</code></td><td>当 <code>ajax</code> 请求中止时触发</td></tr><tr><td align="left"><code>htmx:xhr:loadend</code></td><td><code>ajax</code> 请求结束时触发</td></tr><tr><td align="left"><code>htmx:xhr:loadstart</code></td><td><code>ajax</code> 请求开始时触发</td></tr><tr><td align="left"><code>htmx:xhr:progress</code></td><td>在支持进度事件的 <code>ajax</code> 请求期间定期触发</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="javascript-api-参考"><a aria-hidden="true" tabindex="-1" href="#javascript-api-参考"><span class="icon icon-link"></span></a>JavaScript API 参考</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">方法</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>htmx.addClass()</code></td><td>向给定元素添加一个类</td></tr><tr><td align="left"><code>htmx.ajax()</code></td><td>发出一个 htmx 风格的 ajax 请求</td></tr><tr><td align="left"><code>htmx.closest()</code></td><td>找到与选择器匹配的给定元素的最近父级</td></tr><tr><td align="left"><code>htmx.config</code></td><td>保存当前 htmx 配置对象的属性</td></tr><tr><td align="left"><code>htmx.createEventSource</code></td><td>包含为 htmx 创建 SSE EventSource 对象的函数的属性</td></tr><tr><td align="left"><code>htmx.createWebSocket</code></td><td>包含为 htmx 创建 WebSocket 对象的函数的属性</td></tr><tr><td align="left"><code>htmx.defineExtension()</code></td><td>定义一个 htmx 扩展</td></tr><tr><td align="left"><code>htmx.find()</code></td><td>查找与选择器匹配的单个元素</td></tr><tr><td align="left"><code>htmx.findAll()</code> | <code>htmx.findAll(elt, selector)</code></td><td>查找与给定选择器匹配的所有元素</td></tr><tr><td align="left"><code>htmx.logAll()</code></td><td>安装将记录所有 htmx 事件的记录器</td></tr><tr><td align="left"><code>htmx.logger</code></td><td>设置为当前记录器的属性（默认为空）</td></tr><tr><td align="left"><code>htmx.off()</code></td><td>从给定元素中删除事件侦听器</td></tr><tr><td align="left"><code>htmx.on()</code></td><td>在给定元素上创建事件侦听器，并返回它</td></tr><tr><td align="left"><code>htmx.onLoad()</code></td><td>为 htmx:load 事件添加回调处理程序</td></tr><tr><td align="left"><code>htmx.parseInterval()</code></td><td>将间隔声明解析为毫秒值</td></tr><tr><td align="left"><code>htmx.process()</code></td><td>处理给定元素及其子元素，连接任何 htmx 行为</td></tr><tr><td align="left"><code>htmx.remove()</code></td><td>删除给定的元素</td></tr><tr><td align="left"><code>htmx.removeClass()</code></td><td>从给定元素中删除一个类</td></tr><tr><td align="left"><code>htmx.removeExtension()</code></td><td>删除一个 htmx 扩展</td></tr><tr><td align="left"><code>htmx.takeClass()</code></td><td>从给定元素的其他元素中获取一个类</td></tr><tr><td align="left"><code>htmx.toggleClass()</code></td><td>从给定元素切换一个类</td></tr><tr><td align="left"><code>htmx.trigger()</code></td><td>在元素上触发事件</td></tr><tr><td align="left"><code>htmx.values()</code></td><td>返回与给定元素关联的输入值</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="请求标头参考"><a aria-hidden="true" tabindex="-1" href="#请求标头参考"><span class="icon icon-link"></span></a>请求标头参考</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">标头</th><th>说明</th></tr></thead><tbody><tr><td align="left"><code>HX-Boosted</code></td><td>表示请求是通过使用 <code>hx-boost</code> 的元素发出的</td></tr><tr><td align="left"><code>HX-Current-URL</code></td><td>浏览器的当前 <code>URL</code></td></tr><tr><td align="left"><code>HX-History-Restore-Request</code></td><td>如果请求是在本地历史缓存未命中后进行历史恢复，则为 <code>true</code></td></tr><tr><td align="left"><code>HX-Prompt</code></td><td>用户对 <code>hx</code> 提示的响应</td></tr><tr><td align="left"><code>HX-Request</code></td><td>总是 <code>true</code></td></tr><tr><td align="left"><code>HX-Target</code></td><td>目标元素的 id(如果存在)</td></tr><tr><td align="left"><code>HX-Trigger-Name</code></td><td>触发元素的名称(如果存在)</td></tr><tr><td align="left"><code>HX-Trigger</code></td><td>触发元素的 id(如果存在)</td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="响应标头参考"><a aria-hidden="true" tabindex="-1" href="#响应标头参考"><span class="icon icon-link"></span></a>响应标头参考</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">标头</th><th>说明</th></tr></thead><tbody><tr><td align="left"><a href="https://htmx.org/headers/hx-location"><code>HX-Location</code></a></td><td>允许您执行不执行整页重新加载的客户端重定向</td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-push-url"><code>HX-Push-Url</code></a></td><td>将一个新的 <code>url</code> 推入历史堆栈</td></tr><tr><td align="left"><code>HX-Redirect</code></td><td>可用于将客户端重定向到新位置</td></tr><tr><td align="left"><code>HX-Refresh</code></td><td>如果设置为 <code>true</code>，客户端将完全刷新页面</td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-replace-url"><code>HX-Replace-Url</code></a></td><td>替换地址栏中的当前 <code>URL</code></td></tr><tr><td align="left"><code>HX-Reswap</code></td><td>允许您指定如何交换响应<br> <em>有关可能的值，请参阅 <a href="https://htmx.org/attributes/hx-swap"><code>hx-swap</code></a></em></td></tr><tr><td align="left"><code>HX-Retarget</code></td><td>将内容更新的目标更新为页面上不同元素的 CSS 选择器</td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-trigger"><code>HX-Trigger</code></a></td><td>允许您触发客户端事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-trigger"><code>HX-Trigger-After-Settle</code></a></td><td>允许您触发客户端事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr><tr><td align="left"><a href="https://htmx.org/headers/hx-trigger"><code>HX-Trigger-After-Swap</code></a></td><td>允许您触发客户端事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr></tbody></table>
|
||
</div></div></div></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang.</footer></footer><script src="../data.js?v=1.5.1" defer></script><script src="../js/fuse.min.js?v=1.5.1" defer></script><script src="../js/main.js?v=1.5.1" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|