jQuery Mobile逆引きリファレンス
jQuery Mobileの動作パラメーターを設定するには？
jQuery Mobileやウィジェットの動作を変更できる「動作パラメーター」の基本的な使い方を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQuery Mobileにはさまざまな動作パラメーターが用意されており、jQuery Mobile（またはウィジェット）の動作をJavaScriptコードから変更できるようになっています。以下に、よく利用するパラメーターをまとめておきます。
| パラメーター | 概要 |
|---|---|
| $.mobile.defaultPageTransition | デフォルトで利用する遷移エフェクト |
| $.mobile.pageLoadErrorMessage | ページ遷移でエラーが発生したときのメッセージ |
| $.mobile.keepNative | ウィジェットの自動適用を除外する対象 |
| $.mobile.degradeInputs | デグレードすべき入力型（type属性） |
| $.mobile.listview.prototype. |
区切り線の挿入ルール |
| $.mobile.filterable.prototype. |
フィルターの検索ルール |
| $.mobile.toolbar.prototype. |
［戻る］ボタンを表示するか |
| $.mobile.toolbar.prototype. |
［戻る］ボタンのキャプション |
| $.mobile.toolbar.prototype. |
［戻る］ボタンに適用するテーマ |
| $.mobile.loader.prototype. |
ローディングメッセージ |
| $.mobile.loader.prototype. |
ローダーでテキストだけ表示するか |
| $.mobile.loader.prototype. |
ローダーでテキストを表示するか |
| $.mobile.loader.prototype.options.theme | ローダーに適用するテーマ |
これらの動作パラメーターは、以下のルールで設定します。
（1）mobileinitイベントリスナー配下で設定する
mobileinitは、jQuery Mobileそのものが読み込まれ、初期化されるタイミングで発生するイベントです。パラメーターによっては、以降のタイミングで設定しても構わないものもありますが、コードの可読性を鑑みれば、mobileinitイベントリスナーにまとめてしまうのが望ましいでしょう（あとで変更する際にも、対象を見付けやすくなります）。
（2）jQuery Mobileのロード直前に登録する
mobileinitイベントの性質上、そのイベントリスナーはjQueryを読み込んだ後、jQuery Mobileを読み込む前に登録しなければなりません。
■
では、具体的な例もいくつか見てみましょう。
デフォルトの遷移エフェクトを変更する
以下は、ページデフォルトの遷移エフェクトを「turn」に設定するサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobile</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--パラメーター設定のコードは、jQuery Mobileロード前にインポート-->
<script src="init_param.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js">
</script>
</head>
<body>
<div data-role="page" data-title="jQuery Mobile">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div role="main" class="ui-content">
<a href="page.html" class="ui-btn">次ページへ移動</a>
</div>
<div data-role="footer">
Copyright 1998-2014, YAMADA.Yoshihiro
</div>
</div>
</body>
</html>
|
|
$(document).on('mobileinit', function() {
$.mobile.defaultPageTransition = 'turn';
});
|
ウィジェットの自動適用を除外する
別稿「Textinputウィジェットでテキスト入力ボックスを設置するには？」などでも見たように、jQuery Mobileではフォーム要素に対して自動的にウィジェットを適用しますので、特別な宣言は不要です。これはこれで便利なのですが、jQuery Mobileと他のライブラリを適用している場合、jQuery Mobileのウィジェットが邪魔になる場合もあります。
そのような状況では、keepNativeプロパティでウィジェットの適用を除外してください。keepNativeプロパティには、ウィジェット適用を除外すべき要素をセレクター式で指定します。
|
$(document).on('mobileinit', function() {
// <input type="text">要素にはウィジェットを適用しない
$.mobile.keepNative = 'input[type="text"]';
});
</script>
……中略……
<form>
<div class="ui-field-contain">
<label for="name">ユーザー名：</label>
<input id="name" name="name" type="text" />
</div>
<div class="ui-field-contain">
<label for="passwd">パスワード：</label>
<input id="passwd" name="passwd" type="password" />
</div>
</form>
|
入力ボックスに特別な機能を付与する
jQuery Mobileでは、<input>要素の表示はブラウザーの実装に委ねられています（search、range型のテキストボックスを除く）。例えば同じ<input type="number">要素でも、デスクトップ版Chromeではスピナー付きのボックスが表示されますが、Androidブラウザーでは標準のテキストボックスが表示され、代わりに入力時に数値用のソフトウェアキーボードが表示されます。
しかし、これら入力ボックスに、他のライブラリで独自の機能を付与したいという場合はどうでしょう。ブラウザー標準の実装が邪魔になる場合があります。そのような場合には、（例えば）<input type="number">要素を強制的に<input type="text">要素に置き換える（＝デグレードする）ことで、ブラウザー環境によらず、共通の機能を実装しやすくなります。
これを行うのが、$.mobile.degradeInputsプロパティの役割です（次のコードがその実装例）。
|
$(document).on('mobileinit', function() {
// type属性のデグレード規則を設定
$.mobile.degradeInputs = {
'number': 'text',
'color': 'text',
'email': 'text'
};
});
</script>
……中略……
<div class="ui-field-contain">
<label for="background">背景：</label>
<input id="background" name="background" type="color" />
</div>
|
$.mobile.degradeInputsプロパティは「現在のtype値: 変換後のtype値」のハッシュとして指定します。サンプルであれば、type属性が「number」「color」「email」である要素を全て<input type="text">要素に強制的に置き換えます。
この結果、太字の部分は以下のように出力されます。
|
<input name="background" type="text" data-type="color">
|
※以下では、本稿の前後を合わせて5回分（第29回～第33回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
29. Filterableウィジェットによる検索ルールをカスタマイズするには？
リスト／テーブルなどに検索機能を付与できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。
31. 【現在、表示中】≫ jQuery Mobileの動作パラメーターを設定するには？
jQuery Mobileやウィジェットの動作を変更できる「動作パラメーター」の基本的な使い方を解説する。
32. $.mobile.pathオブジェクトでパス／URLの情報を取得／操作するには？
パスやURLを取得／操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
