どこかで使うかもと思ったので備忘録。JQM
にシンプルなページ送りを実装出来る、という
jQueryプラグイン。実装もとても簡単なので
覚えておいて損は無さそうです。ちょっと問題
になっていたXSSの問題も一応は解決したの
でそろそろ実践に向けてスキルを磨きたいとこ
ろですね。

シンプルなページネーションです。普通に使ってたらいらないでしょうけど、コンテンツの中にギャラリーかなんかを作る予定があるときは重宝するかも。導入も簡単で手軽なのはなかなか魅力です。フリックで送れれば尚良かったんですけどね・・

jQuery Mobile Pagination Plugin

ちょっと分かりにくいですけど、うっすらとページ送りが両脇に追加されています。ここにリンク先を指定する、みたいな感じ。ページ推移は普通にAjaxが使われます。

以下サンプルご用意しました。

サンプル

iPhoneなどのスマフォないよ、という方は以下のmobilizerを使ってのスクリーンキャストをご覧下さい。実機とは結構動きが違ってしまってるので参考程度で・・

動きそのものには問題ありませんが、実機ではheaderのfixed要素と相性悪い気もしました。やっぱりギャラリー向けですかね。

コード

	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
	<link rel="stylesheet" href="./jquery.mobile.pagination.css">

	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
	<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
	<script src="./jquery.mobile.pagination.js"></script>

上記例ではcssもCDNを使うことを想定しています。普通にプラグインを読み込んで下さい。

あとはマークアップすればいいだけです。

<div data-role="page" data-theme="d"> 
	<ul data-role="pagination">
		<li class="ui-pagination-prev"><a href="7.html">Prev</a></li>
		<li class="ui-pagination-next"><a href="2.html">Next</a></li>
	</ul>
　　　　　　　・
　　　　　　　・
　　　　　　　・
</div>

導入も手軽でページネーションもなかなか便利なんですが、fixedしないので縦長なコンテンツに実装しても当然意味が無いです。やはり画像用として使う感じになりそうですかね。

便利っちゃ便利ですけどアイデア次第かなぁ・・・でも、少しずつこういったJQMの拡張的なプラグインが増えてくれると個人的には嬉しいですね。ページネーションはこのプラグイン無くても作れそうな気もしますけど・・まぁ一応覚えておこうかなという感じで。

以下でダウンロードできますのでぜひお試しください。

jQuery Mobile Pagination Plugin