820_90_副本.png820×90_副本.png

     孙若博客-与你分享互联网的精彩!本博客提供各种红包福利,源码模板,破解软件,影音图片等等资源。 欢迎转载及收藏本站资源留言评论一下是我们前进的动力。博主QQ:

 

 

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"即可解决问题

孙若博客 SUNRUO.CN 所有文章如无特别注明均为原创,文章作者:孙若复制或转载请以超链接形式注明转自 孙若博客
原文地址《EMlog实现分页Ajax无限加载功能:jquery.ias.js》 百度是否收录本文章:已自动提交度娘等待收录 点击帮忙提交一下
上一篇:转:判断文章发布时间是否超过一年时输出一段声明 下一篇:孙若博客[强烈推荐]Emlog 6.01程序 主题《FYS》版本2.5.1
分享到:更多

相关推荐

nieruocom.png
分享本文至:
版权所有:《孙若博客
文章标题:《EMlog实现分页Ajax无限加载功能:jquery.ias.js
除非注明,文章均为 《孙若博客》 原创
转载请注明本文短网址:http://sunruo.cn/?post=291  [生成短网址]

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(3)

文章不错支持一下,非常喜欢
头条 2个月前 (2019-08-24) 回复
文章不错支持一下吧
今日新闻 2个月前 (2019-08-13) 回复
文章不错支持一下吧
今日头条新闻 2个月前 (2019-08-11) 回复