卡片刷新外掛
卡片刷新外掛提供將 AJAX 內容載入卡片的功能。
使用方法
此外掛可以作為 jQuery 外掛啟用，或使用 data API 啟用。
Data API
透過在卡片中加入帶有 data-card-widget="card-refresh" 的按鈕，並提供必要的 data-source="/URL-TO-CONTENT" 選項來啟用此外掛。這樣做，此外掛會自動向提供的 URL 發出 GET 請求，並將返回的回應呈現到卡片的 .card-body 區塊。如果需要在呈現之前處理返回的回應，則應使用 jQuery API，其提供處理回應的掛鉤。
jQuery
jQuery API 提供更多可自訂的選項，允許開發人員在呈現之前預先處理請求，並在呈現之後進行後處理。
$('#my-card [data-card-widget="card-refresh"]').CardRefresh(options)
選項
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| source | 字串 | ’’ | 來源的 URL。 |
| sourceSelector | 字串 | ’’ | 一個選擇器，用於僅取得選擇器的內容。 |
| params | 物件 | {} | GET 查詢參數 (範例：{search_term: 'layout'}，會呈現為 URL/?search_term=layout) |
| trigger | 字串 | [data-card-widget="card-refresh"] |
刷新按鈕的 CSS 選擇器 |
| content | 字串 | .card-body |
要呈現內容的目標的 CSS 選擇器。此選擇器應存在於卡片內。 |
| loadInContent | 布林值 | TRUE | 是否自動呈現內容。 |
| loadOnInit | 布林值 | TRUE | 在頁面載入時初始化外掛。 |
| loadErrorTemplate | 布林值 | TRUE | 當發生 AJAX 錯誤時，是否將 errorTemplate 附加到卡片。 |
| responseType | 字串 | ’’ | 回應類型（範例：'json' 或 'html'） |
| overlayTemplate | 字串 | TRUE | AJAX 載入指示器的 HTML 範本 |
| errorTemplate | 字串 | '<span class="text-danger"></span>' |
AJAX 錯誤訊息的 HTML 範本 |
| onLoadStart | 函式 | 匿名函式 | 在發出 AJAX 請求之前呼叫 |
| onLoadDone | 函式 | 匿名函式 | 在發出 AJAX 請求之後呼叫。一個 response 參數會傳遞到該函式，其中包含伺服器回應。 |
| onLoadFail | 函式 | 匿名函式 | 如果 AJAX 請求失敗則呼叫。jqXHR、textStatus 和 errorThrown 參數會傳遞到該函式。 |
事件
| 事件類型 | 描述 |
|---|---|
| loaded.lte.cardrefresh | 在卡片刷新後觸發。 |
| overlay.added.lte.cardrefresh | 在覆蓋層新增到卡片後觸發。 |
| overlay.removed.lte.cardrefresh | 在覆蓋層從卡片移除後觸發。 |
範例： $('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)
方法
| 方法 | 描述 |
|---|---|
| load | 重新載入內容，並執行 onLoadStart 和 onLoadDone 掛鉤 |
範例： $('#my-card [data-card-widget="card-refresh"]').CardRefresh('load')