Infinite Scrollとは、
ページャーの代わりに、ページ内で次のページのレコードを読む出すライブラリのことです。
http://www.infinite-scroll.com/
WordPressのプラグインもあって、jQueryのプラグインもあります。
下記のサイトで体験できます。
http://kachibito.net/sample/jquery-masonry/
今回実装したのは、jQueryのプラグインです。
１、ライブラリをダウンロード
https://github.com/paulirish/infinite-scroll
２、htmlソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id="container"> <ul> <li>hogehoge1</li> <li>hogehoge2</li> <li>hogehoge3</li> <li>hogehoge4</li> <li>hogehoge5</li> </ul> </div> <div id="page-nav" style="display: none;"><a href="my_url/2"></a></div> <script src="jquery.infinitescroll.min.js" type="text/javascript"> <script type="text/javascript"> $(function(){ $('#container').infinitescroll({ navSelector : '#page-nav', // この部分をスクロールが通ったら、ページングを実施 nextSelector : '#page-nav a:first', // 次のページへのリンク（自動に書き換える、例の中で一回使ったものが次はmy_url/3になる） itemSelector : '#target li', // my_urlから取ったhtmlのid=targetの部分のliだけ表示する }); }); </script> |
３、一旦停止・再開
htmlソースをブラウザが読み込んだら、Infinite Scrollが自動的に初期化（bind）します。
そのあと、navSelectorをスクロールが通ったら、自動的に次ページのデータを読み込みます。
それを一旦停止したい場合は、下記ソースを書きます。
|
1 2 3 | <script type="text/javascript"> $('#container').infinitescroll("pause"); </script> |
また、再開する場合は、こう書きます。
|
1 2 3 | <script type="text/javascript"> $('#container').infinitescroll("resume"); </script> |
４、自動的にページングではなく、クリックしてからページングにするには？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div id="container"> <ul> <li>hogehoge1</li> <li>hogehoge2</li> <li>hogehoge3</li> <li>hogehoge4</li> <li>hogehoge5</li> </ul> </div> <div id="page-nav"><a href="my_url/2">もっと読む！</a></div> <script src="jquery.infinitescroll.min.js" type="text/javascript"> <script type="text/javascript"> $('#container').infinitescroll({ navSelector : '#page-nav', nextSelector : '#page-nav a:first', itemSelector : '#target li', }); // 初期化をやめ $(window).unbind('.infscr'); // クリックごとに動作をする $('#page-nav a').click(function(){ $(document).trigger('retrieve.infscr'); return false; }); </script> |
また案件進行中ですので、実装したURLは非公開にさせていただきます。
