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

まとめ

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

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

広告

関連記事

Jenkins + iPhoneアプリ(2) -ローカルリポジトリにあるデータからipaファイル生成-

* これまで - * 最終目標 -(開発者)git(リモートリポジトリ)にソースをコミット

記事を読む

no image

Facebookがちょっとコワイ vol.2 -本当にあなたはあなたなの?-

以下のブログを読んで、さらにコワイと思ったFacebook。 あなたが登録している「友

記事を読む

setup

Google Appsで独自ドメインメールの利用

独自ドメインでメアドを持ちたかったのでGoogle Appsを利用してみました。 その各種設定の覚

記事を読む

no image

jQuery Mobileでdata-role=headerを使うときの注意点 -勝手にタイトルが変更される件-

* 現象 +headタグでtitleタグで文字列(A)を記述している +data-role=he

記事を読む

no image

iPhoneアプリ開発 −遷移先のViewControllerに値を引き継ぎたい−

例えば、トップページに複数個のボタンがあって、「A」と「B」というボタンを押下した際に、同じView

記事を読む

no image

CakePHP1.3でスマートフォン対応

CakePHP1.3でスマートフォン対応のためにやったことをメモしておきます。 * 環境 -

記事を読む

no image

Androidアプリ開発 -画像を加工してセピア色にしてみる-

* やりたいこと ギャラリーから選んだ画像を加工してセピア色にしたい * ソース ** 画像を取得

記事を読む

no image

iPhoneアプリ開発 -Bundle identifierを変えてはまった-

* 現象 Bundle identifierを変えた際にXcodeで実機に転送しようとすると以下のエ

記事を読む

no image

リンク文字をタッチしても色が変わらない --webkit-tap-highlight-colorのメモ-

* 背景 jQuery Mobileを利用してスマートフォン対応をしたサイトにおいてリンク文字をタッ

記事を読む

MacでRuby on Railsの開発環境構築 -Apacheで動かす-

* 環境 -MacBook Air MD231J/A -Mac OS X バージョン10.8.2

記事を読む

広告

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 ↑