EMlog实现分页Ajax无限加载功能:jquery.ias.js

带算为自己模版添加上ajax无限加载功能，舍力在百度找了好一阵子，才找到合适的ajax翻页功能。Infinite AJAX Scroll通过很简单的设置，就可以让Emlog支持分页Ajax无线加载功能。
下面舍力就以Emlog本博客主题 default(默认) 主题为例：
1、下载 jquery.ias.min.js、jquery.js(文章尾部有下载地址)
2、把 jquery.ias.min.js、jquery.js 拷贝到 content/templates/default/js/ 文件夹下
3、在编辑器中打开 content/templates/default/header.php，在之间加入下面代码

<script src="js/jquery.js" type="text/javascript">script> <script src="js/jquery.ias.min.js" type="text/javascript">script>

4、在log_list.php 需要改2个地方

找到代码  if (!empty($logs)): foreach($logs as $value): ?> 后面加入 <div class="sheli"> 然后在代码  endforeach; else: ?> 前面加入代码 div>

在在后面加入代码

<script> var ias = $.ias({ container: ".content", //包含所有文章的元素 item: ".sheli", //文章元素 pagination: "#pagenavi", //分页元素 next: "#pagenavi a", //下一页元素 }); ias.extension(new IASTriggerExtension({ text: '点击查看更多内容
 ', //此选项为需要点击时的文字 offset: 1, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载 })); ias.extension(new IASSpinnerExtension()); ias.extension(new IASNoneLeftExtension({ text: '已经是全部内容了
 ', // 加载完成时的提示 })); script>

按照以上步骤就可以弄好了，当然css就自己去写了，舍力就不普及了。可能会与一些模板产生js冲突，自己研究一下就可以，测试请用默认模板。

以上代码经测试会重复加载内容，可以通过在下一页的a标签加入id=“slnext”，然后把next: "#pagenavi a"改为next: "#pagenavi a#slnext"即可解决问题

js下载地址
原文地址：https://www.shuyong.net/iemlog/942.html

1、本网站名称：源码村资源网
2、本站永久网址：https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
源码村资源网 » EMlog实现分页Ajax无限加载功能:jquery.ias.js

源码村长

分享到：