大乐透复式20加8多少钱 www.wmmqog.com.cn 
看到很多新聞資訊網站使用無限延遲加載、無限下拉功能，看著就帥氣，逼格高一個檔次。無限下拉的方式來避免用戶通過點擊下一頁來獲取更多內容。比如今日頭條網站，打開后，可以一直向下滾動，當滾動到頁面底部后，就會加載更多新聞條目。如果你的網速不夠快，可以看到底部會偶爾會顯示“推薦中”的加載提示。
今天我們使用的是jquery-ias.min.js完成功能，Infinite Ajax Scroll 簡稱 ias，無限的ajax滾動，是一款jQuery滾動ajax分頁插件，當頁面滾動到容器可見部分將自動異步加載數據。
插件說明
炒雞簡單，不用改動程序內核文件，不用懂php代碼
支持“加載更多”
支持“無限下拉”
支持動靜態
支持圖片延遲加載
插件的集成很簡單，分以下幾個步驟：
1、頁面中引用jquery-1.8.0.min.js 和 jquery-ias.min.js
注意：jquery.js庫版本必須大于1.6
<script src='/style/js/jquery-1.8.0.min.js'></script>
<script src="/style/js/jquery-ias.min.js"></script>
jquery-ias.min.js 及 jquery-1.8.0.min.js
下載鏈接: 鏈接：https://pan.baidu.com/s/1nNrjeX2zPvzGsXLPIC80zw 提取碼：8s53
2、接著上面的js，在頁面中寫上插件參數
|
<script type="text/javascript"> var ias = $.ias({ container: ".listbox", //包含所有文章的元素 item: ".item", //文章元素 pagination: ".pagelist", //分頁元素 next: ".pagelist a.nextpage", //下一頁元素 }); ias.extension(new IASSpinnerExtension({ src: "/skin/images/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中的統一
<div class="listbox">
<ul class="e2">
{dede:list pagesize='10'}
<li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>
{/dede:list}
</ul>
</div>
<ul class="pagelist">
{dede:pagelist listitem="next" listsize="1" runphp=yes}
@me = preg_replace('/<ashref=(['"]?).+?/', '$0 class="nextpage"', @me);
{/dede:pagelist}
</ul>
本文地址：//www.wmmqog.com.cn/dedecms_jq/1970.html
發表評論
評論列表（條）