jQuery 实现 Discuz! 伪翻页(不刷新页面)
2017-12-08 17:03:18 发布
|
|
首先要说的是,这是一个伪翻页。原理是调用例如100个数据后,将其后面的内容做隐藏处理,在不刷新页面的情况下进行内容的翻页。并且附带了渐入渐出效果。
引入jQuery
- <script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script>
- <script src="template/yulun_hei/js/jPages.js" type="text/javascript"></script>
- <script type="text/javascript">var jQuery = jQuery.noConflict();</script>
复制代码
示例源码
- <ul id="itemContainer">
- <li>...</li>
- <li>...</li>
- <li>...</li>
- <li>...</li>
- <li>...</li>
- </ul>
复制代码
翻页源码- <div class="holder"></div>
复制代码
启动插件
- jQuery(function() {
- jQuery("div.holder").jPages({
- containerID : "itemContainer",//父级定义的ID名
- perPage:20, //该数字控制每页显示数量,想要显示几个就修改成数字几
- previous: "上一页",
- next: "下一页"
- });
- jQuery("div.holder").click(function(){
- jQuery('body,html').animate({scrollTop:370},500);
- return false;
- });
- });
复制代码
这里需要注意的是:perPage:20,是每页显示的个数,也就是说<li>标签的总数,必须大于这里的20。
|
|
|
|
|
|
|
附件信息
-
-
jPages.js
21.01 KB, 下载次数: 71
当前话题还没有评论,来做第一个评论的人吧 ♪(^∇^*)