网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一个轻量级jquery内容加载插件体验好,通过单击“加载更多”按钮,可以向当前内容块添加更多内容。可以大型内容块(如帖子列表、产品卡、搜索结果等)作为分页显示,读者能够根据需要加载更多内容。
1. 在页面中加载插件文件。
<script src="jquery.min.js"></script>
<script src="btnloadmore.js"></script>
2.将内容包装在DIV容器中,如下所示:
<div class="contents">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
...
</div>
3. 插件初始化,确定页面加载时要显示多少项(默认值:6)。
$('.contents').btnLoadmore({
showItem : 3
});
4. 单击LoadMore按钮时要加载的项目数。默认值:3。
$('.contents').btnLoadmore({
whenClickBtn: 2
});
5. 自定义“加载更多”按钮的标签。默认值:“Loadmore…”。
$('.contents').btnLoadmore({
textBtn: 'Load More'
});
6. 对“加载更多”按钮应用其他CSS类。默认值:“”。
$('.contents').btnLoadmore({
classBtn : 'btn btn-primary'
});
7.自定义动画速度。默认值:2000ms。
$('.contents').btnLoadmore({
delayToScroll: 5000
});
转载请注明来源:jquery点击加载更多内容插件
本文永久链接地址:https://www.moyouyouw.cn/code/797.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论