« CSS3で作る 下からスライドしてくるボックス | トップページ | 3方向を囲まれた箱をCSS3を利用して記述する方法 »

2010年12月 6日 (月)

jQueryでページネーションを実現するプラグイン

Pagination_2

今回はページが長くなったときに分割するページネーションを制作するjQueryのプラグイン「jQuery pager plug-in」を紹介します。

デモページ

設定方法は

使用するリソース
jquery.js
jquery.pager.js

オプションの設定
オプションの設定はmetaタグ内に記述します。
<script type="text/javascript">
$('#example').pager('p', {
navId: 'nav',
prevText: '«',
nextText: '»',
linkText: [1', '2', '3', '4', '5'],
});
</script>

navId:htmlファイル内に2つ以上のページネーションを使いたいときに個別のID名をつけ区別するために使われます。
prevText nextText:前の項目へまたは次の項目へ移動させたい時の表示させるテキストを記述します。sampleでは「«」「»」となっております。
linkText:各項目のタイトルを指定します。項目間は「,」で区切ります。デフォルトの設定では、数字になります。

htmlへの記述
ページネーションさせたい部分にオプションで指定した id を記述します。
分割させたい内容はpタグで指定します。

<div id="example" class="pager_examples">
<p>分割内容</p>
<p>分割内容</p>
<p>分割内容</p>
<p>分割内容</p>
</div>

|

« CSS3で作る 下からスライドしてくるボックス | トップページ | 3方向を囲まれた箱をCSS3を利用して記述する方法 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/38375870

この記事へのトラックバック一覧です: jQueryでページネーションを実現するプラグイン:

« CSS3で作る 下からスライドしてくるボックス | トップページ | 3方向を囲まれた箱をCSS3を利用して記述する方法 »