<li>で構成されたリスト要素を、任意で指定した数で区切って、
改ページの要領で分割してコントロールすることが出来るjQueryプラグイン「Easy Paginate」が
シンプルで使いやすそうだったのでご紹介。

Easy Paginate


Easy Paginate – jQuery plugin for pagination | Css Globe

デモは3パターン用意されています。


Easy Paginate – simple demo


Easy Paginate – styled demo


Easy Paginate – Auto pagination

HTML側で数多くのリスト<li>がある場合に

<ul id="items">
	<li>Page 1</li>
	<li>Page 2</li>
	<li>Page 3</li>
	<li>Page 4</li>
	<li>Page 5</li>
	<li>Page 6</li>
	<li>Page 7</li>
	<li>Page 8</li>
	<li>Page 9</li>
	<li>Page 10</li>
	<li>Page 11</li>
	<li>Page 12</li>
	<li>Page 13</li>
	<li>Page 14</li>
</ul>

「Easy Paginate」プラグインファイルを読み込んで
下記の様にスクリプトを実行させるだけで
簡単にリストをページ分割することが出来ます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/easypaginate.js"></script>
jQuery(function($){
	$('ul#items').easyPaginate({
		step:3
	});
}); 

オプションで指定している「step」の値を変化させることで
分割する際のリストの数を指定できます。
(その他のオプションも有り)

全体がとてもシンプルに構成されているので
いろいろ応用できそうなプラグインです。

リストの分割が必要な際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

リストを簡単にページ分割できるjQueryプラグイン「Easy Paginate」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR