\</> htmx 备忘清单 & htmx cheatsheet & Quick Reference

亚洲成A人片在线观看网站_成年网站免费视频A在线双飞_日日日日做夜夜夜夜无码_久久夜色撩人精品国产小说

快速開始

是的繼承者

<script
  src="//unpkg.com/htmx.org@1.8.4"
>
</script>
<!-- 有(you)一個按(an)鈕POST，通過AJAX點擊 -->
<button
  hx-post="/clicked"
  hx-swap="outerHTML"
>
  點擊我
</button>

hx-post 和 hx-swap 屬性告訴 htmx：

當用戶單擊此按鈕時，向 /clicked 發出 AJAX 請求(qiu)，并用響應替(ti)換整(zheng)個(ge)按鈕(niu)

$ npm install htmx.org

安裝 htmx 將導入添加到您的 index.js

import 'htmx.org';

點擊編輯提交

有一個按鈕，可以從 /contacts/1/edit 獲取聯系人的(de)編輯 UI

<div hx-target="this" hx-swap="outerHTML">
  <div><label>名字</label>: Joe</div>
  <div><label>姓</label>: Blow</div>
  <div><label>郵箱</label>: joe@blow.com</div>
  <button hx-get="/contact/1/edit" class="btn btn-primary">
    點擊編輯
  </button>
</div>

這(zhe)將返(fan)回(hui)一個可(ke)用于編輯聯系人的表單

<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div>
    <label>名字</label>
    <input type="text" name="firstName" value="Joe">
  </div>
  <div class="form-group">
    <label>姓</label>
    <input type="text" name="lastName" value="Blow">
  </div>
  <div class="form-group">
    <label>郵箱</label>
    <input type="email" name="email" value="joe@blow.com">
  </div>
  <button class="btn">提交</button>
  <button class="btn" hx-get="/contact/1">取消</button>
</form>

表單按照通常的 REST-ful 模式將 PUT 發回 /contacts/1

刪除行

<table class="table delete-row-example">
  <thead>
    <tr>
      <th>Name</th> <th>Email</th> <th>Status</th> <th></th>
    </tr>
  </thead>
  <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">
    ...
  </tbody>
</table>

表體有一個 hx-confirm 屬性來確認刪除動作。它還將所有按鈕的目標設置為最近的 tr，即最近的表格行（hx-target 繼承自 DOM 中的父級）hx-swap 中的交(jiao)換(huan)規范表示(shi)將整個目標換(huan)出并收到(dao)響應后等待 1 秒。最后一(yi)點(dian)是為(wei)了讓我們(men)可以使(shi)用(yong)以下 CSS：

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

在交換/刪除之前淡出該行。每行都有一個帶有 hx-delete 屬性的按鈕，該屬性包含發出 DELETE 請求以從服務器中刪除該行的 url。此請求以(yi)空內(nei)容響應，表明該行應替換為空內(nei)容

<tr>
  <td>Angie MacDowell</td>
  <td>angie@macdowell.org</td>
  <td>Active</td>
  <td>
    <button class="btn btn-danger" hx-delete="/contact/1">
      Delete
    </button>
  </td>
</tr>

延遲加載

<div hx-get="/graph" hx-trigger="load">
  <img
    alt="正在加載中..."
    class="htmx-indicator"
    width="150"
    src="/img/bars.svg"/>
</div>

當我們加載圖表時顯示進度指示器。然后通過穩定的 CSS(htmx-settling) 過渡加(jia)載圖(tu)形并逐(zhu)漸淡入(ru)視圖(tu)

.htmx-settling img {
  opacity: 0;
}
img {
  transition: opacity 300ms ease-in;
}

hx-swap

:--	--
`innerHTML`	默認，替換目標元素的內部 `html`
`outerHTML`	用響應替換整個目標元素
`beforebegin`	在目標元素之前插入響應
`afterbegin`	目標元素的第一個子元素之前插入響應
`beforeend`	目標元素的最后一個子元素之后插入響應
`afterend`	在目標元素之后插入響應
`delete`	無論響應如何，都刪除目標元素
`none`	不附加來自響應的內容 (帶外項目仍將被處理)

核心屬性參考

屬性	說明
`hx-boost`	添加或刪除鏈接和表單的
`hx-get`	向指定的 URL 發出 `GET`
`hx-post`	向指定的 URL 發出 `POST`
`hx-push-url`	將 URL 推入瀏覽器地址欄，創建一個新的歷史條目
`hx-select`	從響應中選擇要換入的內容
`hx-select-oob`	從帶外(目標以外的某個地方)的響應中選擇要換入的內容
`hx-swap`	控制內容的交換方式(`outerHTML`、`beforeEnd`、`afterend`，...)
`hx-swap-oob`	將響應中的內容標記為帶外(應該在目標以外的地方交換)
`hx-target`	指定要交換的目標元素
`hx-trigger`	指定觸發請求的事件
`hx-vals`	向參數添加值以隨請求一起提交(JSON 格式)

使(shi)用(yong) htmx 時(shi)最常用(yong)的屬性

附加屬性參考

屬性	說明
`hx-confirm`	在發出請求之前顯示一個 `confim()` 對話框
`hx-delete`	向指定的 URL 發出 `DELETE`
`hx-disable`	禁用給定節點和任何子節點的 htmx 處理
`hx-disinherit`	控制和禁用子節點的自動屬性繼承
`hx-encoding`	更改請求編碼類型
`hx-ext`	用于此元素的擴展
`hx-headers`	添加到將與請求一起提交的標頭
`hx-history-elt`	在歷史導航期間要快照和恢復的元素
`hx-include`	在請求中包含額外數據
`hx-indicator`	在請求期間放置 `htmx-request` 類的元素
`hx-params`	過濾將與請求一起提交的參數
`hx-patch`	向指定的 URL 發出 PATCH
`hx-preserve`	指定在請求之間保持不變的元素
`hx-prompt`	在提交請求之前顯示一個 `prompt()`
`hx-put`	向指定的 URL 發出 PUT
`hx-replace-url`	替換瀏覽器地址欄中的 URL
`hx-request`	配置請求的各個方面
`hx-sse`	已移至分機。
`hx-sync`	控制不同元素發出的請求如何同步
`hx-validate`	強制元素在請求之前驗證自己
~~`hx-vars`~~	將值動態添加到參數以隨請求提交(已棄用，請使用 `hx-vals`)
`hx-ws`	已移至分機。

列出了 htmx 中(zhong)可用的(de)所有其他屬性

CSS 類參考

Class	說明
`htmx-added`	在交換之前應用于新的內容，在它被解決之后移除
`htmx-indicator`	一個動態生成的類，當存在 `htmx-request` 類時將切換可見 (不透明度：`1`)
`htmx-request`	在請求進行時應用于元素或使用 `hx-indicator` 指定的元素
`htmx-settling`	內容交換后應用于目標，內容確定后刪除。可以通過 `hx-swap` 修改持續時間
`htmx-swapping`	在交換任何內容之前應用于目標，在交換之后移除。可以通過 `hx-swap` 修改持續時間

事件參考

事件	說明
`htmx:abort`	將此事件發送到元素以中止請求
`htmx:afterOnLoad`	AJAX 請求完成處理成功響應后觸發
`htmx:afterProcessNode`	在 htmx 初始化節點后觸發
`htmx:afterRequest`	AJAX 請求完成后觸發
`htmx:afterSettle`	DOM 穩定后觸發
`htmx:afterSwap`	換入新內容后觸發
`htmx:beforeOnLoad`	在任何響應處理發生之前觸發
`htmx:beforeProcessNode`	在 htmx 初始化節點之前觸發
`htmx:beforeRequest`	在發出 AJAX 請求之前觸發
`htmx:beforeSwap`	在交換完成之前觸發，允許您配置交換
`htmx:beforeSend`	在發送 ajax 請求之前觸發
`htmx:configRequest`	在請求之前觸發，允許您自定義參數、標頭
`htmx:confirm`	在元素上發生觸發器后觸發允許您取消(或延遲)發出 AJAX 請求
`htmx:historyCacheError`	在緩存寫入期間因錯誤而觸發
`htmx:historyCacheMiss`	在歷史子系統中的緩存未命中時觸發
`htmx:historyCacheMissError`	遠程檢索不成功時觸發
`htmx:historyCacheMissLoad`	在成功的遠程檢索時觸發
`htmx:historyRestore`	當 htmx 處理歷史恢復操作時觸發
`htmx:beforeHistorySave`	在內容保存到歷史緩存之前觸發
`htmx:load`	當新內容添加到 DOM 時觸發
`htmx:noSSESourceError`	當元素在其觸發器中引用 SSE 事件但未定義父 SSE 源時觸發
`htmx:onLoadError`	htmx中onLoad處理異常時觸發
`htmx:oobAfterSwap`	在交換了一個帶元素之后觸發
`htmx:oobBeforeSwap`	在帶外元素交換完成之前觸發，允許您配置交換
`htmx:oobErrorNoTarget`	當帶外元素在當前 DOM 中沒有匹配的 ID 時觸發
`htmx:prompt`	顯示提示后觸發
`htmx:pushedIntoHistory`	在 url 被推送到歷史記錄后觸發
`htmx:responseError`	當發生 HTTP 響應錯誤 (非 200 或 300 響應代碼)時觸發
`htmx:sendError`	當網絡錯誤阻止 HTTP 請求發生時觸發
`htmx:sseError`	當 SSE 源發生錯誤時觸發
`htmx:swapError`	在交換階段發生錯誤時觸發
`htmx:targetError`	指定無效目標時觸發
`htmx:timeout`	發生請求超時時觸發
`htmx:validation:validate`	在驗證元素之前觸發
`htmx:validation:failed`	當元素驗證失敗時觸發
`htmx:validation:halted`	當請求由于驗證錯誤而停止時觸發
`htmx:xhr:abort`	當 `ajax` 請求中止時觸發
`htmx:xhr:loadend`	`ajax` 請求結束時觸發
`htmx:xhr:loadstart`	`ajax` 請求開始時觸發
`htmx:xhr:progress`	在支持進度事件的 `ajax` 請求期間定期觸發

JavaScript API 參考

方法	說明
`htmx.addClass()`	向給定元素添加一個類
`htmx.ajax()`	發出一個 htmx 風格的 ajax 請求
`htmx.closest()`	找到與選擇器匹配的給定元素的最近父級
`htmx.config`	保存當前 htmx 配置對象的屬性
`htmx.createEventSource`	包含為 htmx 創建 SSE EventSource 對象的函數的屬性
`htmx.createWebSocket`	包含為 htmx 創建 WebSocket 對象的函數的屬性
`htmx.defineExtension()`	定義一個 htmx 擴展
`htmx.find()`	查找與選擇器匹配的單個元素
`htmx.findAll()` \| `htmx.findAll(elt, selector)`	查找與給定選擇器匹配的所有元素
`htmx.logAll()`	安裝將記錄所有 htmx 事件的記錄器
`htmx.logger`	設置為當前記錄器的屬性（默認為空）
`htmx.off()`	從給定元素中刪除事件偵聽器
`htmx.on()`	在給定元素上創建事件偵聽器，并返回它
`htmx.onLoad()`	為 htmx:load 事件添加回調處理程序
`htmx.parseInterval()`	將間隔聲明解析為毫秒值
`htmx.process()`	處理給定元素及其子元素，連接任何 htmx 行為
`htmx.remove()`	刪除給定的元素
`htmx.removeClass()`	從給定元素中刪除一個類
`htmx.removeExtension()`	刪除一個 htmx 擴展
`htmx.takeClass()`	從給定元素的其他元素中獲取一個類
`htmx.toggleClass()`	從給定元素切換一個類
`htmx.trigger()`	在元素上觸發事件
`htmx.values()`	返回與給定元素關聯的輸入值

請求標頭參考

標頭	說明
`HX-Boosted`	表示請求是通過使用 `hx-boost` 的元素發出的
`HX-Current-URL`	瀏覽器的當前 `URL`
`HX-History-Restore-Request`	如果請求是在本地歷史緩存未命中后進行歷史恢復，則為 `true`
`HX-Prompt`	用戶對 `hx` 提示的響應
`HX-Request`	總是 `true`
`HX-Target`	目標元素的 id(如果存在)
`HX-Trigger-Name`	觸發元素的名稱(如果存在)
`HX-Trigger`	觸發元素的 id(如果存在)

響應標頭參考

標頭	說明
	允許您執行不執行整頁重新加載的客戶端重定向
	將一個新的 `url` 推入歷史堆棧
`HX-Redirect`	可用于將客戶端重定向到新位置
`HX-Refresh`	如果設置為 `true`，客戶端將完全刷新頁面
	替換地址欄中的當前 `URL`
`HX-Reswap`	允許您指定如何交換響應有關可能的值，請參閱
`HX-Retarget`	將內容更新的目標更新為頁面上不同元素的 CSS 選擇器
	允許您觸發客戶端事件請以獲取更多信息
	允許您觸發客戶端事件請以獲取更多信息
	允許您觸發客戶端事件請以獲取更多信息