jQueryMobileでタッチ(スワイプ)してページ遷移 -Paginationプラグインの利用-

公開日: : 最終更新日:2014/04/20 IT, jQueryMobile


スマートフォン対応をしていてタッチしてページ遷移させたいケースがあるかと思います。
そんな時に便利なプラグインPaginationについてメモっておきます。

 Paginationプラグイン

jQuery Mobile Pagination Plugin | Filament Group, Inc., Boston, MA

デモは以下のページから見ることができます。
jQM Pagination Demo – 1

 利用手順

 導入手順

1.以下からjsファイルとcssファイルをダウンロードします。

2.ダウンロードしたファイル(cssファイル1つ、jsファイル1つ)をサーバーにアップロードします。
3.アップロードしたcssファイルとjsファイルを読み込むようにします。

<!-- jquerymobileのcssの後に追記 -->
<link rel="stylesheet" type="text/css" href="/pagination/jquery.mobile.pagination.css" />
<!-- jquerymobileのjsの後に記述 -->
<script type="text/javascript" src="/pagination/jquery.mobile.pagination.js"></script>

4.前、次ページのリンクを以下のように記述します。

<ul data-role="pagination">
  <li class="ui-pagination-prev"><a href="prevURL">前</a></li>
  <li class="ui-pagination-next"><a href="nextURL">次</a></li>
</ul>

※実際に利用する際は、jsとcssを圧縮して使うようにしてください。

 動作方法

ページ遷移させる方法以下のとおりです。

  • キーボードの右矢印・左矢印。
  • 右、左に表示されるボタンをクリック
  • タッチディスプレイであれば画面をタッチして右(または左)に動かす。

    • ※ためしてみるとわかると思いますが、少し横に動かすと前・次ページがチラチラ見えます。

 右、左に表示されるボタンがイヤな方

コンテンツの上に表示されてしまうボタンが邪魔なケースもあるかと思います。

jquery.mobile.pagination.jsの以下の箇所でボタンのマークアップをおこなっています。
ボタン表示がいらない場合は以下をなくしてしまえば表示されなくなります。

//set up next and prev buttons
$links.each(function(){
 var reverse = $( this ).closest( "." + prevLIClass ).length;
 $(this)
  .buttonMarkup({
   "role"    : "button",
   "theme"   : "d",
   "iconpos" : "notext",
   "icon"    : "arrow-" + ( reverse ? "l" : "r")
  })
  .bind( "vclick", function(){
   $.mobile.changePage( $(this).attr( "href" ), { reverse: reverse } );
   return false;
  });
});

 チラチラ見えるのがイヤな方

このpaginationではtouch(タッチしたときに発生)、touchmove(タッチしたまま動かしたときに発生)、touchend(タッチ状態から離れたときに発生)を利用しています。

なので、チラチラ見えずにタッチして横に動かしたらページ遷移するようにしたい場合は、素直にswipe、swipeleft、swiperightをbindしてページ遷移するjavascriptを書くのが早いです。

まとめ

このプラグインの利用用途としては、画像を次々と表示させるのに利用するのがベターです。
ページが縦に長く続く場合、画面をタッチして縦方向にずらしているときに、横にページがずれるので厄介です。

複数のスマートフォンで動作を試しましたが、端末によっては若干ページ遷移が重く感じることがあります。
なので、実際に利用する場合はそこを許容できるかどうかですね。

広告

関連記事

スクリーンショット 2012-10-20 14.26.24

iPhoneアプリ開発 −UITabControllerの利用−

* やりたいこと 上にあるように下部にあるタブをタッチしたら別のページを呼び出す。 * 

記事を読む

no image

iPhoneアプリ開発 -利用するべきサービス-

iPhone(iOS)アプリ開発において使っているサービスを列挙。 この手のサービスがないと、開発中

記事を読む

no image

iPhoneアプリ開発 -mixiSDKを使ってmixi連携をしてみる(2)-

* 前回 は、「ユーザーにAPI利用のための認可」をおこなってもらうところまでやりました。 本エン

記事を読む

no image

Twitterでサービスにログイン -ソーシャルログイン-

* やりたいこと -自身のWebサービスにTwitterIDでログイン(ソーシャルログイン)したい。

記事を読む

構成

定期的にデータ取得のためにCakePHP1.3でシェル機能を利用

定期的にデータを取得する行為をするために、はじめてシェル機能を使ってみたのでメモ。 * ス

記事を読む

no image

カレログ騒動で考えたライフログのこと

今回、カレログというAndroidアプリが話題になり騒動になってます。 というわけで、ふとカレログ

記事を読む

no image

jQuery Mobile導入手順 -はじめの一歩-

jQuery Mobileの1.0がリリースされ、利用したい方が増えていると思います。 最初に何を

記事を読む

no image

CAPTCHAの導入方法 -KCAPTCHAの導入-

CakePHP(1.2、1.3)にKCAPTCHAを導入してみたのでメモ。 * CAPTCHA

記事を読む

Jenkins + スマホアプリ(1) -スマホアプリ用CI環境を作ってみよう-

前回までは、iPhoneアプリでのCI環境でした。 TestFlightがAndroidアプリにも

記事を読む

iPhoneアプリ開発 芳名帳アプリ作成(4) -設定準備-

* 今までの流れ - -[http://pplace.jp/2013/06/1531/:title=

記事を読む

広告

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

広告

no image
[感想] Effective Objective-C 2.0 ☆☆☆☆★(4.5)

* 構成 - 第1章 Objective-Cに慣れる -

no image
[感想] iOSアプリテスト自動化入門 ☆☆☆(3.0)

* 構成 - Chapter 1 テスト自動化への取り組み

DeployGateを試してみた(iOS編) -DeployGateがiOSに対応-

今までのDeployGate - -[http://pplace.

iPhone/iPadアプリを開発するためにやったこと

今までに、iPhoneを3本ほどリリース((リリースしたアプリは全て1

no image
ターミナルでgitのコマンドを補完したりブランチ名を表示する – macでgitを便利に使うために –

* やりたいこと macのターミナルでgitをいじっていると -今の

→もっと見る

PAGE TOP ↑