堆叠器插件创建可堆叠和可切换卡

  • 源码大小:7.45KB
  • 所需积分:1积分
  • 源码编号:19JP-3679
  • 浏览次数:478次
  • 最后更新:2023年07月10日
  • 所属栏目:其他
本站默认解压密码:19jp.com 或 19jp_com

简介

Stacker是一个jQuery插件,用于动态生成堆叠的卡片,您可以通过编程在它们之间切换。

如何使用它:

1.首先,在最新的jQuery库之后加载Stacker插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/stacker.js"></script>

2.将内容插入卡片中。演示页面使用淘汰库来处理在卡之间切换时的数据绑定。

<div id="stack">
  ... Any Content Here ...
</div>

3.将插件连接到卡容器上。

$(function(){
  $('#stack').stacker();
});

4.确定一次可以看到的卡片的最大数量。默认值:10。

$('#stack').stacker({ 
  maxVisibleItems: 3 
});

5.把你自己的风格运用到卡片上。

.stack { 
  /* wrapper */
}

.stack-item {
  /* item */ 
}

.stack-index {
  /* index */
}

6.使用上一个下一个方法:

$('#stack').stacker('previous');
$('#stack').stacker('next');

7.添加和移除卡片。

$('#stack').stacker('add');
$('#stack').stacker('remove');

8.每次更改项目时都会触发一个事件。

var stacker = $('#stack').stacker();
stacker.on("activeItemChanged", function (e) {
  // e.count
  // e.activeItemIndex
  // e.index
  // e.container
});

预览截图