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

jQuery Mobile逆引きリファレンス

jQuery Mobileの動作パラメーターを設定するには?

2014年8月21日

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.options.autodividersSelector 区切り線の挿入ルール
$.mobile.filterable.prototype.options.filterCallback フィルターの検索ルール
$.mobile.toolbar.prototype.options.addBackBtn [戻る]ボタンを表示するか
$.mobile.toolbar.prototype.options.backBtnText [戻る]ボタンのキャプション
$.mobile.toolbar.prototype.options.backBtnTheme [戻る]ボタンに適用するテーマ
$.mobile.loader.prototype.options.text ローディングメッセージ
$.mobile.loader.prototype.options.textonly ローダーでテキストだけ表示するか
$.mobile.loader.prototype.options.textVisible ローダーでテキストを表示するか
$.mobile.loader.prototype.options.theme ローダーに適用するテーマ
jQuery Mobileの主な動作パラメーター

 これらの動作パラメーターは、以下のルールで設定します。

(1)mobileinitイベントリスナー配下で設定する

 mobileinitは、jQuery Mobileそのものが読み込まれ、初期化されるタイミングで発生するイベントです。パラメーターによっては、以降のタイミングで設定しても構わないものもありますが、コードの可読性を鑑みれば、mobileinitイベントリスナーにまとめてしまうのが望ましいでしょう(あとで変更する際にも、対象を見付けやすくなります)。

(2)jQuery Mobileのロード直前に登録する

 mobileinitイベントの性質上、そのイベントリスナーはjQueryを読み込んだ後、jQuery Mobileを読み込む前に登録しなければなりません。

 では、具体的な例もいくつか見てみましょう。

デフォルトの遷移エフェクトを変更する

 以下は、ページデフォルトの遷移エフェクトを「turn」に設定するサンプルです。

HTML
<!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>
jQuery Mobileの動作パラメーターを設定するコード(param.html)
JavaScript
$(document).on('mobileinit', function() {
  $.mobile.defaultPageTransition = 'turn';
});
遷移エフェクトを変更するためのコード(init_param.js)

ウィジェットの自動適用を除外する

 別稿「Textinputウィジェットでテキスト入力ボックスを設置するには?」などでも見たように、jQuery Mobileではフォーム要素に対して自動的にウィジェットを適用しますので、特別な宣言は不要です。これはこれで便利なのですが、jQuery Mobileと他のライブラリを適用している場合、jQuery Mobileのウィジェットが邪魔になる場合もあります。

 そのような状況では、keepNativeプロパティでウィジェットの適用を除外してください。keepNativeプロパティには、ウィジェット適用を除外すべき要素をセレクター式で指定します。

HTML
$(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>
ウィジェットの適用を除外するコード(native.html)
標準のテキストボックスのみウィジェットの適用を除外

入力ボックスに特別な機能を付与する

 jQuery Mobileでは、<input>要素の表示はブラウザーの実装に委ねられています(search、range型のテキストボックスを除く)。例えば同じ<input type="number">要素でも、デスクトップ版Chromeではスピナー付きのボックスが表示されますが、Androidブラウザーでは標準のテキストボックスが表示され、代わりに入力時に数値用のソフトウェアキーボードが表示されます。

 しかし、これら入力ボックスに、他のライブラリで独自の機能を付与したいという場合はどうでしょう。ブラウザー標準の実装が邪魔になる場合があります。そのような場合には、(例えば)<input type="number">要素を強制的に<input type="text">要素に置き換える(=デグレードする)ことで、ブラウザー環境によらず、共通の機能を実装しやすくなります。

 これを行うのが、$.mobile.degradeInputsプロパティの役割です(次のコードがその実装例)。

HTML
$(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>
入力要素をデグレードするためのコード(degrade.html)

 $.mobile.degradeInputsプロパティは「現在のtype値: 変換後のtype値」のハッシュとして指定します。サンプルであれば、type属性が「number」「color」「email」である要素を全て<input type="text">要素に強制的に置き換えます。

 この結果、太字の部分は以下のように出力されます。

HTML
<input name="background" type="text" data-type="color">
出力結果

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

jQuery Mobile逆引きリファレンス
29. Filterableウィジェットによる検索ルールをカスタマイズするには?

リスト/テーブルなどに検索機能を付与できるFilterableウィジェット。その検索機能をカスタマイズする方法を解説する。

jQuery Mobile逆引きリファレンス
30. Sliderウィジェットで、スライダーを作成するには?

つまみをスライドして値を簡単に選択できるスライダーを作成するためのSliderウィジェットの基本的な使い方を説明する。

jQuery Mobile逆引きリファレンス
31. 【現在、表示中】≫ jQuery Mobileの動作パラメーターを設定するには?

jQuery Mobileやウィジェットの動作を変更できる「動作パラメーター」の基本的な使い方を解説する。

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

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

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

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

サイトからのお知らせ

Twitterでつぶやこう!