Lecms实现列表分页+ajax无限加载功能,舍力在百度找了好一阵子,才找到合适的ajax翻页功能。Infinite AJAX Scroll通过很简单的设置,就可以让Lecms支持分页Ajax无线加载功能。
下面舍力就以Lecms本博客主题 default(默认) 主题为例:
1、下载 jquery.ias.min.js、jquery.js(文章尾部有下载地址)
2、把 jquery.ias.min.js、拷贝到 模板/default/js/ 文件夹下
3、在编辑器中打开模板文件/default/footer.htm,在文件尾部加入下面代码调用如下:
<div id="pagenavi">{$gdata[pages]}</div>
<script src="{$cfg[webdir]}skin/js/jquery.ias.min.js"></script>

4、jquery.ias.min.js文件里修改js代码修改及说明

var ias = $.ias({
container: ".list-news-ul", //包含所有文章的元素
item: ".item", //文章元素
pagination: "#pagenavi", //分页元素
next: "a.nextpage", //下一页元素
});
ias.extension(new IASTriggerExtension({text: '<div class="gengduo">点击查看更多内容</div>',offset: 2}));//2次加载后出现 手动加载按钮
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div class="gengduo">己经加载完了</div>'}));

按照以上步骤就可以弄好了,当然css就自己去写了,小编就不在这不普及了。可能会与一些模板产生js冲突,自己研究一下就可以。

jquery.ias.min.js下载地址

特别声明:本站所有资源均为学习测试使用,请在下载后48小时之内自主删除,本站以学习为目的不承担任何法律责任!