jquery ias插件详解

该插件的作用主要就是用于滑动分页。具体例子大家可以去看www.36kr.com首页的分页技术。

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

第二步：页面引入jquery和ias插件。

下面简单介绍下该插件：

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

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

                         2、插入加载器图片。

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

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

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

                        1、container

                               容器：顾名思义，就是放一条条信息的html元素。

                       2、item:

                              承载一条条信息的html标签,确保他们是放在container里面的。

                      3、pagination:

                             做分页的时候，我们都会在页面上显示分页字符串，用的此技术时也应该有此功能，并赋值在页面上。该技术会自动将其隐藏。分页时会用的下一页的页 码。

                      4、next

              指向分页字符串的下一页的html标签。

           5、loader:

              加载器，也是一个html标签。如同上述网站的点击下一页时的‘正在加载……‘字样，如不设置也会自动加上默认值。

           6、trigger:

               分页的操作按妞的展示文字，如下一页，如果没有，该插件会自动显示默认值

           7、triggerPageThreshold：

              一般设置为大于0，比如说我们设置为3.当我们滑动到第一页底部时，会自动加载下一页，知道第三页。


           8、onPageChange:

              改变页码的事件发生时触发。

           9、beforePageChange：

                分页前调用，可用于当时最大页数时，停止操作。


           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('').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
                _gaq.push(['_trackPageview', path]);
            }
        });
     });

注意以下几点：

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

2、例子：

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

	

        
已是最后一页
        

	

		next
	
	

		

			next