<cite id="hg5aa"></cite>

    <cite id="hg5aa"></cite>

      <cite id="hg5aa"></cite>

      <rt id="hg5aa"><meter id="hg5aa"><button id="hg5aa"></button></meter></rt>

        <video id="hg5aa"><menuitem id="hg5aa"><option id="hg5aa"></option></menuitem></video>

      1. <cite id="hg5aa"><form id="hg5aa"></form></cite>
        <strong id="hg5aa"></strong>

          <rt id="hg5aa"><optgroup id="hg5aa"></optgroup></rt>
          <cite id="hg5aa"><noscript id="hg5aa"></noscript></cite>
        1. 藍莓博客

          • 今天是

          織夢DedeCMS列表實現Ajax無限下拉教程

          摘要:本文為大家介紹織夢DedeCMS列表加載更多、無限下拉Ajax加載的使用方法。 無限下拉效果 點擊加載更多效果 插件說明 支持 “加載更多” 支持 “無限下拉” 支持動靜態 支持圖片延遲加......
          分享到:

          本文為大家介紹織夢DedeCMS列表加載更多、無限下拉Ajax加載的使用方法。

          無限下拉效果

          織夢DedeCMS列表實現Ajax無限下拉教程_藍莓博客

          點擊加載更多效果

          織夢DedeCMS列表實現Ajax無限下拉教程_藍莓博客

          插件說明

          支持 “加載更多”

          支持 “無限下拉”

          支持動靜態

          支持圖片延遲加載

          實現步驟

          1、頁面頭部引用 jquery.js 與 jquery-ias.min.js

          織夢DedeCMS列表實現Ajax無限下拉教程_藍莓博客

          注意:jquery.js庫版本必須大于1.6

          <script src='/js/jquery.js'></script><script src="/js/jquery-ias.min.js"></script>

          jquery-ias.min.js 下載地址:https://pan.baidu.com/s/1PVjNDeiI4V3dyO7m-lfyOg 提取碼: 86ku

          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>

          要在加載更多后顯示的文章中支持圖片延遲加載,需要添加此圖片延遲加載功能,沒有延遲加載圖片的不需要理會

          ias.on('rendered', function(items) {$(".content img").lazyload({effect: "fadeIn",failure_limit : 10}); //這里是你調用Lazyload的代碼})

          完成。


          來源于藍莓原文地址: http://www.weipudao.cn/xq/dede_1074.html

          限界突破真白爱梨在线