HOME > 開発メモ > スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」
2012/09/05 (2016/09/14更新) タグ: , ,

スクロールするだけでコンテンツを読み込むプラグイン「jQuery.autopager」

よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。

SPONSOR


導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。

jQuery.autopagerの導入方法

まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。
そして、スクロールで自動表示させるなら下記だけでOK。

<script type="text/javascript">
    $(function() {
        $.autopager();
    });
  </script>

  <div class="content">
    <p>1ページ目のコンテンツ<br>Contents of page 1</p>
  </div>
  <a href="/jquery/autopager/demo?page=2" rel="next">次のページ / Next</a>

これだけで次々と読み込んでくれます。引数のpageは自動的にプラグイン側で操作して増やしてくれます。

jQuery.autopager

この記事をシェアする

イリテクの最新記事をお届けします

イリテクの最新情報をチェック!
  • follow us in feedly
    RSSで最新記事を読む

イリテクで開発したサービス

請求書作成業務をもっとかんたんに。見積請求書の作成だけでなく、郵送代行、メール送信、PDFダウンロードなどバックオフィスを効率化。

詳しくはこちら

こちらの記事もおすすめです

SPONSER

記事を書いている人
入江 慎吾
イリテク(株)代表。webシステム、デザイン、iOSアプリ開発に携わって15年目。ディレクションもデザインもやるプログラマ。複数の企業と専属エンジニア契約中。自社で見積請求CLOUD PAPER運営。iPhoneアプリ全国総合ランキング3位を記録。イリテクブログは月間約5万PV。(もっと詳しく
SPONSOR
最新記事
Facebook
Twitter