当前位置:首页 » Emlog教程 » EMlog实现分页Ajax无限加载功能:jquery.ias.js

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,在<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下载地址
觉得很赞 (2)打赏支持
X
打赏方式:
  • 微信
  • QQ红包
  • 支付宝

使用微信扫一扫
日期:2017年04月23日 星期日   分类:Emlog教程   本文已经被百度收录,点击查看详情
关键词:emlog
blogger
本页正文内容约1383个文字
版权所有:【舍力博客】 => 【EMlog实现分页Ajax无限加载功能:jquery.ias.js】
本文地址:https://www.shuyong.net/942.html
除非注明,文章均为 【舍力博客】 原创,欢迎转载!转载请注明本文地址,谢谢!

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

填写好QQ号码,任点空白处自动获取

昵称

邮箱

网址

3楼、往记 [回复该留言]
2017-07-20 17:05
自己在做个模板,试了一下刚好适用!
舍力(博主) [回复该留言]
2017-07-21 10:29
@往记:有用就好!
2楼、Liangge [回复该留言]
2017-07-01 12:04
谢谢舍利~
舍力(博主) [回复该留言]
2017-07-01 14:02
@Liangge:麻烦下次注意一下,我叫舍力,呵呵
起点终站 [回复该留言]
2017-07-03 21:54
@舍力:看到这评论笑尿。。。有种。摸胸的时候才发现自己是汉子,既视感
1楼、动感影评网 [回复该留言]
2017-06-13 21:22
动感影评网【网址屏蔽】/
希望与贵站达成长期友情链接  同意的话请到我站留言

站内搜索

个人资料

舍力

博主:舍力

Emlog交流群

    舍力博客承接Emlog模板定制/仿站、网站功能高仿、新增或修改Emlog等服务,本站提供最新的Emlog企业/CMS/博客模板、Emlog教程及网页脚本编程知识分享!

广告

博客统计

  • 文章数量:977篇
  • 文章评论:2694条
  • 总访问量:2156784次
  • 微语数量:50条
  • 在线人数:1人
  • 本站运行:4年零24天
  • 博主很懒,今天什么都没留下!
Copyright © 2017 舍力博客 版权所有   粤ICP备11021420号
时间那么贵,留给相处不累的人!Sitemap
数据存储阿里云服务器 QQ群:398634813
Powered by emlog / &Author 舍力博客.