详细信息
showMoreItems 是一个 jQuery 插件，通过在可自定义的“显示更多”按钮中折叠部分内容来模拟加载更多功能。非常适合长列表视图，使用户能够在单击/点击时显示更多内容。
主要特点：
允许您指定要在 init 上显示的项目。
允许您指定要显示和隐藏的项目数。
自定义响应行为。
如何使用它：
1. 在您的内容列表中插入尽可能多的项目。
<div class="list example">
<div class="item">
<div class="box">
<div class="pic"><img src="https://picsum.photos/400/300?random=1"></div>
<div class="name">Item1</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="pic"><img src="https://picsum.photos/400/300?random=2"></div>
<div class="name">Item2</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="pic"><img src="https://picsum.photos/400/300?random=3"></div>
<div class="name">Item3</div>
</div>
</div>
<div class="item">
<div class="box">
<div class="pic"><img src="https://picsum.photos/400/300?random=4"></div>
<div class="name">Item4</div>
</div>
</div>
...
</div>2. 加载 jQuery 后加载缩小版的 showMoreItems 插件。
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/showMoreItems.min.js"></script>3. 加载样式表showMoreItems-theme.css以设置内容列表的样式或使用您自己的列表样式。
<link rel="stylesheet" href="showMoreItems-theme.min.css" />4.在内容列表中初始化插件并完成。
$('.example').showMoreItems({
// options here
});5. 确定要在 init 上显示的项目数。默认值：1。
$('.example').showMoreItems({
nowNum: 3
});6. 确定要在 init 上显示的项目。默认值：项目 1。
$('.example').showMoreItems({
startNum: 2
});7. 确定一次加载多少项目。默认值：1。
$('.example').showMoreItems({
afterNum: 2
});8. 确定是否启用显示更多按钮，在所有项目加载完成后将内容列表设置为原始状态。默认值：假。
$('.example').showMoreItems({
original: true,
backMoreText: 'Reset'
});9. 根据屏幕尺寸有条件地将设置应用到内容列表。
$('.example').showMoreItems({
responsive: [
{
breakpoint: 1280,
settings: {
startNum: 2,
afterNum: 2
}
},
{
breakpoint: 600,
settings: {
startNum: 1,
afterNum: 1
}
}
]
});10. 自定义加载更多和无结果文本。
$('.example').showMoreItems({
moreText:'Show more',
noMoreText:'No more',
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。