Hi 您目前尚未登陆
请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

上官雨伦

原 New.Discuz! Support Team 开发团队负责人,致力于网页前端设计。现职河北省张家口市职业技术学院教师。

jQuery 实现 Discuz! 伪翻页(不刷新页面)

复制链接

上官雨伦Writer

Admin

66主题
68帖子
68积分
上官雨伦 发表于 2017-12-8 17:03 | 显示全部楼层
    首先要说的是,这是一个伪翻页。原理是调用例如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。

jPages.js (21.01 KB, 下载次数: 29)
原创内容版权归原作者所有·转载请注明
回复

947 0 使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册