WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： プログラム >JavaScript

タブ切り替えを制作するときに記事が多くなってしまってページネーションを実装したいけど方法がわからない！そう思っている方はいませんか？
今回はjquery tabpagerというjQueryプラグインを使って、簡単にタブ内でページネーションを実装する方法をご紹介します！

jquery tabpagerについて

jquery tabpagerとはタブ切り替えとタブ内でページネーションをAjaxなしで実装することができるプラグインとなっています。
こちらを導入することで、タブ内の記事の数が多すぎてサイトが見にくいといった問題を解決することができます。

それでは、jquery tabpagerの使い方を紹介していきたいと思います。

1.GitHubからダウンロードする

このプラグインの制作者様がGitHubにDEMOデータを用意してくださっているため、こちらからダウンロードをして制作することをお勧めします。GitHubURLは下記となります。

ダウンロードはこちら

2.オプションについて

オプションを変更することで、カスタマイズすることができます。
主な変更箇所は下記の8つとなります。

• items
• contents
• time
• previous
• next
• start
• position
• scroll

items

itemsの数値を変更することで表示する記事などの数を変更することが可能です。数を減らすとその分ページネーションの数が増えていきます。初期値は5となっています。

itemsが5の場合

itemsが3の場合

contents

こちらはコンテンツのクラス名となっています。適切な名前に変更して制作をしてください。初期値は、contentsとなっています。

time

timeは、ページ切り替え時のフェードイン時間となっています。初期値は300になっています。削除しても初期値で動きますので、必要のない場合は数値を0にしてください。

previousとnext

こちらの二つは、前後のページに遷移するナビゲーションのテキストです。

※注意点としては、ナビゲーションの箇所のデザインが複雑すぎると実現できない可能性があります。
実際に使用する場合は、先に制作をしてデザインが実現可能か確認しておきしょう！

start

ページを開いたときに一番最初に表示されるDEMOの黄色のタブの位置を変更することができます。初期値は1です。

startが1の場合

startが3の場合

position

ページネーションの表示位置を指定することができます。指定できるのは、[top]と[bottom]の2つです。初期値はtopですが、bottomの方が使うことが多いかと思いますので、基本的に変更が必要です。

positionがtopの場合

positionがbottomの場合

scroll

スクロール位置を保持するかどうかを指定することができます。[true]か[false]で指定することができます。初期値はtrueとなっています。

3.デザイン・コーディング

オプションの変更ができたらCSSを変更してデザインに近づけていってください。Contents名と構造に気を付けてコーディングをしていけば、問題はないかと思います。

まとめ

今回はjquery tabpagerというプラグインを使ってタブ内でページネーションを簡単に実装する方法を紹介しました。
ぜひ活用してみてください。