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();
}
}

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress