WEBサイトや、ブログ等の記事をページング機能ではなく、facebookのタイムラインのように無限スクロールで実装するプラグイン「infinite scroll」。
wordpressなどのブログ記事や、ECサイト等、様々なシーン活躍出来そうですね。
今後使いそうな予感がするので、覚え書き。
1.まずは、プラグインの準備
JQUERY本体をJQUERYの公式サイトから、infinite scrollをinfinite scroll配布ページの、ページ右下の「Download ZIP」ボタンからダウンロード。
まずは、JqueryとJavascriptの読み込み。
1 2 3 4 5 6 7 |
<script src"jquery-1.10.2.min.js"></script> <script src"jquery.infinitescroll.min.js"></script> </body> </html> |
2.設定方法
プラグインの設定部分を記述。まずはプラグインを適用したい要素をセレクターに指定する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src"jquery-1.10.2.min.js"></script> <script src"jquery.infinitescroll.min.js"></script> <script> $(function(){ $('#content').infinitescroll(); }); </script> </body> </html> |
※jQueryプラグインは、適用したい要素に、.(ドット)繋ぎでプラグイン名を書き、丸括弧”()”とセミコロン”;”を書くことで実行される。
3.オプションの指定
最後にオプションを指定。基本的な機能は以下の3つを指定すれば利用可能。
- ★navSelector:次に読み込む要素を囲む要素を指定
- ★nextSelector:次に読むこむ要素自体を囲む要素を指定
- ★itemSelector:表示させたい要素を指定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(function(){ $('#content').infinitescroll({ navSelector : "div.navigation", // ナビゲーション要素を指定 nextSelector : "div.navigation a", // ナビゲーションの「次へ」の要素を指定 itemSelector : "#content div.post" // コンテンツ要素を指定 }); }); </script> |
その他のオプション。
- ★debug:console.logに出力するデバッグメッセージを有効/無効にします
- ★loadingImg:ローディング時に表示する画像のパスを指定します
- ★loadingText:ローディング画像に添えるテキストの指定をします
- ★animate:コンテンツのロード時にアニメーションさせるか指定します
- ★extraScrollPx:次のコンテンツを読み込むまでのスクロール量をピクセル指定します
- ★donetext:全てのコンテンツを表示し終わったら表示させるテキストを指定します
- ★errorCallback:404ページがコールされたときや、これ以上のコンテンツがない場合の処理を指定します
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 27 28 29 30 |
<script> $(function(){ $('#content').infinitescroll({ debug: true, // console.logに出力するデバッグメッセージを有効にする loadingImg : "/img/loading.gif", // ローディング時のローディング画像のパスの指定 // デフォルトのパスは: "http://www.infinite-scroll.com/loading.gif" loadingText : "Loading new posts...", // ローディング画像に添えるテキストの指定 // デフォルトのテキストは: "<em>Loading the next set of posts...</em>" animate : true, // コンテンツのロード時にアニメーションさせるかの指定 // デフォルトは: false extraScrollPx: 50, // 次のコンテンツを読み込むまでのスクロール量のピクセルを指定 // animateを有効にさせるにはこの値を必ず指定しましょう。 // デフォルトの値は: 150 donetext : "I think we've hit the end, Jim" , // 全てのコンテンツを表示し終わったら表示させるテキスト // デフォルトのテキストは: "<em>Congratulations, you've reached the end of the internet.</em>" errorCallback: function(){}, // 404ページがコールされたり、これ以上のコンテンツがない場合の処理 // このオプションはバージョン1.2から追加されました。 },function(arrayOfNewElems){ // コールバック }); </script> |
13.09.06 | WEBデザイン制作・IT関連