• かちびと.net

    jQuery Mobileにシンプルなページネーションを簡単に実装出来るプラグイン・jQuery Mobile Pagination Pluginのご紹介。実装も簡単で手軽に使えるのが魅力です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

jQuery Mobileにシンプルなページネーションを簡単に実装出来るプラグイン・jQuery Mobile Pagination Plugin

スポンサーリンク

どこかで使うかもと思ったので備忘録。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

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services