Tool & Snippet

WEB系/3DCG・映像系に関すること

jQuery ページネーション・ページング 2種類のプラグインをカスタマイズ(表示位置を改良)

プラグインの仕様を少し変更したいと思ったので、改修した箇所のメモです。

プラグイン:Pajinate

jquery.pajinate.js - version 0.4
配布元:
http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
デモ:
http://dl.dropboxusercontent.com/u/4151695/html/pajinate/examples/example1.html

実装:

CODE:
HTML:
<div id="section">
	<ul class="content">
		<li>1件</li>
		<li>2件</li>
		<li>3件</li>
	</ul>
	<div class="page_navigation">(ナビゲーションの位置)</div>
</div>


JS:
jQuery('#listSection').pajinate({
	nav_label_prev: '前へ',	//初期値 Prev
	nav_label_next: '次へ',	//初期値 Next
	items_per_page : 40,	//表示件数-初期値 10件
	show_first_last: false	//最初へ・最後へのリンク 非表示
});

カスタマイズ:

1. 縦長のコンテンツでページ切り替えした場合、画面の位置は変わらないので、ページ上部に移動したい。

CODE:

ファンクションgotopageの最後に ID=main の要素へ表示位置を変更する処理を追加

//line212:
function gotopage(page_num){

	//最後に追記
	var target = $("#main");
	if(target.size()){ 
		var top = target.offset().top;
		$(jQuery.browser.safari ? 'body' : 'html').scrollTop(top);
	}

}

プラグイン:jPaginate

jPaginate.js - Version 0.3
配布元:
http://vanity.enavu.com/download/
デモ:
http://vanity.enavu.com/demo/jPaginate/jPaginate.html

実装:

デフォルト記述。

CODE:
HTML:
<ul id="content">
	<li>1件</li>
	<li>2件</li>
	<li>3件</li>
</ul>


JS:
jQuery("#content").jPaginate();

カスタマイズ:

1. 縦長のコンテンツでページ切り替えした場合、画面の位置は変わらないので、ページ上部に移動したい。

CODE:

ファンクションの最後に ID=main の要素へ表示位置を変更する処理を追加

//line176:
$(".goto").live("click", function(e){
	//ファンクション内の最後に追記
	toTop();
});
//line183:
$(".goto_next").live("click", function(e) {
	//ファンクション内の最後に追記
	toTop();
});
//line192:
$(".goto_previous").live("click", function(e) {
	//ファンクション内の最後に追記
	toTop();
});


//174行目にファンクションを追加
function toTop(){
	var target = $("#main");
	if(target.size()){ 
		var top = target.offset().top;
		$(jQuery.browser.safari ? 'body' : 'html').animate({scrollTop:top}, 800, 'swing');
	}

}


行数は変わっている可能性があります。
参考になれば幸いです。