Card Refresh プラグインはカードに Ajax コンテンツをロードする機能を提供します。
このプラグインは jQuery プラグインとして、またはデータ API を使用してアクティベートできます。
data-card-widget="card-refresh" を使用してボタンをカードに追加し、必要な data-source="/URL-TO-CONTENT" オプションを提供することでプラグインをアクティベートします。これにより、プラグインは自動的に指定された URL に GET リクエストを作成し、返されたレスポンスをカードの .card-body セクションにレンダリングします。レンダリング前に返されたレスポンスを処理する必要がある場合は、jQuery API を使用する必要があります。jQuery API はレスポンスを処理するためのフックを提供します。
jQuery API は、よりカスタマイズ可能なオプションを提供し、レンダリング前にリクエストを前処理し、レンダリング後に後処理ができます。
("#my-card").refreshBox(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 | ページロード時にプラグインを初期化します。 |
| responseType | 文字列 | ’’ | レスポンスの種類（例：'json' または 'html'） |
| overlayTemplate | 文字列 | TRUE | ajax スピナーの HTML テンプレート |
| onLoadStart | 関数 | 匿名関数 | ajax リクエストが行われる前に呼び出されます |
| onLoadDone | 関数 | 匿名関数 | ajax リクエストが行われた後に呼び出されます。 response パラメータがサーバーのレスポンスを保持する関数に渡されます。 |
| イベントの種類 | 説明 |
|---|---|
| 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-widget').Widget('toggle')