Paginationプラグイン

Paginationプラグイン

jQuery Mobile用プラグインの jQuery Mobile Pagination Plugin を試してみました。

これは、スライドショー式の「前/次」型ページを作るのに適したプラグインです。ざっと、次のようなことが出来るようです。

• ページ移動用に左右矢印のついたインターフェースを簡単に実装
• 前後のページは自動的にプリロード
• 画面のスワイプでページを切り替えられる
• キーボードによる左右矢印でもページ切り替え可能

さっそく、簡単な実装方法とデモを用意してみました。

デモ

プラグインデモとして、簡単なギャラリービューワをつくってみました。

» Paginationプラグイン デモ

これは、jQuery Mobile Galleryの最新10件をスライド式に閲覧できるものです。ページを前後させる動きを、特にタッチパネル環境でスワイプをつかって出来ることを見てみてください。PCから見る場合は、キーボードで操作できる点などを見てもらえれば。

実装方法

サイトのhead部分で、プラグイン用のCSSとJSを取り込みます。

<link rel="stylesheet" href="jquery.mobile.pagination.css">  
<script src="jquery.mobile.pagination.js"></script>

最新ファイルのダウンロードは Githubのプロジェクトページ から行います。

次に、コンテンツ内のドラッグ可能な領域としたい場所に、次のようにナビゲーション用のリンクを記述します。

<ul data-role="pagination">  
  <li class="ui-pagination-prev"><a href="prev.html">Prev</a></li>  
  <li class="ui-pagination-next"><a href="next.html">Next</a></li>  
</ul>

以上です。このリンクは自動的に左右矢印のスタイルが適用されます。両リンクはプリロードされるようになり、親要素はスワイプによるページ切り替えが可能になります。また、キーボードの左右矢印キーでも、ナビゲートできるようになっています。

iPhoneで見ると、自分の手元にあるものが古いせいもあるかもしれないですが、動きが重く感じます。画面をスワイプさせる動きの感度が良すぎるのではないかと思うので、ここに遊びを設定できるようになると嬉しいなと。

今回のデモのようなギャラリーページや、プレゼンなどのスライドショーを作る際に便利そうですね。