</> htmx 入門

setup

<script src="https://unpkg.com/htmx.org@1.9.12"
integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
crossorigin="anonymous"></script>

テスト利用であれば上記の CDN からの読み込みで OK だが、実際の運用時にはダウンロードして利用を推奨とのことです。

download

このファイル一式をダウンロードできます。 htmx202405.zip

ブラウザで表示する際には、file:// ではなく http:// でウェブサーバーを介してアクセスください。

1. hx-get
2. hx-swap
3. hx-trigger
4. hx-target
5. hx-post
6. hx-push-url
7. hx-swap-oob
8. title tag

hx-get

<a href="demo1.html" hx-get="demo1.html">demo1</a>

hx-swap

<a href="demo2.html" hx-get="demo2.html" hx-swap="outerHTML">demo2</a>

hx-trigger

<a href="demo3.html" hx-get="demo3.html" hx-trigger="mouseover" hx-swap="outerHTML">demo3</a>

<select name="sample" hx-get="demo3.html" hx-trigger="change" hx-swap="outerHTML">
 <option value="aaa">aaa</option>
 <option value="bbb">bbb</option>
 <option value="ccc">ccc</option>
</select>

demo3 : mouseover

demo3 : change aaa bbb ccc

hx-target

<button
  hx-get="/demo4.html"
  hx-trigger="click"
  hx-target="#result4"
  hx-swap="innerHTML">demo4</button>
<div id="result4">このコンテンツが変わります</div>

hx-post

<form action="demo5.html" method="POST"
hx-post="demo5.html"
hx-trigger="submit"
hx-target="#result5"
hx-swap="innerHTML">
<input type="submit" name="submit" value="demo5">
</form>

hx-push-url

<form action="demo5.html" method="POST"
hx-post="demo6.html"
hx-trigger="submit"
hx-target="#result6"
hx-swap="innerHTML"
hx-push-url="true">
<input type="submit" name="submit" value="demo6">
</form>

hx-swap-oob

<form action="demo8.html" method="POST"
hx-post="demo7.html"
hx-trigger="submit"
hx-target="this"
hx-swap="none">
<input type="submit" name="submit" value="demo8">
</form>

<div id="result8a" class="result">Aエリア id="result8a"</div>
<div id="result8b" class="result">Bエリア id="result8b"</div>
<div id="result8c" class="result">Cエリア id="result8c"</div>

title tag

<form action="demo8.html" method="POST"
hx-post="demo8.html"
hx-trigger="submit"
hx-target="#result7"
hx-swap="innerHTML"
hx-push-url="true">
<input type="submit" name="submit" value="demo7">
</form>

a-blog cms & htmx 入門へ