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

首先要说的是,这是一个伪翻页。原理是调用例如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。

五月源码网 discuz教程 Query 实现 Discuz! 伪翻页(不刷新页面) https://www.u532.com/1303.html

常见问题

相关文章

评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务