[JS]用途にあったページネーションが実装できるスクリプト -Pajinate
Post on:2010年5月17日
sponsors
長いリストやコンテンツに表示を小分けにするページネーションを簡単に適用できるスクリプトをThe Silver Liningから紹介します。
Pajinate – A jQuery Pagination Plugin
デモページでは多種多様なページネーションのデモが数多く紹介されています。
ノーマル
リストのサイズをカスタマイズ
ページネーションを天地に
スタートをカスタマイズ
リストをミックス
ラベルをカスタマイズ
サブセットをカスタマイズ
Pajinateの実装
実装は簡単です。
既存のリスト要素が下記のように実装されているとします。
HTML（既存）
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <ul class="content"> <li>One</li> ... <li>Eight</li> <ul> </textarea> |
全体を囲むdiv要素とページネーション用のdiv要素を追加します。
HTML（変更）
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
スクリプトはjQueryとPajinateを外部ファイルとして指定し、下記のスクリプトを記述します。
JavaScript
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="js" cols="60" rows="5"> <script> $(document).ready(function(){ $('#paging_container1').pajinate(); }); </script> </textarea> |
スクリプトのオプションではdiv要素やul要素のクラス名の変更、スタートページ、ラベルの名称などが変更できます。
sponsors
