jQuery.Bottom 下までスクロールしたらページング

2013/09/19

下までスクロールしたらイベント

スマホでよくあるページング

下までスクロールしたら自動的にページングされる画面をみたことはありますか?
私は良くスマホサイトで見ます。PCサイトでもたまに見かけることはありますが。

これは、下までスクロールしたときにイベントが発生し、そのイベントで次のページを表示するよう処理が行われています。
今回は、この下までスクロールしたときにイベントを発生させるjQuery.Bottomプラグインを紹介します。

サンプル

ダウンロード

jQuery_Bottomから「Download ZIP」をクリックしてダウンロードを行います。
Download

取得したファイルの中に、「demo.html」というファイルがあります。
基本的なことはこのファイルに書いてあります。

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>

CSS

見やすいように、高さを150px程度に設定してスクロールするようにします。


#wrap { border: 1px solid #000; width: 612px; height: 150px; overflow: auto }

JavaScript

先ほど作成した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つ追加しています。

こんな簡単にスクロール自動ページング機能が簡単に作れるんです。

サンプル

  1. 初めから表示されているコンテンツ
  2. 初めから表示されているコンテンツ
  3. 初めから表示されているコンテンツ
  4. 初めから表示されているコンテンツ
  5. 初めから表示されているコンテンツ
  • このエントリーをはてなブックマークに追加
Related

PHPで動画の撮影日を取得

PHPで動画の撮影日を取得 概要 PHPからffprobeコマンドを実行し、動画の撮影日時を取得します。 コード $posted_at = ...

FullCalendarでGoogleカレンダーのようなUIを実装

jQueryプラグインFullCalendarのサンプル 概要 FullCalendarを使用して、GoogleカレンダーのようなUIを実装する使用例を...

PHP Laravel5.2でmulti-auth(複数テーブルでの認証)を実装

Laravel5.2でマルチ認証 概要 LaravelとはPHPの中で今最も伸びているフレームワークです。 処理速度が遅いなどありますが、かなり使い安く拡...

PHP 正規表現でIPアドレス形式の文字列か判定

正規表現でIPアドレスの入力チェック 概要 フォームで入力されたIPアドレスが正当な文字列か判定するためのバリデーション処理を実装します。 基本的...

rbenv環境でRuby on Railsのアプリケーションを一瞬で自動生成

アプリケーション構築時に最初に行う手順 概要 アプリケーションを作成するまでの手順を記載しています。 rbenvなどの環境が設定済と仮定して話を進めま...

Rails devise・authority・rolifyで権限付きの認証機能

devise・authority・rolify 概要 3つのGemを使用して、権限付き認証機能を実装します。 gem インストール Gemfile ...
トップへ戻る