Infinite Ajax Scroll简称ias,从字面来理解是"无限的ajax滚动",其实就是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据)
1、利用这个插件分页的示例网站:36氪,有兴趣的话可以看下。
2、插件下载:点击下载。
3、插件的使用前提:网站必须实现分页即网页中必须有分页代码,在分页代码中必须包含下一页的按钮或链接。
4、插件的使用方法:页面中必须引入jquery-ias.js脚本文件,最好引入jquery.ias.css样式文件。
5、插件参数简介
(1)、container:容器,所有数据的最外层元素(下图中class为artList的ul)。
(2)、item:项,每一条数据的最外层元素(下图中class为dataItem的li)。
(3)、pagination:分页,分页代码最外层元素(下图中class为m_page的section)。
(4)、next:下一页,分页代码中的下一页按钮或链接(下图中id为nextPage的li下的a元素)。
(5)、loader:加载,数据在加载过程中提示的内容(可以是文本、图片或图文结合)。
(6)、triggerPageThreshold:触发分页的阈值,是数字,当 当前页码等于这个值 鼠标再滚动时 页面就会显示trigger属性设置的值,可以利用这个属性和trigger属性实现上一页、下一页的分页功能,不过可能要改写插件中get_trigger方法。
(7)、trigger:当 当前页码等于triggerPageThreshold属性的值 鼠标再滚动时 此属性设置的内容将会在页面中显示。
(8)、beforePageChange:页码改变前,加载数据之前调用的函数,在这个函数中可以判断是否到了最后一页,如果不希望再加载数据,函数返回false即可。
6、作者对这个插件的了解仅限于上面介绍的这些,有兴趣的童鞋可以自行研究并和作者交流。
7、示例代码
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; } }); });
有朋自远方来...评论一下呗O(∩_∩)O