リンク文字の設定

pager()で指定できるオプションは他にもあります。ナビゲーションで表示されるテキストを指定することができます。prevTextが前へ戻るリンク文字、nextTextが次のページへ進むリンク、linkText配列がページ番号として表示されるテキストになります。サンプル03では以下のように、リンク文字を書き換えています。

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

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

【サンプル03】

<!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:"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>