当前位置:首页 > 建站工具 > 站长工具

jquery ias插件实现滚动分页(加载更多效果)

懒鸟飞 发布于

网站列表加载更多效果,可以用jquery ias插件实现,这插件主要是把列表页的分页导航,改成加载更多的形式,点击就加载下一页的内容。如下图:


Infinite Ajax Scroll简称ias,从字面来理解是"无限的ajax滚动",其实就是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据),主要就是用于滑动分页。目前利用这个插件分页网站比较有名的比如36氪。下面把自己综合网上资料整理的插件使用方法给大家介绍一下,方便大家参考也好留下来自己存档。

  第一步:下载ias插件。下载地址:https://github.com/webcreate/Infinite-Ajax-Scroll。

  第二步:页面引入jquery和ias插件,当然ias还有自己的样式jquery.ias.css,喜欢可以引用

<script type="text/javascript" src="js/jquery1.7.2.js"></script>  
<script type="text/javascript" src="js/jquery-ias.js"></script> 

  第三步:了解插件的功能和使用方法

  ias以下面几种方式控制页面:

  1、监听到达最后一个元素的滚动事件。

  2、插入加载器图片。

  3、用ajax加载下一页内容。

  4、每一个新的元素都插入到最后一个元素的后面。

  函数:ias参数介绍:(在这只是介绍几个重要的参数)

  (1)、container:容器,很显然就是信息的HTML元素,可以理解为所有数据的最外层元素(如下图中class为artList的ul)。

  (2)、item:项,也是HTML标签,确保他们放在container里面,可以理解为每一条数据的最外层元素(下图中class为dataItem的li)。

  (3)、pagination:分页,做分页的时候,我们都会在页面上显示分页字符串,用的此技术时也应该有此功能,并赋值在页面上。该技术会自动将其隐藏。分页时会用的下一页的页码。可以理解为分页代码最外层元素(下图中class为m_page的section)。

  (4)、next:下一页,分页代码中的下一页按钮或链接(下图中id为nextPage的li下的a元素)。

  (5)、loader:加载器,数据在加载过程中提示的内容(可以是文本、图片或图文结合),比如点击下一页时的“正在加载……”字样,如不设置也会自动加上默认值。

  (6)、triggerPageThreshold:触发分页的阈值,是数字,当当前页码等于这个值 鼠标再滚动时 页面就会显示trigger属性设置的值,可以利用这个属性和trigger属性实现上一页、下一页的分页功能,不过可能要改写插件中get_trigger方法。说简单些,这是个数值,一般设置为大于0,比如说我们设置为3.当我们滑动到第一页底部时,会自动加载下一页,直到第三页。

  (7)、trigger:当 当前页码等于triggerPageThreshold属性的值 鼠标再滚动时 此属性设置的内容将会在页面中显示。

  (8)、beforePageChange:页码改变前,加载数据之前调用的函数,在这个函数中可以判断是否到了最后一页,如果不希望再加载数据,函数返回false即可。

  (9)、onPageChange:改变页码的事件发生时触发。

  两点注意:

  (1)、插件的使用前提:网站必须实现分页即网页中必须有分页代码,在分页代码中必须包含下一页的按钮或链接。

  (2)、列表内容必须超过浏览器长度的范围,否则不起作用。

  示例一:

jQuery(document).ready(function($) {
              var _gaq = _gaq || [];
               jQuery.ias({
                 container : '.list',
                 item: '.blog',
                 pagination: '.pagination',
                 next: '.next_page a',
                loader: '载入更多...',
                trigger: 'next',
                onPageChange: function(pageNum, pageUrl, scrollOffset) {
                path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
                _gaq.push(['_trackPageview', path]);
            }
        });
     });

  示例二:

jQuery(function($){
    var _gaq = _gaq || [];
    //页码计数器
    var pageCount = 1;
    jQuery.ias({
        container:'.artList',
        item:'.dataItem',
        pagination:'.m_page',
        next:'#nextPage a',
        loader:"<img src='/img/front/loader.gif' /><font size='5'>正在拼命的为您加载</font>",
        trigger:'拼命的为您加载完了所有内容',
        triggerPageThreshold:<%$pages%>,
        beforePageChange:function(curScrOffset, nextPageUrl){
            pageCount++;
            //总页数
            var pages = parseInt('<%$pages%>', 10);
            if(pageCount <= pages) return true;
            jQuery(".artList").css({'padding-bottom':'91px'});
            return false;
        }
    });
});

  一个完整示例:

<?php  
header("Content-type:text/html;charset=utf-8");  
$str = '这是测试';  
if($_SERVER["HTTP_X_REQUESTED_WITH"]=="XMLHttpRequest"){  
    $page = $_REQUEST['page'];  
    $page++;  
}else{  
    $page = 1;  
}  
$str = $str . $page;  
?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<script type="text/javascript" src="js/jquery1.7.2.js"></script>  
<script type="text/javascript" src="js/jquery-ias.js"></script>  
</head>  
<body>  
<div class="list">  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
    <div class="blog"><?php echo $str;?></div>  
        <div class="ias_loader1" style="display:none"><a href="#">已是最后一页</a></div>  
        <div class="ias_loader"></div>  
    <div class="ias_trigger">  
        <a href="#">next</a>  
    </div>  
    <div class="pagination">  
        <div class="next_page">  
            <a href="/?page=<?php echo $page;?>">next</a>  
        </div>  
    </div>  
</div>  
<script type="text/javascript">  
jQuery(document).ready(function($) {  
    var _gaq = _gaq || [];  
      jQuery.ias({  
        container : '.list',  
        item: '.blog',  
        pagination: '.pagination',  
        next: '.next_page a',  
        loader: '载入更多...',  
        trigger: 'next',  
            beforePageChange:function(scrollOffset, nextPageUrl){  
                if(nextPageUrl.substr(-1,1) == 5){  
                    jQuery(".ias_loader1").show();  
                    return false;  
                }  
           },  
            onPageChange: function(pageNum, pageUrl, scrollOffset) {  
          path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');  
          _gaq.push(['_trackPageview', path]);  
        }  
      });  
    });  
</script>  
</body>  
</html>