织梦cms在列表使用ajax加载更多

需要使用下面两个JS,自行到百度搜索下载就可以了。

jquery.js 与 jquery-ias.min.js:

<script src='/js/jquery.js?ver=1.11.0'></script>
<script src="/js/jquery-ias.min.js?ver=2.2.2"></script>

添加js代码

01 <script type="text/javascript">
02 var ias = $.ias({
03 container: ".listbox"//包含所有文章的元素
04 item: ".item"//文章元素
05 pagination: ".pagelist"//分页元素
06 next: ".pagelist a.nextpage"//下一页元素
07 });
08 ias.extension(new IASSpinnerExtension({
09 src: "/img/load.gif"//此选项为加载时缓冲图片
10 html: '<p style="text-align: center;"><img src="{src}"/></p>'
11 }));
12 ias.extension(new IASTriggerExtension({
13 text: '点击加载更多'//此选项为需要点击时的文字
14 html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
15 offset: !1, //设置此项,如 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载
16 }));
17 ias.extension(new IASNoneLeftExtension({
18 text: '已经加载完成!'// 加载完成时的提示
19 html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
20 }));
21 </script>

模板html加入如下代码,注意listbox、item、pagelist、nextpage要统一

01 <div class="listbox">
02 <ul class="e2">
03  {dede:list pagesize='10'}
04  <li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>
05  {/dede:list}
06 </ul>
07 </div>
08 <ul class="pagelist">
09 {dede:pagelist listitem="next" listsize="1" runphp=yes} @me = preg_replace('/<ashref=(['"]?).+?/', '$0 class="nextpage"', @me); {/dede:pagelist}
10 </ul>

完成

上一篇:织梦cms网站增加统计栏目文章数量

下一篇:织梦CMS怎么取消后台登录的验证码