首页 » 网站建设 » phpjquery滚动加载技巧_运用INFINITE AJAX SCROLL实现下拉加载效果

phpjquery滚动加载技巧_运用INFINITE AJAX SCROLL实现下拉加载效果

访客 2024-12-10 0

扫一扫用手机浏览

文章目录 [+]

Infinite Ajax Scroll是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据),功能完善,设置大略,目前的版本是2.3.0,个人用户可以免费利用。

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

phpjquery滚动加载技巧_运用INFINITE AJAX SCROLL实现下拉加载效果

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

phpjquery滚动加载技巧_运用INFINITE AJAX SCROLL实现下拉加载效果
(图片来自网络侵删)

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

举个例子。

一个页面的内容如下:

<div class=\"大众container\"大众>

<div class=\"大众item\"大众>...</div>

<div class=\"大众item\"大众>...</div>

</div>

<div id=\"大众pagination\"大众>

<a href=\"大众page1.html\"大众>1</a>

<a href=\"大众page2.html\"大众 class=\公众next\"大众>2</a>

</div>

则 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 & \"大众<span class=\"大众\"大众page now-page\"大众\公众>\公众 & i & \"大众</span>\"大众

不才面增加如下几行

elseif i=intNowPage + 1 then

strPageBar=Replace(strPageBar,\公众<#pagebar/page/url#>\"大众,s)

strPageBar=Replace(strPageBar,\"大众<#pagebar/page/number#>\"大众,\"大众<span class=\"大众\公众page\"大众\"大众>\"大众&i&\公众</span>\"大众)

strPageBar=Replace(strPageBar,\公众page-numbers\公众,\"大众page-numbers next-page\"大众)

Template_PageBar=Template_PageBar & strPageBar

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

标签:

相关文章