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

JavaScript

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

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

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

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

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

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

※上記JSの【/以下jPages.jsの中身】より下に記述している部分は、jPages.jsの中身をそのまま記述しているだけなので、<head>~</head>内で読み込めば、記述する必要ありません!

jPages.jsのダウンロード方法や読み込み方などの基本的な使い方はこちらを参考にしてみてください⬇️

とりとん
とりとん

早速どんなオプションがあるのか確認してみよう!

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

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

ナビの表示数

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にちょちょっとオプションの記述を追加するだけなので、

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

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

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

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

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

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

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました