【ハウツー】ゼロからはじめるpager - Web文章をらくらく分割してみよう (5) ナビゲーションの設定(位置の設定) | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

ゼロからはじめるpager - Web文章をらくらく分割してみよう

5 ナビゲーションの設定(位置の設定)

古籏一浩　 [2007/06/19]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- ／5

位置の設定

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