位置の設定

pager()のオプションでnavAttachを使ってナビゲーションの位置を指定することができます。navAttachで指定できるナビゲーションの位置は以下の表のものが指定できます。

prepend 表示領域内の上
append 表示領域内の下
before 表示領域外の上
after 表示領域外の下

サンプル04では以下のようにナビゲーションが表示領域内の上に来るように指定しています。

$("#longText").pager("div", {
            navAttach : "prepend",
            height:"13em",
            prevText : "前へ",
            nextText : "次へ",
            linkText : ["1ページ", "2ページ", "3ページ" ]
        });
});

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

【サンプル04】

<!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", {
                        navAttach : "prepend",
                        height:"13em",
                        prevText : "前へ",
                        nextText : "次へ",
                        linkText : ["1ページ", "2ページ", "3ページ" ]
                    });
                });
            // --></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>

pagerは手軽に長文テキスト/ページを分割し表示できるライブラリ(プラグイン)です。ページ内容が長過ぎて読みにくい場合などには導入を検討してみてはどうでしょうか。