« ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery | トップページ | jQuery 1.6 がリリースされました。 »

2011年5月 2日 (月)

リスト化したページネーションを表示してくれるプラグイン 「Pagination」 #jQuery

Pagination

リスト化したページネーションを表示してくれるプラグイン「Pagination」の導入方法をご紹介します。

デモページ

使用するリソース
jQuery
jquery.pagination.js
pagination.css (ナビゲーションのデザインファイル)


head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.pagination.js"></script>
<script type="text/javascript">
    function pageselectCallback(page_index, jq){
      var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
      $('#Searchresult').empty().append(new_content);
      return false;
    }
    function initPagination() {
        var num_entries = jQuery('#hiddenresult div.result').length;
        $("#Pagination").pagination(num_entries, {
            callback: pageselectCallback,
            items_per_page:1,
            (オプション設定はここに記述します。)
        });
    }
    $(document).ready(function(){
        initPagination();
    });
</script>

<link type="text/css" rel="stylesheet" href="フォルダ名/pagination.css"/>


htmlへの記述方法(例)
<div id="hiddenresult" style="display:none;">
    <div class="result">
        <p>項目1</p>
    </div>
    <div class="result">
        <p>項目2</p>
    </div>
    <div class="result">
        <p>項目3</p>
    </div>
</div>

<div class="result"></div>で囲まれた部分がリスト化されます。


オプションの設定
head内の(オプション設定はここに記述します)部分にオプションの設定を記述します。
記述方法
オプション名:値,

記述例
next_text:"次の項目へ",
prev_text:"前の項目へ",
num_display_entries:5,
num_edge_entries:1,
ellipse_text:"・・",

Pagination2

オプション名 解説
current_page 数値 ページネーションで表示させるリストの初期値を決めます。
リストの1番目を表示したいときは0と記述します。
num_display_entries 数値 表示するリスト数を決めます。
next_text 文字列 [next]部分のテキストを変更します。
日本語を利用する場合は["]で囲みます。例 ["次の項目へ"]
prev_text 文字列 [prev]部分のテキストを変更します。
日本語を利用する場合は["]で囲みます。例 ["前の項目へ"]
num_edge_entries 数値 リストの項目が多く全リストが見えない時に両端に表示するリストの数を指定できます。
デフォルトは[0]で、表示させていません。
ellipse_text 文字列 num_edge_entriesにて設定したときの両端に表示するリストと中央に表示されるリストの間に表示される文字を指定できます。デフォルトは[...]です。
日本語を利用する場合は["]で囲みます。
next_show_always 真偽 [next]部分を表示させるか設定します。
デフォルトは[true]で表示させています。[false]で非表示となります。
prev_show_always 真偽 [prev]部分を表示させるか設定します。
デフォルトは[true]で表示させています。[false]で非表示となります。

|

« ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery | トップページ | jQuery 1.6 がリリースされました。 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39809469

この記事へのトラックバック一覧です: リスト化したページネーションを表示してくれるプラグイン 「Pagination」 #jQuery:

« ソースコードをハイライトで表示してくれる「syntaxhighlighter 3.0.83」 #jQuery | トップページ | jQuery 1.6 がリリースされました。 »