Infinite Ajax Scroll 簡稱 ias,無限的ajax滾動,是一款jQuery滾動ajax分頁插件,當頁面滾動到容器可見部分將自動異步加載數據。
- 插件說明
- 不用改動程序內核文件,不用懂php代碼
- 支持“加載更多”
- 支持“無限下拉”
- 支持動靜態
- 支持圖片延遲加載
- 插件的集成很簡單,分以下幾個步驟:
1、頁面中引用jquery.js 與 jquery-ias.min.js
注意:jquery.js庫版本必須大于1.6
<script src='/js/jquery.js'></script><script src="/js/jquery-ias.min.js"></script>
jquery-ias.min.js 下載鏈接:
![]() |
文件 |
2、接著上面的js,在頁面中寫上插件參數
<script type="text/javascript">var ias = $.ias({container: ".listbox", //包含所有文章的元素item: ".item", //文章元素pagination: ".pagelist", //分頁元素next: ".pagelist a.nextpage", //下一頁元素});ias.extension(new IASSpinnerExtension({src: "/img/load.gif", //此選項為加載時緩沖圖片html: '<p style="text-align: center;"><img src="{src}"/></p>'}));ias.extension(new IASTriggerExtension({text: '點擊加載更多', //此選項為需要點擊時的文字html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',offset: !1, //設置此項,如 offset:2 頁之后需要手動點擊才能加載,offset:!1 則一直為無限加載}));ias.extension(new IASNoneLeftExtension({text: '已經加載完成!', // 加載完成時的提示html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',}));</script>
3、dedecms列表模板html代碼示范,注意html代碼中的 listbox、item、pagelist、nextpage 要與上面js中的統一
<!-- listbox這個必須包住分頁條在里面 -->
<div class="listbox">
<ul>
{dede:list pagesize='10'}
<li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>
{/dede:list}
</ul>
<ul class="pagelist">
{dede:pagelist listitem="next" listsize="1" runphp=yes}
@me = preg_replace('/<a\shref=([\'"]?).+?\1/', '$0 class="nextpage"', @me);
{/dede:pagelist}
</ul>
</div>



