どこかで使うかもと思ったので備忘録。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の拡張的なプラグインが増えてくれると個人的には嬉しいですね。ページネーションはこのプラグイン無くても作れそうな気もしますけど・・まぁ一応覚えておこうかなという感じで。
以下でダウンロードできますのでぜひお試しください。