卡片刷新插件
优质
小牛编辑
130浏览
2023-12-01
卡片刷新插件提供将 Ajax 内容加载到卡片中的功能。
用法
该插件可以作为 jQuery 插件或使用数据 API 激活。
数据 API
通过向卡片添加带有 data-card-widget="card-refresh" 的按钮来激活插件，并提供所需的 data-source="/内容 URL" 选项。这样，插件将自动创建一个对设置 URL 的 GET 请求，并将返回的内容展示在卡片的 .card-body 部分。如果需要在渲染之前处理返回的内容，则应使用 jQuery API，该 API 提供了用于处理响应内容的钩子。
jQuery
jQuery API 提供了更具可自定义的选项，允许开发人员在展示前预先处理请求，在请求之后处理返回内容。
("#my-card").refreshBox(options)
选项
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| source | String | ’’ | 源URL。 |
| sourceSelector | String | ’’ | 要获取的选择器仅返回选择器内容。 |
| params | Object | {} | GET 请求参数（示例：{search_term: ‘layout’}， 展示为 URL/?search_term=layout） |
| trigger | String | [data-card-widget="card-refresh"] | 刷新按钮的 CSS 选择器 |
| content | String | .card-body | 展示内容的目标 CSS 选择器。该选择器应该在卡片中。 |
| loadInContent | Boolean | TRUE | 是否自动展示。 |
| loadOnInit | Boolean | TRUE | 是否在页面加载时的初始化插件。 |
| responseType | String | ’’ | 响应类型（示例：’json’ 或 ‘html’） |
| overlayTemplate | String | TRUE | Ajax spinner 的 HTML 模板 |
| onLoadStart | Function | 匿名函数 | 在 ajax 请求之前调用 |
| onLoadDone | Function | 匿名函数 | 发出 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')