こんにちわ。上西です。
今回は、スマホサイトでよく見かける、ページの続きを自動的に表示する処理を実現する
jQueryを3つ紹介します。
目次
1.jQuery.Bottom
ページの最下部にスクロールで続きを表示するjQuery
2.Infinite Scroll
ページの最下部のリンクをクリックで続きを表示するjQuery
3.jQuery.autopager
上記の2パターンを切り替えて使用できるjQuery
1. jQuery.Bottom
このプラグインを利用すれば、Twitterのタイムラインのように、
ページの一番下までスクロールしたときにページの続きを表示することができます。
サンプルページ
以下、導入方法です。
ダウンロード
jQuery.Bottomプラグインはこちらのサイトからダウンロードできます。
使い方
まず、使用したいページに以下のコードを記述してjQuery.Bottomを読み込みます。
（jqueryはgoogleのものを使用）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="jquery.bottom-1.0.js"></script>
次に以下のコードを記述します。
<script type="text/javascript>
$(function() {
$(window).bottom({proximity: 0.1});
$(window).on('bottom', function() {
// コンテンツの表示処理を記述
});
});
</script>
3行目のbottom()メソッドでは、オブジェクトにbottomイベントを登録しています。上記ではwindowオブジェクトに対してbottomイベントを登録しています。
また、オプションのproximityで、どの程度スクロールバーがページの最下部に接近したらbottomイベントを発生させるかを設定しています。数値が大きいほど最下部から離れた位置でイベントが起こります。
次にコンテンツの表示処理を記述します。
$(window).on('bottom', function() {
var obj = $(this);
if (!obj.data('loading')) {
obj.data('loading', true);
$('#image').html('<img src="loader.gif" />');
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#hoge").append(html);
$('#image').html('');
obj.data('loading', false);
}
});
}
});
このプラグインではスクロールを上下させたときにbottomイベントが何回も発生してしまうので、2~4行目で、重複させないための制御を行っています。
最初にイベントが発生した時点でobj.dataの「loading」をtrueにすることで次の重複イベントを処理しないようにします。
処理が完了したらobj.dataの「loading」をfalseにします。（12行目）
ローディング画像はイベントが発生した時点で表示させます。（5行目）
また、コンテンツの表示と同時に削除します。（11行目）
以上でjQuery.Bottomプラグインの導入は完了です。
2. Infinite Scroll
Infinite Scrollはページ下部にあるリンクをして続きを読み込むプラグインです。
サンプルページ
以下、導入方法です。
使い方
まず、使用したいページに以下のコードを記述してjquery.infinitescroll.jsを読み込みます。
（jqueryはgoogleのものを使用）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript" src="http://www.infinite-scroll.com/wp-content/plugins/infinite-scroll/jquery.infinitescroll.js"></script>
次に以下のコードを記述します。
<script>
$(function(){
$('#content').infinitescroll({
navSelector : "div.navigation",
nextSelector : "div.navigation a:last",
itemSelector : "#content div.post"
});
});
</script>
以下三項目の設定でとりあえず動作します。
4行目 navSelector: ページナビゲーションのセレクタ
5行目 nextSelector: ページナビゲーションの中で「次のページ」へのリンクのセレクタ
6行目 itemSelector: 繰り返したいを行いたいセレクタ
コンテンツの表示部分は以下のような感じです。
<div id="content">
<div class="post">繰り返したい要素</div>
</div>
<div class="navigation">
<a href="次のページへのリンク">もっとみる</a>
</div>
以上でjQuery.autopagerプラグインの導入は完了です。
3. jQuery.autopager
jQuery.autopagerは、自動で続きを表示とクリックで続きを表示を切り替えて使うことができます。
自動で続きを表示サンプル
クリックで続きを表示サンプル
以下、導入方法です。
ダウンロード
jQuery.autopagerはこちらのサイトからダウンロードできます。
使い方
まず、使用したいページに以下のコードを記述してjquery.autopager.jsを読み込みます。
（jqueryはgoogleのものを使用）
<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.autopager.js"></script>
クリックで続きを表示したい場合は以下のコードを記述します。
<script type="text/javascript">
$(function() {
$.autopager({
autoLoad: false
});
$('a[rel=next]').click(function() {
$.autopager('load');
return false;
});
});
</script>
4行目で自動読み込みを無効にして、6～8行目でクリック時に読み込みを行う設定をしています。
コンテンツの表示部分はこんな感じです。
<div class="content">
<p>ここにコンテンツが表示</p>
</div>
<a href="次のページへのリンク" rel="next">次のページ</a>
以上でjQuery.autopagerプラグインの導入は完了です。
今回はページの続きを自動的に表示するjQueryを3つ紹介させて頂きました。
また次回お会いしましょう。
