JQueryで「もっと見る」を簡単に実装

By | 2015/04/28

「もっと見る」を実現するjavascriptコードはいくつかありますが、一番使えると思ったのが、JQuery.autopagerです。

導入方法など、詳しくはこちらの記事を参考にしてください。
http://wispyon.com/jquery-autopager/

このプラグインの何が良いかというと、
「次ページへ」というリンクでページングしているプログラムなら、抽出編集プログラム側を全く手直しせずに、次ページへのリンクタグを置き換える形でAjaxの「もっと見る」を簡単に実装する事ができるのです。

仕組みはメインとなる一覧部分全体をdivで囲ってどこが一覧データなのかを明確にしておき、「次ページへ」のリンクタグをパラメータに指定してあげると、次ページへのAタグのhrefを抜き出して、次ページのHTMLをAjaxで読み込んできて、上記の一覧部分のDIVタグの中身を現在表示している一覧の下に追加します。

既に動作している「次ページへ」のアンカーをそのまま利用して、既存の次ページへタグ自体は非表示にして置き換えるという至れり尽くせりな仕様です。

スクリプト自体は配布終了しているようですが、プログラム側の処理ロジックを変えずインターフェースを差替えられる物は他に見当たらないので是非今後とも使っていきたいです。

最近は jquery.infinitescroll というのが人気なようですが、そちらはうまく動かせない人も要るようなので要注意ですね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です