｜ ｜ ｜ ｜

ページが長くなる時に分割表示できるとユーザーフレンドリーになります。
また同時にページネーションとかページングと呼ばれるものを付るとより一層好ましいです。
これらすべてを自動で行ってくれる「Jquery Paginator」を紹介します。

使用方法
Plugins | jQuery Pluginsからpaginator.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="paginator.js"></script>
<script type='text/javascript'>
$(function() {
itemsPerPage = 3; //指定要素内の区切り数
paginatorStyle = 4; ページネーションのスタイル（from1-4）
paginatorPosition = 'both'; //ページネーションの配置（bottom,top）
enableGoToPage = true; //指定ページに飛べるようにするか（false）
$("#id名").pagination();
});
</script>

あとはページネーションを記述します。
<div id="id名">
<p>テキスト</p>
<p>テキスト</p>
<!-- 以下要素分 -->
</div>

自動でページネーションを付与できるJavaScript「JQuery Pagination Plugin 」サンプル

記事作成：2010年01月13日