ページを指定要素で分割するjavascript「pager」

ページを作成する際にどうしても長文になってしまうことがあります。
しかし、内容自体は繋がっているので、なるべくなら単一ページに収めたい。。。
そんな我が儘をpager jQuery plug-inは、ページを指定要素で分割し、解決してくれます。

使用方法
pager jQuery plug-inからpager.jsを、jQueryからjquery.jsをダウンロードします。
あとは以下のようにhead内に記述します。
<script src="http://yourdomian/jquery.js" type="text/javascript"></script>
<script src="http://yourdomian/jquery.pager.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#id名').pager('分割する要素', {
navId: 'nav', //ナビゲーションに付与するid
height: '12em', //ページの高さ
prevText: 'Previous', //前ページのリンク文字
nextText: 'Next', //後ページのリンク文字
linkText: ['Page 1', 'Page 2', 'Page 3', 'Page 4'] //ページごとのリンク文字
});
});
</script>
そして、id名で括ったコンテンツを分割したい位置で、上記で指定した要素で囲めば完成です。
<div id="id名">
<分割する要素> コンテンツ</分割する要素>
</div>
ページを指定要素で分割するjavascript「pager」サンプル

2007年10月26日

前の記事：高機能グラフ作成javascript「Emprise JavaScript Charts」
次の記事：Movable Typeで既存コメントを簡単に引用できるプラグイン「Quote」

関連記事

• [jQuery]Sifr
• [jQuery]highlight
• テキストを複製できなくするjavascript「jQuery Disable Text Select Plugin」
• テキストファイルをClient Side Includeできるjavascript「inc」
• テキストにグラデーションをかけるjavascript「Textgrad」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」