ページ内にニュースや画像など、たくさんのリスト要素を表示する際に
ページネーションを使ってリストを決められた数で分割して表示する方法はよくありますが
それをjQueryで簡単に実装することができるプラグイン「jPages」が
とても便利で活用できそうだったのでご紹介。

jPages


jPages

jQueryファイルとjPagesプラグインファイルを読み込んだ後に

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

と実行用スクリプトを記述して対象のリストを分割させます。

実行後のデモサンプル画面はこちら。


jPages DEMO | Defaults

プラグインページのデモでは通常のページネーションだけでなく、
プルダウンでページ指定するものからカルーセル状の物、
タブ状の物やキーボードから操作を可能とするものなどなど
いろいろな場面で活用できるたくさんのサンプルが用意されています。

CSS3アニメーションやjQueryアニメーションを使って
見た目を演出するオプションも用意されており
このプラグイン1つで様々なUIを簡単に実装することができそうです。

サイト上でページネーションを必要としたUIが必要になった際にぜひ。