doc: update htmx.md 150a9bc943

docs/htmx.html

@@ -38,12 +38,18 @@
 <!--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="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></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">&#x3C;</span>script</span> <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 class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
+<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">&#x3C;</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">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
 </span><span class="code-line"><span class="token comment">&#x3C;!-- 有一个按钮POST，通过AJAX点击 --></span>
-</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <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 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">&#x3C;</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">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
 </span></code></pre>
@@ -88,8 +94,8 @@
 </span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</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"><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">
+</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-->
+<!--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">&#x3C;</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">&#x3C;</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">&#x3C;</span>tr</span><span class="token punctuation">></span></span>
@@ -136,6 +142,50 @@
 </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">

index.html

@@ -944,7 +944,7 @@
 <!--rehype:class=home-card home-links-->
 <p>如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 <a href="https://github.com/jaywcjlove/reference/tree/gh-pages">gh-pages</a> 分支代码到你的静态服务就可以了，还可以使用 <a href="https://hub.docker.com/r/wcjiang/reference">docker</a> 快捷部署 web 版。</p>
 
-</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/12/12 15:24:55</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" 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">
+</div></div><div class="h2wrap-body"></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang. Updated on 2022/12/13 11:06:35</footer></footer><script src="data.js" defer></script><script src="js/fuse.min.js" defer></script><script src="js/main.js" 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>