[JS]用途にあったページネーションが実装できるスクリプト -Pajinate

サイト構築 -JavaScript

Post on:2010年5月17日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

長いリストやコンテンツに表示を小分けにするページネーションを簡単に適用できるスクリプトをThe Silver Liningから紹介します。

Pajinate – A jQuery Pagination Plugin

デモページでは多種多様なページネーションのデモが数多く紹介されています。

デモページ

ノーマル

リストのサイズをカスタマイズ

ページネーションを天地に

スタートをカスタマイズ

リストをミックス

ラベルをカスタマイズ

サブセットをカスタマイズ

Pajinateの実装

実装は簡単です。
既存のリスト要素が下記のように実装されているとします。

HTML（既存）

<textarea name="code" class="html" cols="60" rows="5">
<ul class="content">
	<li>One</li>
	...
	<li>Eight</li>
<ul>
</textarea>

...

<li>Eight</li>

<ul>

</textarea>

全体を囲むdiv要素とページネーション用のdiv要素を追加します。

HTML（変更）

<textarea name="code" class="html" cols="60" rows="5">
<div id="page_container">
	<div class="page_navigation"></div>
	<ul class="content">
		<li>One</li>
		...
		<li>Eight</li>
	</ul>
</div>
</textarea>

...

<li>Eight</li>

</ul>

</div>

</textarea>

スクリプトはjQueryとPajinateを外部ファイルとして指定し、下記のスクリプトを記述します。

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
<script>

  $(document).ready(function(){
    $('#paging_container1').pajinate();
  });

</script>
</textarea>