下までスクロールしたら自動的にページングされる画面をみたことはありますか?
私は良くスマホサイトで見ます。PCサイトでもたまに見かけることはありますが。
これは、下までスクロールしたときにイベントが発生し、そのイベントで次のページを表示するよう処理が行われています。
今回は、この下までスクロールしたときにイベントを発生させるjQuery.Bottomプラグインを紹介します。
jQuery_Bottomから「Download ZIP」をクリックしてダウンロードを行います。
取得したファイルの中に、「demo.html」というファイルがあります。
基本的なことはこのファイルに書いてあります。
まずは、取得したjQueryを読込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bottom-1.0.js"></script>
コードは、以下のようなのをサンプルとして記述してみます。
<div id="wrap">
<ol>
<li>初めから表示されているコンテンツ</li>
<li>初めから表示されているコンテンツ</li>
<li>初めから表示されているコンテンツ</li>
<li>初めから表示されているコンテンツ</li>
<li>初めから表示されているコンテンツ</li>
</ol>
</div>
見やすいように、高さを150px程度に設定してスクロールするようにします。
#wrap { border: 1px solid #000; width: 612px; height: 150px; overflow: auto }
先ほど作成したHTMLと合わせて以下のように記述します。
$(document).ready(function() {
$("#wrap").bottom({proximity: 0.05});
$("#wrap").bind("bottom", function() {
var obj = $(this);
if (!obj.data("loading")) {
obj.data("loading", true);
$('#wrap ol').append('<li>Loading...</li>');
setTimeout(function() {
$('#wrap ol li:last').remove();
$('#wrap ol').append('<li>追加されたコンテンツ</li><li>追加されたコンテンツ</li><li>追加されたコンテンツ</li>');
obj.data("loading", false);
}, 1500);
}
});
});
まず一番初めに、bottomイベントを発生させる位置を指定します。
$("#wrap").bottom({proximity: 0.05});
これは下から0.05の距離になったらという意味です。
例えばこれを0.05ではなく0.5にすると、画面の半分までスクロールされたらイベントが発生します。
次にbottomイベントの処理を記述します。
今回の例では、まず「loadin...」と表示し、1500ミリ秒後に、「<li>追加されたコンテンツ</li>」を3つ追加しています。
こんな簡単にスクロール自動ページング機能が簡単に作れるんです。