jQuery 实现 Discuz! 伪翻页（不刷新页面）

上官雨伦

    首先要说的是，这是一个伪翻页。原理是调用例如100个数据后，将其后面的内容做隐藏处理，在不刷新页面的情况下进行内容的翻页。并且附带了渐入渐出效果。


引入jQuery

1. <script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script>
   
2. <script src="template/yulun_hei/js/jPages.js" type="text/javascript"></script>
   
3. <script type="text/javascript">var jQuery = jQuery.noConflict();</script>

复制代码

示例源码

1. <ul id="itemContainer">
   
2.     <li>...</li>
   
3.     <li>...</li>
   
4.     <li>...</li>
   
5.     <li>...</li>
   
6.     <li>...</li>
   
7. </ul>

复制代码

翻页源码

1. <div class="holder"></div>

复制代码

启动插件

1. jQuery(function() {
   
2.         jQuery("div.holder").jPages({
   
3.                 containerID  : "itemContainer",//父级定义的ID名
   
4.                 perPage:20,  //该数字控制每页显示数量，想要显示几个就修改成数字几
   
5.                 previous: "上一页",
   
6.                 next: "下一页"        
   
7.         });
   
8.         jQuery("div.holder").click(function(){
   
9.                 jQuery('body,html').animate({scrollTop:370},500);
   
10.                 return false;
    
11.         });
    
12. });

复制代码

    这里需要注意的是：perPage:20，是每页显示的个数，也就是说<li>标签的总数，必须大于这里的20。