Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery Mobile逆引きリファレンス

jQuery Mobile逆引きリファレンス

JavaScriptからjQuery Mobileページ間の移動を制御するには?

2014年9月11日

通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。

  • このエントリーをはてなブックマークに追加

jQuery Mobileとは?

 jQuery Mobileは、jQueryを拡張するライブラリ(プラグイン)の一種で、名前の通り、スマホ/タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス: jQuery Mobileを利用するには?」を参照してください。

 JavaScriptでは、ページ遷移のための仕組みとしてlocation.hrefプロパティが用意されています。しかし、jQuery Mobileでこれを利用してはいけません。以下に、具体的な例を見てみましょう。

HTML
<script>
$(document).on('pagecreate', function() {
  // ボタンクリックでページを移動
  $('#btn').click(function() {
    location.href = 'change_linked.html';
  });
});
</script>
……中略……
<div role="main" class="ui-content">
  <button id="btn" class="ui-btn">次のページへ</button>
</div>
ボタンクリックでページを遷移するためのコード(change.html)

 ボタンをクリックすると、ローダーも表示されず、遷移エフェクトも再生されないことを確認できます。location.hrefプロパティでは、jQuery Mobile本来の非同期通信が行われないためです。

ページ遷移を実行するchangeメソッド

 jQuery Mobile本来のページ遷移を有効にするには、Pagecontainerウィジェットのchangeメソッドを利用します*1。具体的には、先ほどのリストの太字部分を以下のように書き換えてください。

  • *1 jQuery Mobile 1.3以前では、$.mobile.changePageメソッドを利用していましたが、1.4では非推奨の扱いで、1.5で削除の予定です。
JavaScript
$('body').pagecontainer('change', 'change_linked.html',
                        { transition: 'turn' } );
jQuery Mobileでページを遷移するためのコード

 changeメソッドの構文は、以下の通りです。

[構文]changeメソッド

$('body').pagecontainer('change', リンク先URL, オプション)

 オプションには「オプション名: 値」のハッシュ形式で、以下のようなものを指定できます。

オプション概要デフォルト値
allowSamePageTransition 現在のページへの遷移を許可するか(通常はfalseを推奨) false
changeHash ブラウザー履歴を表すハッシュを付与するか(falseの場合、履歴が記録されないので[戻る]を利用できない) true
dataUrl ページ遷移後に利用するURL
loadMsgDelay ローダー表示までの遅延時間(ミリ秒) 50
reload 対象ページが文書ツリー上に存在する場合も再取得するか false
reverse 遷移エフェクトを逆方向に再生するか false
role data-role属性に設定する値
showLoadMsg ローダーを表示するか true
transition 利用する遷移エフェクト ($.mobile.defaultPageTransitionの値)
type リクエスト時に使用するHTTPメソッド GET
changeメソッドの主なオプション

 dataUrl属性の値は、デフォルトではリンク先のURLを利用します。また、リンク先のページでdata-url属性が指定されている場合には、これを利用します。

動的に作成したページに移動する

 changeメソッドを利用することで、JavaScriptコード上で動的に作成したページに対して移動することもできます。上と同じく、冒頭のリスト太字部分を以下のように置き換えます。

JavaScript
// ページ要素を準備
var page = '<div id="page2" data-role="page" data-title="jQuery Mobile">' +
  '<div data-role="header"><h1>jQuery Mobile TIPS</h1></div>' +
  '<div role="main" class="ui-content">リンク先のページだよ。</div>' +
  '<div data-role="footer">Copyright 1998-2014, YAMADA.Yoshihiro</div>' +
  '</div>';
// ページ要素を追加
$.mobile.pageContainer.append(page);
// ページを移動
$('body').pagecontainer('change', '#page2',
                        { transition: 'slide' } );
動的に作成したページに移動

 この例では、ページ要素を固定文字列で用意しているだけですが、一般的にはAjax通信などで取得したデータを基にページを生成することになるはずです。ページのコンテナー(=<body>要素)は、$.mobile.pageContainerでアクセスできます。

 ページ要素を文書ツリーに追加したら、あとはchangeメソッドを呼び出すだけです。ページ内リンクの要領で、リンク先には「#page2」のように指定する点にも注意してください。

ページを先読みするloadメソッド

 ページをロードし、そのまま遷移するchangeメソッドに対して、指定されたページを先読みして、待機しておくならばloadメソッドを利用します*1。いわゆるプリフェッチ機能に相当するメソッドです。

  • *1 jQuery Mobile 1.3以前では、$.mobile.loadPageメソッドを利用していましたが、1.4では非推奨の扱いで、1.5で削除の予定です。
HTML
<script>
$(document).on('pagecreate', function() {
  $('body').pagecontainer('load', 'change_linked.html');
});
</script>
……中略……
<a href="change_linked.html" class="ui-btn">次のページへ</button>
ページを先読みするためのコード(load.html)
ページロード時にchange_linked.htmlへのアクセスが発生(開発者ツール)
ボタンクリック時には通信は発生していない(開発者ツール)

 loadメソッドの構文は、以下の通りです。

[構文]loadメソッド

$('body').pagecontainer('load', 取得するページ, オプション)

 オプションには「オプション名: 値」のハッシュ形式で、以下のようなものを指定できます。

オプション概要デフォルト値
type リクエストで利用するHTTPメソッド GET
data リクエスト時に送信するデータ
reload 対象ページが文書ツリー上に存在する場合も再取得するか false
role data-role属性に設定する値
showLoadMsg ローダーを表示するか true
loadMsgDelay ローダー表示までの遅延時間(ミリ秒) 50
loadメソッドの主なオプション

※以下では、本稿の前後を合わせて5回分(第32回~第36回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery Mobile逆引きリファレンス
32. $.mobile.pathオブジェクトでパス/URLの情報を取得/操作するには?

パスやURLを取得/操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。

jQuery Mobile逆引きリファレンス
33. JavaScriptからフォーム要素を操作するには?

フォーム関連を自前で記述する場合、jQueryの知識を生かせるが、jQuery Mobile固有の注意点もある。その注意点を解説する。

jQuery Mobile逆引きリファレンス
34. 【現在、表示中】≫ JavaScriptからjQuery Mobileページ間の移動を制御するには?

通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。

jQuery Mobile逆引きリファレンス
35. ページのロード/切り替え時に初期化/後処理を実行するには?

ページを表示/切り替えするタイミングで発生するイベントにはどのようなものがあるのか。ページイベントの基本的な利用方法を説明する。

jQuery Mobile逆引きリファレンス
36. ページレイアウトが変更したときに処理を実行するには?

ウィジェットのレイアウト状態が変化したとき(例えば開閉パネルが開いた/閉じたときなどに)、処理を実行する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!