卡片小部件插件提供折叠、展开和删除卡片的功能。
此插件可以作为 jQuery 插件或使用数据 API 激活。
此插件提供两个data-api
属性。任何使用以下任一属性的元素都应放置在.card-tools
div 中,该 div 通常位于卡片头部。有关卡片 HTML 结构的更多信息,请访问卡片组件文档
data-card-widget="collapse"
此属性,当附加到按钮时,允许在点击时折叠/展开框。
<div class="card">
<div class="card-header">
<h3 class="card-title">Collapsible Card Example</h3>
<div class="card-tools">
<!-- Collapse Button -->
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
data-card-widget="remove"
此属性,当附加到按钮时,允许在点击时删除框。
<div class="card">
<div class="card-header">
<h3 class="card-title">Removable Card Example</h3>
<div class="card-tools">
<!-- Remove Button -->
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
data-card-widget="maximize"
此属性,当附加到按钮时,允许在点击时最大化/最小化框。
<div class="card">
<div class="card-header">
<h3 class="card-title">Maximizable Card Example</h3>
<div class="card-tools">
<!-- Maximize Button -->
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
要使用 jQuery 激活任何按钮,您必须提供 removeTrigger 和 collapseTrigger 选项。否则,插件将假定默认data-card-widget
选择器。
$('#my-card').CardWidget(options)
名称 | 类型 | 默认 | 描述 |
---|---|---|---|
animationSpeed | 数字 | 300 | 滑动动画(向下/向上)的速度,单位为毫秒。 |
collapseTrigger | 字符串 | [data-card-widget="collapse"] |
负责折叠框的元素的 jQuery 选择器。 |
removeTrigger | 字符串 | [data-card-widget="remove"] |
负责删除框的元素的 jQuery 选择器。 |
maximizeTrigger | 字符串 | [data-card-widget="maximize"] |
负责最大化框的元素的 jQuery 选择器。 |
提示!
您可以通过data-属性使用任何选项,如下所示。
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
事件类型 | 描述 |
---|---|
expanded.lte.cardwidget | 卡片展开后触发。 |
collapsed.lte.cardwidget | 卡片折叠后触发。 |
maximized.lte.cardwidget | 卡片最大化后触发。 |
minimized.lte.cardwidget | 卡片最小化后触发。 |
removed.lte.cardwidget | 卡片删除后触发。 |
示例:$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)
方法 | 描述 |
---|---|
collapse | 折叠卡片 |
expand | 展开卡片 |
remove | 删除卡片 |
toggle | 在展开和折叠之间切换卡片的状态 |
maximize | 最大化卡片 |
minimize | 最小化卡片 |
toggleMaximize | 在最大化和最小化之间切换卡片的状 |
示例:$('#my-card-widget').CardWidget('toggle')
或$('#my-card').CardWidget('toggle')