[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages
Post on:2012年4月13日
sponsorsr
画像やテキストなど、HTMLのさまざまな要素をページネーションのコンテンツにするjQueryのプラグインを紹介します。
[ad#ad-2]
jPagesのデモ
デモは数多くあり、まずはデフォルトのシンプルなものから紹介します。
リスト要素で実装した画像をページネーションコンテンツにします。
1ページに表示するアイテム数を調整できます。
前へ・次へのボタンをカスタマイズできます。
リンクは数字だけでなく、ちょっとおしゃれな感じにも。
リンクをテキストにすると、タブ風にも。
表示する際のアニメーションを豊富に用意されています。
アニメーションのエフェクトを適用する際の順番も指定できます。
[ad#ad-2]
以下は、コンテンツのデモです。
グリッドに並べた画像がモザイク状のアニメーションで表示されます。
アローのナビゲーションだけにすると、ギャラリーにもなります。
テーブルのコンテンツをページネーションにすることもできます。
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>
詳しい実装方法は、下記のドキュメントをご覧ください。
sponsors
