ページネーションのカスタマイズが簡単にできる！jPages.jsのオプション一覧

『動的コンテンツに対応したページネーション』を作成できるjPages.jsは、単純にページネーションを作成できるだけではありません。

たくさんのオプションが用意されているので、より理想のページネーションを簡単に作成することができます！

今回はそんなjPages.jsのオプションをいろいろ使ってみて、一覧にしてみました。

オプションの記述を何もしなかった場合はこんな感じ。

デフォルトでは1ページに10個のアイテムを表示する設定になっています。

See the Pen 1.defaults by とりとん (@darakerutoriton) on CodePen.

ページネーションのナビ部分をカスタマイズ

ページ戻りやページ送りするナビ部分のカスタマイズができるオプションです！

ナビの表示数

See the Pen 2.Pagination by とりとん (@darakerutoriton) on CodePen.

以下のオプションでページネーションの表示数をカスタマイズすることができます。

■ perPage…1ページに表示したいアイテム数を指定

■ startPage…ページを開いたとき最初に表示したいページ数を指定

■ startRange…常に表示しておきたい数を指定(前半部分)

■ midRange…一度に表示されるページネーションの数を指定

■ endRange…常に表示しておきたい数を指定(後半部分)

ナビの文字

See the Pen 4.customize buttons by とりとん (@darakerutoriton) on CodePen.

以下のオプションでページネーションの文字をカスタマイズすることができます。

■ first…最初のページへのリンク文字

■ previous…前のページへのリンク文字

■ next…次のページへのリンク文字

■ last…最後のページへのリンク文字

全ページ数・全個数を表示

See the Pen 12.Callback by とりとん (@darakerutoriton) on CodePen.

全てのページ数やアイテム数を取得して表示することができます。

■ callback : function( pages, items )…表示する文字も指定可能

数字以外のナビ

See the Pen 6.Blank Links by とりとん (@darakerutoriton) on CodePen.

■ links : “blank” …数字ではなくドットにすることができます。

1ページに表示するアイテム数を指定

See the Pen 3.Items Per Page by とりとん (@darakerutoriton) on CodePen.

ユーザー側でプルダウンメニューから表示するアイテム数を指定することができます。

■ HTML：<option>で指定できる表示数を設定

■ JS：perPageには初期値を設定

表示するページ数を指定

See the Pen 13.Jump to Page by とりとん (@darakerutoriton) on CodePen.

ユーザー側でプルダウンメニューから表示するアイテム数を指定することができます。

■ HTML：<input>のvalueに初期値を設定

ページネーションの方法をカスタマイズ

ナビ部分をクリックする以外の方法でページ戻り・ページ送りをすることができるオプションです！

ページ戻り・ページ送りのボタン

See the Pen 5.Custom Buttons by とりとん (@darakerutoriton) on CodePen.

以下のクラスにスタイルを記述、もしくはアップロードした画像を使用することもできます。

■ .arrowPrev…前へボタン

■ .arrowNext…次へボタン

■ .jp-disabled…選択不可の場合

方向キーでページネーション

See the Pen 8.Key Browse by とりとん (@darakerutoriton) on CodePen.

■ keyBrowse : true…キーボードの方向キーでページネーションできるようになります。

スクロールでページネーション

See the Pen 9.Scroll Browse by とりとん (@darakerutoriton) on CodePen.

■ scrollBrowse : true…マウスのスクロールでページネーションできるようになります。

自動でページ送り

See the Pen 10.Auto by とりとん (@darakerutoriton) on CodePen.

以下のオプションで自動的にページ送りすることができます。

■ clickStop : true…自動ページ送りを有効

■ pause : 2000…ページ送りの速度を指定

その他のオプション

上記以外のオプションを紹介します！

アイテム表示のアニメーション

See the Pen 11.Direction by とりとん (@darakerutoriton) on CodePen.

1つ1つのアイテムをどのように表示させるか指定することができます。

※プルダウンから選択できるので試してみてください！

■ delay : 50…次のアイテムをどのくらい遅らせて表示するかを指定

■ direction : “【以下のオプションを指定】”

⇒ forward：前から順番に表示

⇒ backwards：後ろから順番に表示

⇒ random：バラバラに表示

ページリンクとして利用

See the Pen 7.title links by とりとん (@darakerutoriton) on CodePen.

1ページずつの指定して上記のような使い方もできます。

■ perPage : 1…1ページに1アイテムと指定

■ links : “title”…ナビの文字を指定

まとめ

ご覧いただいた通り、jPagesのオプション結構あります。

しかも、JSにちょちょっとオプションの記述を追加するだけなので、

簡単に理想のページネーションが作成できそうですね～

上手に活用することで、画像のスライダーなんかも作ることができちゃいますよ！

当ブログは、コピペ用のコードを紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい！

試してみたけどできなかった・・

などの簡単な修正でしたらワンコインから受け付けていますので、TwitterのDMかお問い合わせフォームよりお気軽にご連絡ください＾＾