• 懒鸟飞：帝国cms模板专业分享平台，新域名：lanniaofei.com

站点导航

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>


加载更多 jquery ias插件 滚动分页

上一篇：雅黑PHP探针

下一篇：Infinite Scroll插件实现无限滚动加载

最新文章

最新模板

标签云

动漫 电视剧 影视 电影站 电影网站 采集器 百度地图 帝国cms门户站模板 帝国cms博客模板 帝国cms企业模板 帝国cms采集 采集教程 火车头采集器 火车头采集 易优cms 苹果cms Dynadot 免费SSL Cloudflare 冲突 内容关键词 镜像 tag插件 变现 vpn 视频模板 数码模板 企业 养殖 整型
 
QQ在线咨询
QQ客服
1430826160
淘宝官网
懒鸟飞淘宝店