jquery ias 与ajax,【使用jquery-ias.min.js插件做帝国cms的下拉无限加载帝国cms模板】来自虚拟主机|帝国CMS模板及插件全站源代码...

摘要:今天,发现了一个名为Infinite AJAX Scroll的开源项目,使用它来通过很简单的程序配置,就可以让帝国cms支持分页Ajax下拉无限加载功能。专程进行了测试,发现非常简单好用,这里分享给大家。第一步:首先下载jquery-ias.min.js(下载地址)

今天,发现了一个名为Infinite AJAX Scroll的开源项目,使用它来通过很简单的程序配置,就可以让帝国cms支持分页Ajax下拉无限加载功能。专程进行了测试,发现非常简单好用,这里分享给大家。

第一步:首先下载jquery-ias.min.js(下载地址)。

第二步:将 jquery-ias.min.js 文件放到网站根目录下的/js/文件夹,也就是路径为 /js/jquery-ias.min.js。

第三步:在需要进行无限加载的页面,插入如下配置代码,这是插件运行的必要参数。

var ias = $.ias({

container:  "#container",

item:       ".scroll",

pagination: "#epages",

next:       ".next"

});

ias.extension(new IASSpinnerExtension());

ias.extension(new IASNoneLeftExtension({html: '

后面已经没有数据了

'}));

第四步:在需要无限加载的页面所属列表模板中,写入以下代码,这里要注意容器id和容器class类的对应,否则会出错。

[!--empirenews.listtemp--]

[!--empirenews.listtemp--]

[!--show.listpage--]

第五步:打开 /e/class/t_functions.php 文件,在第129行(帝国cms7.2UTF8版本),或搜索以下代码

$nextpage=' '.$fun_r['nextpage'].'';

替换为

$nextpage=' '.$fun_r['nextpage'].'';

到这里就结束了,快试试无限加载的效果吧!

另外还有一点需要补充,如果页面上启用了Lazyload懒加载插件,在第二页开始之后的页面图片会造成加载不出来,在配置参数中加入下面的代码即可解决:

ias.on('rendered',function(items){

$("img.lazy").lazyload({effect:"fadeIn"});//这里是你调用Lazyload的代码

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值