Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

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

[复制链接]
tuyuanma 发表于 2020-4-16 14:33:44 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


首先要说的是,这是一个伪翻页。原理是调用例如100个数据后,将其后面的内容做隐藏处理,在不刷新页面的情况下进行内容的翻页。并且附带了渐入渐出效果。7 ~# B" ^$ u( ~( u- B/ b
1 A6 N6 n! R' |4 [# t2 a/ A: Y
引入jQuery
  1. <script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script>
    7 y# ~- M. K9 e$ H$ ?, h" w) ^
  2. <script src="template/yulun_hei/js/jPages.js" type="text/javascript"></script>
    - C- g) X9 y( ^. K1 L: M3 b7 U
  3. <script type="text/javascript">var jQuery = jQuery.noConflict();</script>
复制代码
示例源码
  1. <ul id="itemContainer">
    $ A" q* Q' K, P' [! F" R! V9 B) a
  2.     <li>...</li>1 `* m+ o' ?) [4 ~7 f6 |
  3.     <li>...</li>9 F6 g; c# Q! y1 E/ N$ z
  4.     <li>...</li>
    & X, f+ W8 Z: m8 E. e) q2 v
  5.     <li>...</li>
    ( P' h) U6 c3 L/ [8 X* L# o
  6.     <li>...</li>7 d" e9 p+ l# @8 o
  7. </ul>
复制代码
翻页源码
  1. <div class="holder"></div>
复制代码
启动插件
  1. jQuery(function() {; `6 k% \6 a, h  P: j5 _
  2.         jQuery("div.holder").jPages({
      p8 @7 K' o/ b4 h# ~
  3.                 containerID  : "itemContainer",//父级定义的ID名
    2 Q! x+ f/ D8 _* W+ A
  4.                 perPage:20,  //该数字控制每页显示数量,想要显示几个就修改成数字几( H+ d6 ?9 F: \  x5 n0 }  B
  5.                 previous: "上一页",/ Y& v9 o# h) d8 g# d
  6.                 next: "下一页"        6 V5 x, t) A6 Z2 c5 r
  7.         });
    ) q9 ?8 I( U% I' v: f  V
  8.         jQuery("div.holder").click(function(){
    5 B3 T$ _! p. r/ ]( V/ b
  9.                 jQuery('body,html').animate({scrollTop:370},500);
    5 u: }1 I) s/ u5 k( L
  10.                 return false;
    ' s+ X* ^' x, z
  11.         });
    0 G( G0 s7 }% J7 z
  12. });
复制代码
这里需要注意的是:perPage:20,是每页显示的个数,也就是说<li>标签的总数,必须大于这里的20。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告
493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

快速回复 返回顶部 返回列表