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

emlog教程 2020-08-25

  带算为自己模版添加上ajax无限加载功能, 在

  百度找了好一阵子,才找到合适的ajax翻页功能。Infinite AJAX Scroll通过很简单的设置,就可以让Emlog支持分页Ajax无线加载功能。

  下面

  舍力就以Emlog本

  博客主题 default(默认) 主题为例:

  1、下载 jquery.ias.min.jsjquery.js(文章尾部有下载地址)

  2、把 jquery.ias.min.jsjquery.js 拷贝到 content/templates/default/js/ 文件夹下

  3、在编辑器中打开 content/templates/default/header.php,在

之间加入下面代码

  

  

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

  找到代码

  

  if (!empty($logs)):

  foreach($logs as $value):

  ?>

  后面加入

  

  然后在代码

  

  endforeach;

  else:

  ?>

  前面加入代码

  

  在

在后面加入代码

  

  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: '

已经是全部内容了

', // 加载完成时的提示

  }));

  

  按照以上步骤就可以弄好了,当然css就自己去写了,

  舍力就不普及了。可能会与一些模板产生js冲突,自己研究一下就可以,测试请用默认模板。

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

评论 (0)
    Top