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

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 ...

Rails devise で複数モデルの認証機能を実装

Rails devise で複数モデルを管理 概要 rails のログイン認証 Gem「devise」のインストール・設定方法を紹介します。 よく「d...
トップへ戻る