Query 實現 Discuz! 偽翻頁（不刷新頁面）

2024-09-11 09:05:37

字體：大中小

來源：轉載

供稿：網友

首先要說的是，這是一個偽翻頁。原理是調用例如100個數據后，將其后面的內容做隱藏處理，在不刷新頁面的情況下進行內容的翻頁。并且附帶了漸入漸出效果。

引入jQuery
<script src="template/yulun_hei/js/jquery.min.js" type="text/javascript"></script>
<script src="template/yulun_hei/js/jPages.js" type="text/javascript"></script>
<script type="text/javascript">var jQuery = jQuery.noConflict();</script>

示例源碼
<ul id="itemContainer">
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>

翻頁源碼
<div class="holder"></div>

啟動插件
jQuery(function() {
      jQuery("div.holder").jPages({
            containerID  : "itemContainer",//父級定義的ID名
            perPage:20,  //該數字控制每頁顯示數量，想要顯示幾個就修改成數字幾
            previous: "上一頁",
            next: "下一頁"
      });
      jQuery("div.holder").click(function(){
            jQuery('body,html').animate({scrollTop:370},500);
            return false;
      });
});

這里需要注意的是：perPage:20，是每頁顯示的個數，也就是說<li>標簽的總數，必須大于這里的20。

上一篇：Discuz全站任意數值實現虛擬化教程

下一篇：jQuery 實現 Discuz! 點擊加載更多（不刷新頁面）