devttl/reference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

doc: update htmx.md

Browse Source
This commit is contained in:
jaywcjlove 2022-12-13 11:05:04 +08:00
parent 89fddf6b6f
commit 150a9bc943
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
docs/htmx.md
View File

@ -17,9 +17,15 @@
[htmx](https://htmx.org/) 是 [intercooler.js](http://intercoolerjs.org/) 的继承者 [htmx](https://htmx.org/) 是 [intercooler.js](http://intercoolerjs.org/) 的继承者
```html ```html
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <script
src="https://unpkg.com/htmx.org@1.8.4"
>
</script>
<!-- 有一个按钮POST，通过AJAX点击 --> <!-- 有一个按钮POST，通过AJAX点击 -->
<button hx-post="/clicked" hx-swap="outerHTML"> <button
hx-post="/clicked"
hx-swap="outerHTML"
>
点击我 点击我
</button> </button>
``` ```
@ -79,7 +85,7 @@ import 'htmx.org';
表单按照通常的 `REST-ful` 模式将 `PUT` 发回 `/contacts/1` 表单按照通常的 `REST-ful` 模式将 `PUT` 发回 `/contacts/1`
### 删除行 ### 删除行
<!--rehype:wrap-class=col-span-2--> <!--rehype:wrap-class=col-span-2 row-span-2-->
```html ```html
<table class="table delete-row-example"> <table class="table delete-row-example">
@ -141,6 +147,20 @@ img {
} }
``` ```
### hx-swap
:-- | --
:-- | --
`innerHTML` | 默认，替换目标元素的内部 `html`
`outerHTML` | 用响应替换整个目标元素
`beforebegin` | 在目标元素之前插入响应
`afterbegin` | 目标元素的第一个子元素之前插入响应
`beforeend` | 目标元素的最后一个子元素之后插入响应
`afterend` | 在目标元素之后插入响应
`delete` | 无论响应如何，都删除目标元素
`none` | 不附加来自响应的内容 <br />_(带外项目仍将被处理)_
<!--rehype:className=left-align-->
API 参考 API 参考
--- ---
<!--rehype:body-class=cols-2--> <!--rehype:body-class=cols-2-->