ナビゲーションの設定

pagerはオプションを指定することでナビゲーションの位置等を変更することができます。サンプル01では表示領域が狭くナビゲーションがテキストの直下に表示されています。もう少し余白を増やしたい、表示領域を広くしたい場合にはpager()の2番目のパラメータにheightを指定します。サンプル02では以下のように12emの高さ（全体で）になるように指定しています。また、ナビゲーションは自動的に表示領域の下側に設置されます。このため特にスタイルシートでナビゲーションの座標を設定する必要はありません。

$("#longText").pager("div", { height:"12em" });

「サンプル02の実行結果」

【サンプル02】

<!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", { height:"12em" });
                });
            // --></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>