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を書くのが早いです。

まとめ

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

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

広告

関連記事

no image

Jenkins+Capistranoを設定した時にしたこと -「ポート変更」「公開鍵認証」対応-

* 前段階 上記にあるように、Jenkins+Capistranoの設定をしています。 ただし、設

記事を読む

no image

さくらのVPSでJenkins -執事さんとご対面-

さくらのVPSを利用している方は多いかと思います。 私も、自分で遊ぶ用(開発用)として借りてみまし

記事を読む

no image

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

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

記事を読む

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

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

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

記事を読む

スクリーンショット 2013-04-27 11.46.12

githubを使っての開発(2) -masterブランチにマージ-

前エントリーでgithub-flowをもとにした流れを書いたのですが、その中のマージについてもう少し

記事を読む

no image

iPhoneアプリ開発 -UIButtonのTouch Down、Touch up Inside、Touch up Outsideの使い方-

* Touch DownとTouch up Inside、Touch up Outsideの違い

記事を読む

no image

CakePHP1.3でテストコード(1) -モデルのテスト-

CakePHP1.3ではSimpleTestを用いてテストコードを書きます。 ※CakePHP2系で

記事を読む

no image

ヘルプ作成で思ったWebサービスの3つの心得 -短文の教え-

最近ヘルプを作って思った3つのこと。 * 1文に複数の内容を書かない 1文に複数の内容を書いてい

記事を読む

no image

iPhoneアプリ開発 -同じ画像を2度以上画像処理した際に起こるエラーの対処-

* 起きた現象 (1) UIImageのデータを元にピクセルの値を色々といじって画像処理。 (2)

記事を読む

no image

iPhoneアプリ開発 - touchesBeganとUITapGestureRecognizerの差(タッチとタップ) –

「画面にある画像を移動させたい」とか、「画面に線を書きたい」ということがあるかと思います。 ぐぐると

記事を読む

広告

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 ↑