mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-08-22 22:16:14 +08:00
docs: update docs/htmx.md (#987) 65e99b1650
This commit is contained in:
jaywcjlove
354
CONTRIBUTORS.svg
354
CONTRIBUTORS.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 MiB After Width: | Height: | Size: 13 MiB |
@@ -46,11 +46,13 @@
|
||||
<!--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">
|
||||
</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><a aria-hidden="true" class="leve2 tocs-link" data-num="2" 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 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@2.0.6<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">integrity</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">crossorigin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anonymous<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>
|
||||
@@ -344,15 +346,7 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
<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-sync</code></td><td>控制不同元素发出的请求如何同步</td></tr><tr><td align="left"><code>hx-validate</code></td><td>强制元素在请求之前验证自己</td></tr><tr><td align="left"><code>hx-disabled-elt</code></td><td>禁用触发元素和指定的元素，在发出请求期间</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">
|
||||
@@ -754,8 +748,12 @@
|
||||
|
||||
|
||||
|
||||
<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 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script async src="https://www.googletagmanager.com/gtag/js?id=G-9MWEWXSDQK"></script><script>window.dataLayer = window.dataLayer || [];
|
||||
<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>在 settle 阶段之后触发事件<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>在 swap 阶段之后触发事件<br> <em>请<a href="https://htmx.org/headers/hx-trigger">参阅文档</a>以获取更多信息</em></td></tr></tbody></table>
|
||||
</div></div></div></div></div><div class="wrap h2body-not-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">
|
||||
<ul>
|
||||
<li><a href="https://htmx.org/docs/">HTMX 官方文档</a> <em>(htmx.org)</em></li>
|
||||
</ul>
|
||||
</div></div><div class="h2wrap-body"></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 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script async src="https://www.googletagmanager.com/gtag/js?id=G-9MWEWXSDQK"></script><script>window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-9MWEWXSDQK');</script><script src="../data.js?v=1.9.0" defer></script><script src="../js/fuse.min.js?v=1.9.0" defer></script><script src="../js/main.js?v=1.9.0" 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">
|
||||
|
||||
@@ -1797,7 +1797,7 @@
|
||||
<li><a href="https://appstore.lazycat.cloud/#/shop/detail/io.zeroc.app.quickref">懒猫微服应用商店</a></li>
|
||||
</ul>
|
||||
|
||||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>. Updated on 2025/07/22 18:40:17</footer></footer><script async src="https://www.googletagmanager.com/gtag/js?id=G-9MWEWXSDQK"></script><script>window.dataLayer = window.dataLayer || [];
|
||||
</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>. Updated on 2025/07/26 16:42:11</footer></footer><script async src="https://www.googletagmanager.com/gtag/js?id=G-9MWEWXSDQK"></script><script>window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'G-9MWEWXSDQK');</script><script src="data.js?v=1.9.0" defer></script><script src="js/fuse.min.js?v=1.9.0" defer></script><script src="js/main.js?v=1.9.0" 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">
|
||||
|
||||
Reference in New Issue
Block a user