可定制的加载更多按钮 - jQuery showMoreItems

可定制的加载更多按钮 - jQuery showMoreItems

版本:

浏览量:89

最后更新:2021-09-11

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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',
});

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。