jQueryでページ分割ができる「SimplePaginationプラグイン」

jQueryでページ分割ができる「SimplePaginationプラグイン」

Posted at December 17,2014 1:33 AM
Tag:[jQuery, Plugin]

jQueryでページ分割ができる「SimplePaginationプラグイン」の紹介です。

1.はじめに

ページ分割の手法は色々ありますが、このエントリーで紹介するプラグインを利用することで簡単にページ分割を行うことができます。

が、配布サイトの説明だけで実現するのはかなり困難で、このエントリーでとりあえず動作するレベルのものを紹介したいと思います。

2.プラグインのダウンロード

SimplePaginationプラグインのページにアクセスし、Downloadにある「here」をクリックしてアーカイブをダウンロードします。

Download

ダウンロードしたアーカイブを展開し、中にある、

  • jquery.simplePagination.js
  • simplePagination.css

を利用します。

3.基本

ページ分割用のテキストを用意します。ここではサンプルとして8ページ分用意します。

<div class="selection" id="page-1">1ページ</div>
<div class="selection" id="page-2">2ページ</div>
<div class="selection" id="page-3">3ページ</div>
<div class="selection" id="page-4">4ページ</div>
<div class="selection" id="page-5">5ページ</div>
<div class="selection" id="page-6">6ページ</div>
<div class="selection" id="page-7">7ページ</div>
<div class="selection" id="page-8">8ページ</div>

ページネーション用のHTMLを用意します。

<div class="pagination-holder clearfix">
    <div id="light-pagination" class="pagination"></div>
</div>

CSS、jQueryとプラグインを読み込みます。

<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>

スクリプトは次のようにします。

<script>
$(function(){
    $(".pagination").pagination({
        items: 8,
        displayedPages: 1,
        cssStyle: 'light-theme',
        onPageClick: function(currentPageNumber){
            showPage(currentPageNumber);
        }
    })
});
function showPage(currentPageNumber){
    var page="#page-" + currentPageNumber;
    $('.selection').hide();
    $(page).show();
} 
</script>

pagination()の直前で指定するセレクタはページ分割するテキストのセレクタではなく、ページネーションのセレクタです。

オプションの意味は次の通りです。

  • items: ページ数
  • displayedPages: ページネーションに表示するページの数(最低3)
  • cssStyle: ページネーションのスタイル
  • onPageClick: ページ切り替え時のイベント

また、CSSで1ページ目のみを表示する次の設定が必要です。

<style>
.selection {
    display: none;
}
#page-1 {
    display: block;
}
</style>

すべてをまとめたコードは次のとおりです。

<style>
.selection {
    display: none;
}
#page-1 {
    display: block;
}
</style>
<link type="text/css" rel="stylesheet" href="simplePagination.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simplePagination.js"></script>
<script>
$(function(){
    $(".pagination").pagination({
        items: 8,
        displayedPages: 4,
        cssStyle: 'light-theme',
        onPageClick: function(currentPageNumber){
            showPage(currentPageNumber);
        }
    })
});
function showPage(currentPageNumber){
    var page="#page-" + currentPageNumber;
    $('.selection').hide();
    $(page).show();
} 
</script>
<div class="selection" id="page-1">1ページ</div>
<div class="selection" id="page-2">2ページ</div>
<div class="selection" id="page-3">3ページ</div>
<div class="selection" id="page-4">4ページ</div>
<div class="selection" id="page-5">5ページ</div>
<div class="selection" id="page-6">6ページ</div>
<div class="selection" id="page-7">7ページ</div>
<div class="selection" id="page-8">8ページ</div>
<div class="pagination-holder clearfix">
    <div id="light-pagination" class="pagination"></div>
</div>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)