小辉网络社区致力于优质软件,活动线报,游戏辅助,绿色工具等资源共享,好货不私藏!

EMlog实现分页上下页Ajax无限加载功能

小辉工作室 网络技术教程

带算为自己模版添加上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"即可解决问题 


温馨提示:如有转载或引用以上内容请将本文链接作为出处标注!百度已收录

免责声明:本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。侵删请致信E-mail:431228450@qq.com

标签 暂无标签
资源分享
评论列表