使用Infinite Ajax Scroll实现下拉加载效果

栏目: JavaScript · 发布时间: 5年前

内容简介:现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击“下一页”按钮,也可以实现翻页,无论在PC还是手机上,体验效果都很不错,下面我就介绍一下网站开发的时候如何实现下拉加载效果。首先去Infinite Ajax Scroll目前的版本是2.3.0,个人用户可以免费使用。

现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击“下一页”按钮,也可以实现翻页,无论在PC还是手机上,体验效果都很不错,下面我就介绍一下网站开发的时候如何实现下拉加载效果。

首先去 infiniteajaxscroll网站 下载一个名为jquery-ias.min.js的文件,这个js文件需要jquery支持,一般的网站主题都会引入jquery库,没有的话就手动加一个jquery库。

Infinite Ajax Scroll目前的版本是2.3.0,个人用户可以免费使用。

之后确认一下网站的框架结构,找到四个元素的id或名称:内容块、内容条目、导航栏、下一页。

Infinite Ajax Scroll支持按照ID取值和按照class取值,ID就在名称前加#,class就在名称前加。符号。编辑jquery-ias.min.js文件,在文件尾部加入配置参数代码即可。

举个例子。

一个页面的内容如下:

...

...

则 Infinite Ajax Scroll 需要增加的代码如下:

var ias = $.ias({

container:  ".container",

item:       ".item",

pagination: "#pagination",

next:       ".next a"

});

// Add a loader image which is displayed during loading

ias.extension(new IASSpinnerExtension());

上面代码最后一行是在加载的时候显示一个加载图标,不加也可以。

对于WordPress来说,不同的模板修改修改的参数不同,但大多数直接设置即可正常工作。

对于Z-Blog来说,就不行了,因为里面没有下一页的标记,需要修改代码,打开c_system_lib.asp文件,找到下面一行:

Template_PageBar=Template_PageBar & "" & i & ""

在下面增加如下几行

elseif i=intNowPage + 1 then

strPageBar=Replace(strPageBar,"<#pagebar/page/url#>",s)

strPageBar=Replace(strPageBar,"<#pagebar/page/number#>",""&i&"")

strPageBar=Replace(strPageBar,"page-numbers","page-numbers next-page")

Template_PageBar=Template_PageBar & strPageBar

之后就有了下一页的选择器next-page了。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Learning PHP, MySQL, JavaScript, and CSS

Learning PHP, MySQL, JavaScript, and CSS

Robin Nixon / O'Reilly Media / 2012-9-3 / USD 39.99

If you're familiar with HTML, you can quickly learn how to build interactive, data-driven websites with the powerful combination of PHP, MySQL, and JavaScript - the top technologies for creating moder......一起来看看 《Learning PHP, MySQL, JavaScript, and CSS》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具