小粋空間  -  a cheap joke and a play on words site

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

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

１．はじめに

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

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

２．プラグインのダウンロード

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

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

• jquery.simplePagination.js
• simplePagination.css

を利用します。

３．基本

ページ分割用のテキストを用意します。ここではサンプルとして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>