どうも徐福です。
Twitterのように「ページ遷移をせず、コンテンツをどんどん継ぎ足し表示したい」
という時ってありますよね。
Twitter以外では、ブラウザ拡張機能の『AutoPagerize』のようなイメージでしょうか。
こんな時はjQuery.autopagerを使うと手軽に実装できちゃいます。
今回はこちらをスマホサイトで使ってみました。
使い方は簡単です。
まずはコチラからjQuery.autopagerをダウンロードし、読み込んでください。
基本的には下記のような記述だけで動いてくれます。
<script type="text/javascript">
$(function() {
$.autopager();
});
</script>
<div class="content">
<div>
<a href="http://sample.hogehoge.co.jp/a">コンテンツA</a>
</div>
<div>
<a href="http://sample.hogehoge.co.jp/a">コンテンツB</a>
</div>
<div>
<a href="http://sample.hogehoge.co.jp/a">コンテンツC</a>
</div>
</div>
<a href="{次ページのURL}" rel="next">次のページ / Next</a>
～ポイント～
①継ぎ足し表示したい範囲を『<div class=”content”></div>』で囲む
②次ページへのリンクが記載されたaタグに『rel=”next”』を追加
基本的にはこれだけです。
これで、ページをスクロールする度に、
次ページの『<div class=”content”></div>』で囲んだ範囲がどんどん継ぎ足されていきます。
また「スクロールではなく、リンクをタッチしたときに継ぎ足すようにしたい」という時は、
上記のjavascript部分の記述を、
<script type="text/javascript">
$(function() {
$.autopager({
autoLoad: false
});
$('a[rel=next]').click(function() {
$.autopager('load');
return false;
});
});
</script>
と変えれば、次ページへのリンクをタッチした時に読み込みが始まります。
スマホの機種やブラウザの種類によっては、
スクロールイベントが上手く取れないこともあるので、
こちらの方法のほうが無難かと思います。
Twitterのスマホサイトなんかでもタッチ式になっていますね。
また、読み込み開始時や読み込み終了時などのイベントのコールバック関数を
オプションで設定することができるので、それを利用して
このような『読み込み中画像』が出るようにすれば、より雰囲気が出ると思います。
例えば、
<script type="text/javascript">
$(function() {
$.autopager({
autoLoad: false,
//読み込み開始時のコールバック関数を設定
start: function(current, next) {
document.getElementById("loading").style.display = "block";
document.getElementById("autoPage").style.display = "none";
},
//読み込み終了時のコールバック関数を設定
load: function(current, next) {
document.getElementById("loading").style.display = "none";
document.getElementById("autoPage").style.display = "block";
}
});
$('a[rel=next]').click(function() {
$.autopager('load');
return false;
});
});
</script>
と記述し、
<a id="autoPage" href="{次ページのURL}" rel="next">次のコンテンツを読み込む</a>
<img id="loading" src="/image/loading.gif" style="display:none;">
次ページヘのリンク部分をこのように書けば、
リンクをタッチした際に、読み込み中画像が表示されるようになります。
さて、こちらの『jQuery.autopager』、実際にスマホで動作をチェックすると。。。
きちんと動きました！
今回は読み込み中画像を表示させてみましたが、
コールバック関数の設定以外にもいくつかオプションが用意されているので、
色々応用が効きそうです。
ぜひ使ってみてくださいね！
