jQuery Mobile逆引きリファレンス
JavaScriptからjQuery Mobileページ間の移動を制御するには？
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前の通り、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
JavaScriptでは、ページ遷移のための仕組みとしてlocation.hrefプロパティが用意されています。しかし、jQuery Mobileでこれを利用してはいけません。以下に、具体的な例を見てみましょう。
|
<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>
|
ボタンをクリックすると、ローダーも表示されず、遷移エフェクトも再生されないことを確認できます。location.hrefプロパティでは、jQuery Mobile本来の非同期通信が行われないためです。
ページ遷移を実行するchangeメソッド
jQuery Mobile本来のページ遷移を有効にするには、Pagecontainerウィジェットのchangeメソッドを利用します*1。具体的には、先ほどのリストの太字部分を以下のように書き換えてください。
- *1 jQuery Mobile 1.3以前では、$.mobile.changePageメソッドを利用していましたが、1.4では非推奨の扱いで、1.5で削除の予定です。
|
$('body').pagecontainer('change', 'change_linked.html',
{ transition: 'turn' } );
|
changeメソッドの構文は、以下の通りです。
［構文］changeメソッド
オプションには「オプション名: 値」のハッシュ形式で、以下のようなものを指定できます。
| オプション | 概要 | デフォルト値 |
|---|---|---|
| allowSamePageTransition | 現在のページへの遷移を許可するか（通常はfalseを推奨） | false |
| changeHash | ブラウザー履歴を表すハッシュを付与するか（falseの場合、履歴が記録されないので［戻る］を利用できない） | true |
| dataUrl | ページ遷移後に利用するURL | － |
| loadMsgDelay | ローダー表示までの遅延時間（ミリ秒） | 50 |
| reload | 対象ページが文書ツリー上に存在する場合も再取得するか | false |
| reverse | 遷移エフェクトを逆方向に再生するか | false |
| role | data-role属性に設定する値 | － |
| showLoadMsg | ローダーを表示するか | true |
| transition | 利用する遷移エフェクト | （$.mobile. |
| type | リクエスト時に使用するHTTPメソッド | GET |
dataUrl属性の値は、デフォルトではリンク先のURLを利用します。また、リンク先のページでdata-url属性が指定されている場合には、これを利用します。
動的に作成したページに移動する
changeメソッドを利用することで、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で削除の予定です。
|
<script>
$(document).on('pagecreate', function() {
$('body').pagecontainer('load', 'change_linked.html');
});
</script>
……中略……
<a href="change_linked.html" class="ui-btn">次のページへ</button>
|
loadメソッドの構文は、以下の通りです。
［構文］loadメソッド
オプションには「オプション名: 値」のハッシュ形式で、以下のようなものを指定できます。
| オプション | 概要 | デフォルト値 |
|---|---|---|
| type | リクエストで利用するHTTPメソッド | GET |
| data | リクエスト時に送信するデータ | － |
| reload | 対象ページが文書ツリー上に存在する場合も再取得するか | false |
| role | data-role属性に設定する値 | － |
| showLoadMsg | ローダーを表示するか | true |
| loadMsgDelay | ローダー表示までの遅延時間（ミリ秒） | 50 |
※以下では、本稿の前後を合わせて5回分（第32回～第36回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
32. $.mobile.pathオブジェクトでパス／URLの情報を取得／操作するには？
パスやURLを取得／操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
34. 【現在、表示中】≫ JavaScriptからjQuery Mobileページ間の移動を制御するには？
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
