wordpressでAJAXで次ページを読み込む「jQuery.autopager」
まずは、jQuery.autopagerをダウンロード。
基本的には
<script type="text/JavaScript"> $(function(){ $.autopager({ content : '.content', // ロードしたいコンテンツ部分のセレクタ link : '#next' // 次ページへのリンクのセレクタ }); }); </script>
ボタンで読み込むには
<script type="text/JavaScript"> $(function(){ $.autopager({ content : '.content', // ロードしたいコンテンツ部分のセレクタ link : '#next', // 次ページへのリンクのセレクタ autoLoad: false, // スクロールで自動読込みするどうか load : function(){ // 読み込み完了後に発生するイベント // "this"は読み込んだコンテンツ要素を指す $(this).before('<hr/>'); // 左記は例(読み込んだヤツの前に区切り線を追加)) } }); $('#next').click(function(){ // 次ページへのリンクボタンが押されたら $.autopager('load'); // loadしやがれぃ! return false; }); }); </script>
さらに、最後読み込んだ後ボタンを消すにはload部分を下記に変える
load: function(current, next){
if( current.page >= max_num_pages; ?> ){
$(‘#next’).hide();
}
}