[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages

画像やテキストなど、HTMLのさまざまな要素をページネーションのコンテンツにするjQueryのプラグインを紹介します。

jPages

[ad#ad-2]

• jPagesのデモ
• jPagesの使い方

jPagesのデモ

デモは数多くあり、まずはデフォルトのシンプルなものから紹介します。

Example: Defaults

リスト要素で実装した画像をページネーションコンテンツにします。

Example: item per page

1ページに表示するアイテム数を調整できます。

Example: Custom Buttons

前へ・次へのボタンをカスタマイズできます。

Example: blank links

リンクは数字だけでなく、ちょっとおしゃれな感じにも。

Example: Title Link

リンクをテキストにすると、タブ風にも。

Example: CSS Animation

表示する際のアニメーションを豊富に用意されています。

Example: Direction

アニメーションのエフェクトを適用する際の順番も指定できます。

[ad#ad-2]

以下は、コンテンツのデモです。

Mosaic

グリッドに並べた画像がモザイク状のアニメーションで表示されます。

Gallery

アローのナビゲーションだけにすると、ギャラリーにもなります。

Table

テーブルのコンテンツをページネーションにすることもできます。

jPagesの使い方

外部ファイル

スタイルシートとスクリプトを外部ファイルとして記述します。

<link rel="stylesheet" href="css/jPages.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>

アニメーションのエフェクトを使用する場合は、「animate.css」も記述します。

<link rel="stylesheet" href="css/animate.css">

HTML

デフォルトのHTMLの例です。
ページネーション用のdiv要素と各アイテムをリスト要素で実装します。
※各アイテムはul要素である必要はありません。

<!-- Future navigation panel -->
<div class="holder"></div>

<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
    <!-- Items -->
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    ...
</ul>

JavaScript

jQueryのセレクタで指定し、スクリプトを実行します。

$(function(){

    $("div.holder").jPages({
        containerID : "itemContainer"
    });
    
});

スクリプトを実行すると、「div.holder」は下記のようなコードになります。

<!-- navigation panel -->
<div class="holder">
    <a class="jp-previous jp-disabled">← previous</a>
    <a class="jp-current">1</a>
    <span class="jp-hidden">...</span>
    <a>2</a>
    <a>3</a>
    <a>4</a>
    <a>5</a>
    <a class="jp-hidden">6</a>
    <a class="jp-hidden">7</a>
    <a class="jp-hidden">8</a>
    <a class="jp-hidden">9</a>
    <span>...</span>
    <a>10</a>
    <a class="jp-next">next →</a>
</div>

詳しい実装方法は、下記のドキュメントをご覧ください。

• jPages: documentation