pagerを使う
pagerを使うにはjQueryライブラリとpagerライブラリを読み込ませます。これは<script>タグを使い以下のように記述します。読み込ませる順番を間違えると動作しないので注意してください。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pager.js"></script>
pagerでは長文を区切ってページ単位で表示します。pagerで分割される領域は<div>タグで指定します。この<div>タグにはID名を指定しておきます。このID名をキーにしてページ分割が行われます。
<div>タグで囲まれた領域に<div>タグや<p>タグなどページ単位で分割したいテキストや画像を記述します。サンプル01では以下のように<div>タグで区切って記述します。
<div id="longText">
<div>1ページ目</div>
<div>2ページ目</div>
<div>3ページ目</div>
</div>
これでHTMLタグの設定は終了です。あとは、ページ単位に分割されるようにプログラムを呼び出します。サンプル01では分割領域の<div>タグのID名がlongTextなのでpager()のパラメータに"longText"を指定します。
$(function(){
$("#longText").pager("div");
});
jQueryに馴染みのない方が多いと思いますので簡単に処理を説明します。jQueryでは$(function(){処理})と記述するとページ内容が読み込まれた後に指定された処理を行います。一般的な記述であれば以下のようにwindow.onloadを使ったものに近いものになります。
window.onload = function(){
$("#longText").pager("div");
}
サンプル01ではページが読み込まれたら$("#longText").pager("div");の処理を実行しています。$()は指定されたページ上のオブジェクトを参照します。jQueryでは#ID名を$()のパラメータとして指定することでオブジェクトを指し示すことができます(*1)。このオブジェクトに対してpager()でページ分割を行います。pager()の最初のパラメータに分割したいタグ名を記述します。サンプル01では<div>タグが区切りになっているのでpager("div")と指定しています。
サンプル01を実行すると自動的にページ番号とナビゲーションが付加されます。このナビゲーションのスタイルは標準では設定されていないのでスタイルシートで以下のように指定しておく必要があります。
.nav { background: #eee; border-top: 1px solid #ccc; padding: 5px; }
.nav a { padding: 0 5px; }
.nav a.highlight { color: #000; font-weight: bold; }
*1 prototype.jsであれば$("longText")と同じになります。一般的な指定方法ではdocument.getElementById("longText")が最も近いものになります。
 |
 |
サンプル1の実行結果 |
ページ番号をクリックすると区切られたページへ |
【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pager.js"></script>
<script type="text/javascript"><!--
$(function(){
$("#longText").pager("div");
});
// --></script>
<style type="text/css"><!--
#longText {
width:400px;
height:auto;
border:1px solid gray;
}
.nav { background: #eee; border-top: 1px solid #ccc; padding: 5px; }
.nav a { padding: 0 5px; }
.nav a.highlight { color: #000; font-weight: bold; }
// --></style>
<title>Pager サンプル</title>
</head>
<body>
<h1>Pager サンプル</h1>
<div id="longText">
<div><p>
ここは最初の部分になります。とにかく文章が長い場合に、このPagerは便利です。Pageを使えば文章の途中で分割して表示させることができるためです。
</p></div>
<div><p>
おまけに、行数や字数で区切られるのではなく区切られる場所を指定することができるので、思わぬところで区切られてしまうことがありません。
</p></div>
<div><p>
このPageを使うにはjQueryライブラリが必要です。Pagerライブラリは非常にコンパクトなライブラリなので、いろいろな場面で利用できるのではないでしょうか。
</p></div>
</div>
</body>
</html>
