您的位置：首页 > Web前端 > JQuery

jQuery Infinite Ajax Scroll(ias) 分页插件介绍

2014-06-08 00:13 369 查看

InfiniteAjaxScroll简称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、示例代码

InfiniteAjaxScroll可将你现有的网页变成支持无限滚动的页面，无需太麻烦就可搞定。仔细研究后发现该插件正是我所需，而且结构很简单，如果你现在的页面已经实现了分页功能的话，那么很容易的就能把它变成支持无限滚动的页面，现有的页面几乎不需要做任何改动，只需要引用相关的js文件，然后配置如下的js：

1:jQuery.ias({

2:container:".listing",

3://Entertheselectoroftheelementcontaining写入容器的元素<selector>

4://youritemsthatyouwanttopaginate.具体数据的元素标识

5:

6:item:".post",

7://Entertheselectoroftheelementthateach要加载数据的元素标识

8://itemhas.Makesuretheelementsareinside用来提取下一页信息里面的元素

9://thecontainerelement.从而加载到上面的容器中

10:

11:pagination:"#content.navigation",

12://Entertheselectoroftheelementthatcontains分页信息的容器元素标识

13://yourregularpaginationlinks,likenext,即：首页，上一页，下一页，尾页等信息的容器。

14://previousandthepagenumbers.Thiselement

15://willbehiddenwhenIASloads.

16:

17:next:".next-postsa",

18://Entertheselectorofthelinkelementthat下一页的元素标识，用来获取下一页的信息元素

19://linkstothenextpage.Thehrefattribute

20://ofthiselementwillbeusedtogettheitems

21://fromthenextpage.

22:

23:loader:"images/loader.gif"

24://Entertheurltotheloaderimage.Thisimage数据进行提取加载的时候显示的图片

25://willbedisplayedwhenthenextpagewithitems

26://isloadedviaAJAX.

27:});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航