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

2017-4-23 / 13 评论 / 13880 阅读

带算为自己模版添加上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,在<head></head>之间加入下面代码

<script src="<?php echo TEMPLATE_URL;?>js/jquery.js" type="text/javascript"></script>
<script src="<?php echo TEMPLATE_URL;?>js/jquery.ias.min.js" type="text/javascript"></script>

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

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



在<div id="pagenavi"><?php echo $page_url;?></div>在后面加入代码

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

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


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



js下载地址

评论一下?

OωO
取消
    1. 头像
      小猪被骑
      第7楼
      大佬我想问下就是这个 就是在哪里加
      可以通过在下一页的a标签加入id=“slnext”,然后把next: "#pagenavi a"改为next: "#pagenavi a#slnext"即可解决问题
      回复
      1. 头像
        舍力
        @小猪被骑:a标签,不是说了么?
        回复
    1. 头像
      *唐诗*
      第6楼
      在有网状态是没问题的,在有网加载中上拉,继续加载,然后断网,继续上拉会显示正在加载,然后联网再上拉就会一直停留在正在加载,而不是联网后自动加载出下一页,除非在页面重新刷新页面才会正常
      回复
      1. 头像
        舍力
        @*唐诗*:你想表达什么?什么有网没网的,不知道你在说什么
        回复
    1. 头像
      *唐诗*
      第5楼
      请求失败后重新请求如何设置
      回复
      1. 头像
        舍力
        @*唐诗*:按教程走是没有问题的,如果有问题请仔细检查是否哪里出错了。。。
        回复
    1. 头像
      顺心意
      第4楼
      1啥方法是发生
      回复
    1. 头像
      往记
      地板
      自己在做个模板,试了一下刚好适用!
      回复
      1. 头像
        舍力
        @往记:有用就好!
        回复
    1. 头像
      Liangge
      板凳
      谢谢舍利~
      回复
      1. 头像
        舍力
        @Liangge:麻烦下次注意一下,我叫舍力,呵呵
        回复
      1. 头像
        起点终站
        @舍力:看到这评论笑尿。。。有种。摸胸的时候才发现自己是汉子,既视感
        回复
    1. 头像
      动感影评网
      沙发
      动感影评网http://www.yuedutop.cn/
      希望与贵站达成长期友情链接  同意的话请到我站留言
      回复